ワードプレステーマ「ストーク」 トップ画像の幅が上手くいかない時の対策方法!

くろパパ
こんにちは。くろパパです。

今回は「大人気のワードプレステーマ『ストーク』でトップ画像が上手く決まらないときの対策方法」をご紹介いたします。

「ストーク」は

ストークの特徴
  • モバイルファースト
  • おしゃれなデザイン
  • 初心者でも簡単

という特徴のワードプレステーマです。

興味のある方はWordPressテーマ「STORK19」をどうぞ。



くろパパ
ちなみに私はこの「ストーク19」の古いバージョンの「ストーク」です。

新しいものに変更したい。

 

スートクのトップ画像の設定

ストークのトップ画像を設定する方法は

ドップ画像の設定方法
  1. もともとストークで出来る設定
  2. CSSコードでトップ画像のテキストの大きさを変えて画像の幅を調整
  3. 画像自体を加工する

の3つとなっています。

詳しくは下で説明します。

 

もともとストークで出来る設定

まずは、もともとストークで出来る設定から説明します。

くろパパ
こちらは特に難しい事もないので駆け足で説明していきます。

ストーク自体での設定方法は、ダッシュボードの

「外観」→「カスタマイズ」をクリックし、カスタマイズ画面を開きます。

その中のトップページ設定を開くと、トップ画像のテキストの設定と

赤丸の部分で、P C・スマホのトップ画像の設定ができます。

画像を設定したら、その下に

「ヘッダー背景サイズ」・「ヘッダー折り返し」の設定をする事ができます。

ヘッダーサイズは

  • auto
  • 横に合わせる
  • 縦に合わせる
  • サイズ変更しない

ヘッダー折り返しは

  • 折り返し表示
  • 横に折り返し
  • 縦に折り返し
  • 折り返ししない
を選択する事ができます。

ここはカスタマイズ画面を見ながら調整して下さい。

ストーク自体で出来る設定は以上です。

くろパパ
特に問題ないですね。しかしここからが問題です。

 

CSSコードで設定

トップ画像を設定してトップページをみてみると、

PC版の場合、赤丸のテキストが黄色の丸のトップ画像に綺麗に収まってますね。

しかし、スマホ表記でチェックしてみると

くろパパ
文字が大きすぎてダサい〜。

これじゃあ、せっかくの可愛い画像が台無し。

そこでテキストの文字を小さくしたいのですが、ストークにはその設定がありません。

インターネットで方法を調べていたら、追加CSSにコードを貼るだけで文字の大きさを調整できる方法を紹介しているサイトがありましたので、そちらを試すことに。

ちなみにこちらのサイトです。

カスタマイズの一番下にある追加CSSにコードの部分を開き、コードを入れて、

赤丸部分のフォントを2.3から1.0にすると、良い感じにスマホに収まりました!

 

画像の加工

しかし、さらなる問題が発生しました。

なんとテキストの文字の大きさと比例し、画像の縦幅も狭くなります。

くろパパ
私と妻の頭がきれてしまいます。

せっかく可愛い画像なのでしっかりと納めたいです。

コードとか詳しい事がよく分からないので、ここは大人しく画像を引き伸ばします!

ひょっとしたらコピペで簡単にできる方法を紹介しているサイトもあるかもですが、見つけられませんでした。

ちなみにMacのkeynoteで画像を引き伸ばす方法は

簡単にできる!Macのkeynote(キーノート)で画像を引き伸ばす方法!

2020年8月18日

でご紹介していますので良かったらどうぞ。

画像を引き伸ばし文字を調整すると、

PC

スマホ

と両方ともにバランスよく可愛らしい感じになりました!

くろパパ
これなら、ブログを見にきてくれた方も初見はいい印象を持ってくれるはずです。

といった感じで簡単にトップページの画像を調整してみて下さい。

では。