THE THORで画像キャプションを灰色中央表示するCSSを解説

THE THORの画像下のキャプションをおしゃれに配置したい人

  THE THORで画像下にキャプションを灰色中央表示にする方法を教えて欲しい

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。

あいうえおLIFE

サイト運営者について : 「副業スキルで複数収入」がテーマ / 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者 / 2サイト合計最高月間1万5,000PV / ブログ収益：月3万〜4万円

THE THORで画像下にキャプションを灰色中央表示にする方法が気になりますよね！ぼくもデフォルトでは「左端に黒文字が質素な感じ」が嫌で、アフィンガー6のように「灰色で小さめにセンター配置」したくて色々と模索しました…

目次以降では詳細な理由や具体例を、画像も用いて解説します。

THE THORは株式会社フィットが開発した、SEO、デザイン、機能性に優れたWordPressテーマ。

画像下にキャプションを表示する方法自体は、ブロックエディタの場合下記のとおり。

• プラスボタン押して、画像ブロックを選択
• すでにアップロードしている場合、「メディアライブラリ」を選択
• キャプションの部分に、必要な「HTMLコード（ライセンス）」をコピペ

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

メディアライブラリから新規追加の場合

• アップロード→メディアを編集→キャプションに「HTMLコード（ライセンス）」をコピペ
• 記事編集画面で画像ブロックから画像を選ぶ

画像下にキャプションを灰色中央表示するにはCSSで1発解決です。

管理画面→外観→カスタマイズ→追加CSSへ本記事で紹介するコードをコピペしましょう。

ぼくも実際に特化ブログ「人生を変えた映画・アニメBlog」で「THE THOR」を使っていたので、実証済みのコード。

本記事を読みCSSを追加することで、「THE THORの画像下キャプションが灰色中央表示する」のでデフォルトの「左端に黒文字が質素な感じ」を解消できますよ。

あいうえおLIFE

2022年9月時点の情報で「人生を変えた映画・アニメBlog」もSWELLにテーマを変えちゃいましたが、THE THORをアフィンガー風にして愛着を持てること間違いなし。

今日はどうぞ最後まで、お読みくださいね。

THE THORで画像下にキャプションを灰色中央表示するCSS

前述のとおり「管理画面→外観→カスタマイズ→追加CSS」へ下記のコードをコピペします。

/*画像下キャプションセンター灰色*/
.wp-caption-text {
text-align: center;
font-size: 0.8em; /*文字サイズ*/
color: #a9a9a9; /*文字色*/
}

/*CSSコードの説明*/をつけてコピペすると、コード内容が雑多にならないのでオススメ。

THE THORの画像下キャプションのデフォルト

テーマ側の機能やワンタッチで画像下のキャプションをデザイン変更できないのが惜しいところ。デフォルトでは、左端に黒文字でシンプルな感じに表示されます（下記画像）。

おしゃれな画像欲しいときに、「freepik（フリーピック）」のフリー素材とか使いますよね。

あいうえおLIFE

無料でも「キャプション」を入れる必要性が多いので、THORデフォルトだと少しデザイン性に欠けます。

SWELLとアフィンガー6の比較

• SWELL
• アフィンガー6

デフォルトで青色のリンクっぽく、中央に小文字でキャプションが表示されます。

本記事の追加CSS反映後のように、灰色で中央配置されたキャプション表示です。「HTMLコード」のリンク表示っぽくないので「主張感」は少なめデザイン。

「HTMLコード（ライセンス）」ってどこ？

freepikの場合、ダウンロード時に画面に出てくる（泣き顔などのキャラ表示時）コード（下記画像）です。

画面を閉じてしまった場合は、どうするの？

ダウンロードした画像のZIPファイルに含まれる「テキストファイル」の中に記載されています。

THORで追加CSSへコピペが嫌な場合

あいうえおLIFE

上記で悩む人はSWELLかアフィンガー6を選んでおけば、間違いないです。

追加CSSコピペ不要でデフォルトでキャプションが表示可能なオススメテーマです。なるべくコード入力したりを避けたい人にはピッタリで、ブロックエディタにも対応していて使いやすさも保証されます。もちろんTHORも「追加CSS」使って以降、愛着はさらに爆増。

まとめ | THE THORでキャプション表示はCSSでアフィンガー風に

今日はTHE THORの画像下のキャプションをおしゃれに配置したい人に向けて、下記を解説しました。

あいうえおLIFE

本記事を読み「THE THORの画像下キャプションを灰色中央表示する」CSSを追加することで、デフォルトの「左端に黒文字が質素な感じ」を解消できるということでしたね。

THE THORの画像下キャプションがアフィンガー風になることで愛着爆増間違いなし。追加CSSコピペ不要でキャプションがおしゃれに表示可能なテーマを使いたいのであればSWELLをオススメします。

SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】で話しましたのであわせてお読みください。

あわせて読みたい

SWELLのオススメ理由や評価を徹底レビュー【セルフバック不可】

今日は最後までお読みいただき、ありがとうございました！