本記事は約3分で読むことができます。
【THORのCSS】画像下キャプションを灰色小文字センター配置【アフィンガー風】


WordPressテーマで、THOR使ってるけど、画像の下中央にキャプション入れたい。
できれば、灰色で小文字で配置してほしいな。
デフォルトでは、左端に黒文字って質素な感じなんだよね、、



今日は「お悩み解決に役立つ内容」をお伝えしていきます!
僕もWordPressテーマ『THOR』使いながら、同様に不満に思った点ではありました。
本記事を読むことで、THORユーザーが「CSS」で簡単に、「画像下に灰色小文字でキャプション表示」することが可能。
特化ブログ「人生を変えた映画・アニメBlog」でテーマ『THOR』を使ってたので、解決済みの内容になります。



現在は、アフィンガー6にテーマ変更してるけどね。



2022年9月現在、映画・アニメやVOD紹介ブログ「人生を変えた映画・アニメBlog」もSWELLで運営に変えちゃいました笑。
今日はどうぞ最後まで、お読みくださいね。
THORの画像下のキャプションは地味


おしゃれな画像欲しいときに、『freepik』のフリー素材とか使いますよね。



無料でも、「キャプション」を入れる必要性が多いです。
THORだと、現状、左端に黒文字でシンプルな感じに表示(下記画像)。


デメリット
機能や、ワンタッチで画像下のキャプションをデザイン変更できない。
他のテーマはどうなの?
下記の2つのテーマを使用するぼくが紹介します。
- アフィンガー6
- SWELL
アフィンガー6
デフォルトで、画像追加する際に、「キャプション」に指定された「HTMLコード」入れるたら下記のデザイン。
SWELL
デフォルトで、中央表示(小文字)されます(記事後半で解説)。



アフィンガー6に比べると、「HTMLコード」がリンク先なので、リンクっぽく表示されて「主張感」は多少ある。



気にならないレベルだけどね(主観)。
画像にキャプション入れるやり方


そもそも、「画像にキャプション入れるってどうやるんだ?」って言う人向けに確認。
記事編集画面(ブロックエディタ)の場合




<a href='https://www.freepik.com/vectors/people'>People vector created by freepik - www.freepik.com</a>



上記のライセンスコードは例でして、今の見出しの下の画像のライセンスのキャプションコード(HTML)です。
- 「HTMLコード(ライセンス)」ってどこ?
-
freepikの場合、ダウンロード時に画面に出てくる(泣き顔などのキャラ表示時)コード(下記画像)です。
- 画面を閉じてしまった場合は、どうするの?
-
ダウンロードした画像のZIPファイルに含まれる「テキストファイル」の中に記載されています。
メディアライブラリから新規追加の場合





すでに解説した内容なので、割愛。
THORで画像下にキャプションを灰色中央表示


追加CSSにコードをコピペで一発解決です。



/*CSSコードの説明*/をつけてコピペすると、コード内容が雑多にならないですよ。
/*画像下キャプションセンター灰色*/
.wp-caption-text {
text-align: center;
font-size: small;
color: #a9a9a9;
}
注意点
追加CSSにコードをコピペする際は、バックアップ推奨。
THORで追加CSSコピペしたりが嫌な場合
- もしも、ミスったりしたらどうしよう
- サイトが壊れるの嫌だ
- 100%確実な状態で、画像下にキャプションを灰色中央小文字表示したい



上記の方は、SWELL
追加CSSコピペせずとも、デフォルトで表示されます(下記比較画像)。


初心者の僕も、すごく助かったテーマです。



もちろん、THORも「追加CSS」使って以降、愛着がさらに増してたよね。
SWELL
今日は、最後までお読みいただき、ありがとうございました!