【THE THOR】画像「引用 テキスト」を見やすくカスタマイズ

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

THE THORの画像の下の引用テキストって気になったことありませんか?

the thor 画像 引用 テキスト カスタマイズ
  • フォントサイズが本文と同じ
  • フォントカラーも同じ
  • 本文と差別化できてない
 
Jony
画像の引用テキストだからなるべく控えめに画像を説明したいよな!
 
Ai
まああんまり気にしてる人いないけどね。笑

そこで本日は画像の下にある引用テキストをもっと見やすく!本文と差別化できるようにカスタマイズします!

本日のカスタマイズ

  • テキストを中央寄せ
  • フォントカラーを変更
  • フォントサイズを変更
  • 画像との隙間を調節

完成図は以下の通り。

 
うん!だいぶ見やすくなって本文と混ざらないね!

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)を本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。

※カスタマイズは自己責任でお願いします。

THE THOR 画像「引用 テキスト」を見やすくカスタマイズ

それでは引用テキストをカスタマイズしていきます。

追加 CSSは

外観 → カスタマイズ → 追加CSS

と進んでコピペしてください。

追加CSSについてもっと詳しく知りたい人は、簡単!THE THOR「追加 CSS」でカスタマイズする方法をご覧ください。

/*画像引用文字カスタマイズ*/
 .wp-block-image figcaption {
 color: #707070;
 text-align:center;
 }
 .content .wp-caption-text{
 color:#707070;
 margin-top:5px;
 font-size:15px;
 text-align:center;
 }

グーテンベルクとクラシックの両方をカスタマイズしてます。
それぞれ要素と表記方法が違うようなので。

color: #707070でフォントカラーをグレーにしてます。
希望のカラーにしてください。

margin-top:5px;を使って画像とテキストの隙間を調整してます。
サイズを変える場合は数値を、隙間が不要の場合はコードを消去してください。

font-size:15px;でフォントサイズを小さくしました。

text-align:center;でフォントを中央にしてます。
不要の場合は消去してください。

以上でカスタマイズは終了です。

 
これで少しは本文との差別化ができたな!
 
地味なカスタマイズだけど大事なことだもんね!

THE THORのおすすめ カスタマイズ一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

みなさんこんにちは。 ブログを書いてると画像データが増えていき、サイト […]

みなさんこんにちは。 THE THOR(ザ・トール)って人気の有料テー […]

みなさんこんにちは。 THE THOR (ザ・トール)は SEOやデザ […]

みなさんこんにちは。 THE THORを使っておきながら、サルワカさん […]

みなさんこんにちは。 WordPressには 2種類のテキスト・エディ […]

THE THOR 画像「引用 テキスト」を見やすくカスタマイズ まとめ

画像の引用テキストは画像の単体に説明を入れるときに役立ちますよね。

それだけに本文と混ざってしまうと記事が読みにくくなってしまいます。

しっかり画像の引用テキストだと分かるように差別化が必要でした。

ですのでこのカスタマイズは私たち的には気に入ってます♪

 
まあ完全に自己満だけどな!
 
でもそれが大事だよね。笑
最後まで読んでいただきありがとうございます!

おわり

関連記事

テーマの名前 THE THOR (ザ・トール) 評判 [star-list number=4.5] [4.5点] 初心者 [star-list number=5][5点] デザイン [star-list nu[…]