【THE THOR】画像のキャプションを見やすくカスタマイズ

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

THE THORの画像の下のキャプション(画像の説明文)って気になったことありませんか?

the thoのキャプション(画像説明文)カスタマイズ

 気になる点

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

そこで本日は画像の下にあるキャプション(画像の説明文)をもっと見やすく!本文と差別化できるようにカスタマイズします!

本日のカスタマイズ

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

完成図は以下の通り。

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

今回のカスタマイズはコピペだけなのでさっそく解説していきます!

THE THORのキャプション(画像の説明文)カスタマイズ方法

それでは THE THOR(ザ・トール)のキャプション(画像の説明文)をカスタマイズしていきます。

手順は以下の通りです。

キャプションのカスタマイズ手順
  • STEP1.
    CSSをコピーする
    THE THOR(ザ・トール)のキャプションのデザインを変更するための CSSをコピーします。
  • STEP2.
    【追加CSS】に貼り付ける
    コピーした CSSを THE THOR(ザ・トール)の機能【追加CSS】に貼り付けます。

STEP1.CSSをコピーする

STEP1ではキャプションのデザインを編集するための CSSをコピーします。

以下の 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;
 }

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

このコードなら簡単にテキストの色や大きさも自由に変えれます。変更方法はこの後に紹介します!

STEP2.【追加CSS】に貼り付ける

STEP2では THE THOR(ザ・トール)の追加CSSにコピーした CSSを貼り付けます。

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

と進み CSSを貼り付けます。

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

関連記事

みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって[…]

以上でカスタマイズは完了です!簡単でしたね!

次はお待ちかね、テキストの色や大きさを変更する方法をお伝えします。

キャプションの文字や大きさを変更するカスタマイズ方法

キャプションと言っても自分のサイトデザインに合わせた色や大きさにしたいですよね。中にはキャプションを重要視してるサイトもあります。

と言ってもカスタマイズ方法はとても簡単なので初心者の方でも心配なくできます。

文字色を変更する

キャプションを見やすくするのに最も重要なのが文字の色です。色はサイトの中でも目を止める重要な役割を果たしますので、しっかりあなたのサイトに合った色にしましょう。

キャプションの文字色を変更するには、color:#707070;の部分のカラー番号を変更します。

カラー番号とは、#から始まる 6桁の番号のことです。

カラー番号は私たちもよく利用させていただいてる原色大辞典さんがたいへん便利ですのでオススメです。

原色大辞典

色の名前とカラーコードが一目でわかるWEB色見本…

キャプションの大きさを変更する

キャプションの大きさは画像の邪魔をせず、テキストをアピールするのに重要な要素ですね。

キャプションのテキストの大きさを変更するにはfont-size:15px;の数値を変更します。

数値を大きくすればテキストが大きくなります。逆に小さくするとテキストが小さくなりますが、あまり小さすぎると見にくくなりユーザービリティを損ねるので 15px以上がオススメです。

キャプション上のスペース

私たちは画像とキャプションのスペース(余白)が読みやすさを格段に上げる要素たと思っています。

デフォルトでは画像とキャプションの間にスペースが無く詰まっていて見にくかったので、CSSで作ります。

margin-top:5px;の値を変更してスペースを調節してください。数値を大きくするとスペースが大きくなります。

逆にスペースを消したい・不要な場合はコードを一行ごと消去してください。

キャプションの位置を変更する

サイトによって文章の寄りが違うように、キャプションにも注意を払う必要があります。

THE THOR(ザ・トール)のデフォルトではキャプションが左寄りになってたので中央に変更してます。

左寄せに戻したい場合はtext-align:center;を消去してください。

右寄せにしたい場合はtext-align:right;にすれば変更されます。

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

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

【THE THOR】キャプション(画像の説明文)カスタマイズ:まとめ

今回は THE THOR(ザ・トール)の画像の下のキャプション(画像の説明文)を見やすくカスタマイズしました。

コピペだけなのでとても簡単にカスタマイズできましたね。画像のキャプションは地味なポジションですが、特に場所の紹介や画像で解説したい場合などはとても重宝します。

それだけにデザインもしっかりしてた方が読者に伝わりやすくなり、結果あなたのサイトのユーザービリティの向上にも繋がりますね。

他にも THE THOR(ザ・トール)のカスタマイズを紹介してるのでご覧ください。

最後まで読んでいただきありがとうございます。

おわり