SWELLテーマのガチレビューはこちら記事を読む

【THORのCSS】画像下キャプションを灰色小文字センター配置【アフィンガー風】

sponsored link

悩む人

WordPressテーマで、THOR使ってるけど、画像の下中央にキャプション入れたい。

できれば、灰色で小文字で配置してほしいな。

デフォルトでは、左端に黒文字って質素な感じなんだよね、、

あいうえおLIFE

こんにちは!

今日は、上記のお悩みを解決します。

僕もWordPressテーマ『THOR』使いながら、同様に不満に思った点ではありました。

本記事のメリット

本記事を読むことで、THORユーザーが「CSS」で簡単に、「画像下に灰色小文字でキャプション表示」することが可能。

特化ブログ「人生を変えた映画・アニメBlog」でテーマ『THOR』使ってたので、解決済みの内容になります。

くろーむ

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

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

もくじ

THORの画像下のキャプションは地味

THORキャプション地味
Poster vector created by macrovector - www.freepik.com

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

あいうえおLIFE

無料でも、「キャプション」を入れる必要性が多いです。

THORだと、現状、左端に黒文字でシンプルな感じに表示(下記画像)。

THOR現状
THORのキャプション現状

デメリット

機能や、ワンタッチで画像下のキャプションをデザイン変更できない。

他のテーマはどうなの?

下記の2つのテーマを使用するぼくが紹介します。

  • アフィンガー6
  • SWELL

アフィンガー6

デフォルトで、画像追加する際に、「キャプション」に指定された「HTMLコード」入れるたら下記のデザイン。

灰色で中央配置でキャプション表示されます(記事後半で解説)。

SWELL

デフォルトで、中央表示(小文字)されます(記事後半で解説)。

あいうえおLIFE

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

くろーむ

気にならないレベルだけどね(主観)。

画像にキャプション入れるやり方

キャプションの入れ方
People vector created by freepik - www.freepik.com

そもそも、「画像にキャプション入れるってどうやるんだ?」って言う人向けに確認。

記事編集画面(ブロックエディタ)の場合

STEP
プラスボタン押して、画像ブロックを選択
画像1
STEP
すでに、アップロードしている場合、「メディアライブラリ」を選択
画像2
STEP
キャプションの部分に、必要な「HTMLコード(ライセンス)」をコピペ
<a href='https://www.freepik.com/vectors/people'>People vector created by freepik - www.freepik.com</a>
あいうえおLIFE

上記のライセンスコードは例でして、今の見出しの下の画像のライセンスのキャプションコード(HTML)です。

「HTMLコード(ライセンス)」ってどこ?

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

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

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

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

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

すでに解説した内容なので、割愛。

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

THOR画像下にキャプションCSS
Designed by stories / Freepik

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

STEP
WordPress管理画面→外観→カスタマイズ→追加CSS
あいうえおLIFE

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

STEP
下記コードをコピペ
/*画像下キャプションセンター灰色*/
.wp-caption-text {
text-align: center;
font-size: small;
color: #a9a9a9;
}

注意点

追加CSSにコードをコピペする際は、バックアップ推奨。

  • プラグインであれば、BACKWPUP(やり方は、バズ部さんの記事が参考になります)
  • FTPソフトで、修正できる準備は最低限整えましょう
  • サーバー側で、データファイルを戻すこともできます(当サイトはエックスサーバー使用)

THORで追加CSSコピペしたりが嫌な場合

  • もしも、ミスったりしたらどうしよう
  • サイトが壊れるの嫌だ
  • 100%確実な状態で、画像下にキャプションを灰色中央小文字表示したい
あいうえおLIFE

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

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

SWELLキャプション

青色のリンクっぽくキャプション表示されます。

なるべくコード入力したりを避けたい人には、ピッタリのブロックエディタ対応テーマの2つ。

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

くろーむ

もちろん、THORも「追加CSS」使って以降、愛着がさらに増してたよね。

SWELLが気になる方は、当サイトでレビュー記事を書きましたので、ぜひ下記を読んでくださいね。

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

もくじ
閉じる