みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
THE THORの画像の下のキャプション(画像の説明文)って気になったことありませんか？
気になる点
- フォントサイズが本文と同じ
- フォントカラーも同じ
- 本文と差別化できてない
そこで本日は画像の下にあるキャプション(画像の説明文)をもっと見やすく！本文と差別化できるようにカスタマイズします！
本日のカスタマイズ
- テキストを中央寄せ
- フォントカラーを変更
- フォントサイズを変更
- 画像との隙間を調節
完成図は以下の通り。
今回のカスタマイズはコピペだけなのでさっそく解説していきます！
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についてもっと詳しく知りたい人は、簡単！THE THOR「追加 CSS」でカスタマイズする方法をご覧ください。
みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ！】ってタイトルありますよね。 でも コピペってどこに？追加 CSSって[…]
以上でカスタマイズは完了です！簡単でしたね！次はお待ちかね、テキストの色や大きさを変更する方法をお伝えします。
【応用】画像キャプションを細かくカスタマイズ
画像キャプションと言っても自分のサイトデザインに合わせた色や大きさにしたいですよね。中には画像キャプションを重要視してるサイトもあります。
と言ってもカスタマイズ方法はとても簡単なので初心者の方でも心配なくできます。
画像キャプションの文字色を変更する
画像キャプションを見やすくするのに最も重要なのが文字の色です。色はサイトの中でも目を止める重要な役割を果たしますので、しっかりあなたのサイトに合った色にしましょう。
画像キャプションの文字色を変更するには、color:#707070;の部分のカラー番号を変更します。
カラー番号とは、#から始まる 6桁の番号のことです。
カラー番号は私たちもよく利用させていただいてる原色大辞典さんがたいへん便利ですのでオススメです。
画像キャプションの大きさを変更する
画像キャプションの大きさは画像の邪魔をせず、テキストをアピールするのに重要な要素ですね。
画像キャプションのテキストの大きさを変更するにはfont-size:15px;の数値を変更します。
数値を大きくすればテキストが大きくなります。逆に小さくするとテキストが小さくなりますが、あまり小さすぎると見にくくなりユーザービリティを損ねるので 15px以上がオススメです。
画像キャプション上のスペース
私たちは画像とキャプションのスペース(余白)が読みやすさを格段に上げる要素たと思っています。
デフォルトでは画像とキャプションの間にスペースが無く詰まっていて見にくかったので、CSSで作ります。
margin-top:5px;の値を変更してスペースを調節してください。数値を大きくするとスペースが大きくなります。
逆にスペースを消したい・不要な場合はコードを一行ごと消去してください。
画像キャプションの位置を変更する
サイトによって文章の寄りが違うように、キャプションにも注意を払う必要があります。
THE THOR(ザ・トール)のデフォルトではキャプションが左寄りになってたので中央に変更してます。
左寄せに戻したい場合はtext-align:center;を消去してください。
右寄せにしたい場合はtext-align:right;にすれば変更されます。
以上でカスタマイズは終了です。
THE THORの画像キャプション(説明文)を見やすくカスタマイズ：まとめ
今回は THE THOR(ザ・トール)の画像の下のキャプション(画像の説明文)を見やすくカスタマイズしました。
コピペだけなのでとても簡単にカスタマイズできましたね。画像のキャプションは地味なポジションですが、特に場所の紹介や画像で解説したい場合などはとても重宝します。
それだけにデザインもしっかりしてた方が読者に伝わりやすくなり、結果あなたのサイトのユーザービリティの向上にも繋がりますね。
他にも THE THOR(ザ・トール)のカスタマイズを紹介してるのでご覧ください。
最後まで読んでいただきありがとうございます。
おわり
- 2022年1月3日
- THE THORのカスタマイズ
- CSSカスタマイズ, THE THOR