【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ユーザーの JonyとAi(@1 […]

みなさんこんにちは。 THE THORのアイキャッチ上に付いてる記事情 […]

THE THORユーザーのみなさんこんにちは。Jonyと Ai(@10 […]

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

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

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

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

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

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

おわり

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)ユーザーの JonyとAi(@10to1_travel)です。 私たちはまだブログを始めて1年経たないほどの「THE THOR初心者」です。 なぜ権威性も実績も[…]