悩む人WordPressテーマで、THOR使ってるけど、画像の下中央にキャプション入れたい。
できれば、灰色で小文字で配置してほしいな。
デフォルトでは、左端に黒文字って質素な感じなんだよね、、
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきますね。
僕もWordPressテーマ『THOR』使いながら、同様に不満に思った点ではありました。
本記事を読むことで、THORユーザーが「CSS」で簡単に、「画像下に灰色小文字でキャプション表示」することが可能。
特化ブログ「人生を変えた映画・アニメBlog」でテーマ『THOR』を使ってたので、解決済みの内容になります。
くろーむ現在は、アフィンガー6にテーマ変更してるけどね。
あいうえおLIFE2022年9月現在、映画・アニメやVOD紹介ブログ「人生を変えた映画・アニメBlog」もSWELLで運営に変えちゃいました笑。
今日はどうぞ最後まで、お読みくださいね。
THORの画像下のキャプションは地味
おしゃれな画像欲しいときに、『freepik』のフリー素材とか使いますよね。
あいうえおLIFE無料でも、「キャプション」を入れる必要性が多いです。
THORだと、現状、左端に黒文字でシンプルな感じに表示（下記画像）。
デメリット
機能や、ワンタッチで画像下のキャプションをデザイン変更できない。
他のテーマはどうなの？
下記の2つのテーマを使用するぼくが紹介します。
- アフィンガー6
- SWELL
アフィンガー6
デフォルトで、画像追加する際に、「キャプション」に指定された「HTMLコード」入れるたら下記のデザイン。
SWELL
デフォルトで、中央表示（小文字）されます（記事後半で解説）。
あいうえおLIFEアフィンガー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にコードをコピペで一発解決です。
あいうえおLIFE/*CSSコードの説明*/をつけてコピペすると、コード内容が雑多にならないですよ。
/*画像下キャプションセンター灰色*/
.wp-caption-text {
text-align: center;
font-size: small;
color: #a9a9a9;
}注意点
追加CSSにコードをコピペする際は、バックアップ推奨。
THORで追加CSSコピペしたりが嫌な場合
- もしも、ミスったりしたらどうしよう
- サイトが壊れるの嫌だ
- 100％確実な状態で、画像下にキャプションを灰色中央小文字表示したい
あいうえおLIFE上記の方は、SWELLかアフィンガー6を選んでおけば間違いないです。
追加CSSコピペせずとも、デフォルトで表示されます（下記比較画像）。
初心者の僕も、すごく助かったテーマです。
くろーむもちろん、THORも「追加CSS」使って以降、愛着がさらに増してたよね。
SWELLが気になる方は、当サイトでレビュー記事を書きましたので、ぜひ下記から読んでくださいね。
今日は、最後までお読みいただき、ありがとうございました！
