副業・ブログ

【WordPress】画像の説明文(キャプション)をカスタマイズ! 追加CSS導入で1分で完了!!

画像の説明文(キャプション) をカスタマイズ_アイキャッチ

 この記事がおすすめな人 
  • 画像の説明文(キャプション)について知りたい人
  • ブログの記事を見やすくしたい人
  • 画像の説明文(キャプション)を自分の好みにカスタマイズしたい人

WordPressで記事を作成するに際に、画像に説明文を追加する時があると思います。

この部分のことを『キャプション』といいます。(下記画像参照)

画像や図が何を示しているかを表す際に、役に立つ説明文です。

ただ、このキャプションですがWordpressのデフォルト設定だと以下の通りに表示されてしまいます。

画面の左端に寄っていて、画像との隙間も文字も大きいです。

嫁さま

なんかイケてないね…

りりまん

そうなんだよ!
これをもっとスマートな表示方法に変えるよ!

今回は、このキャプションの表示方法について、自分好みにカスタマイズする方法をご紹介します。

具体的には、以下の5つの項目を変更できるようになります。

  1. 文字の揃え方
  2. 文字色
  3. 文字サイズ
  4. 画像との間隔
  5. 次の文章・装飾・画像との距離

では、どうぞ!!

  • 兵庫県在住 28歳
  • サラリーマン歴10年目
  • 総資産1400万円
  • ブログ運営(8カ月目)
  • Twitterフォロワー2600名
ブログ運用者
りりまん

運営者プロフィール・Twitter(@ririmannonline

追加CSSでキャプションのカスタマイズ

設定方法は簡単です。

以下のコードを『追加CSS』に入力するだけです。

/*キャプション位置変更*/
.wp-block-image figcaption {
  text-align: center;
	color: #808080;
  font-size: 12px;
  margin-top: -1.9em;
  padding-bottom: 10px;
}

3~7行目の以下の項目を変更することで、さらに自分の好みにカスタマイズできます。

  1. 文字の揃え方(3行目)
  2. 文字色(4行目)
  3. 文字サイズ(5行目)
  4. 画像との間隔(6行目)
  5. 次の文章・装飾・画像との距離(7行目)

1つずつ説明していきます。

追加CSSへ入力する前にバックアップは確実にとっておきましょう!!

文字の揃え方

先に紹介したコードの3行目に記載しているコードの『center』の部分を変えると、キャプションの文字の揃え方を変更することができます。

centerの部分を『right』とすると右にキャプションが寄った表記になります。

  text-align: right;

その逆で『left』にすると左に寄ります。

  text-align: left;

りりまん

個人的には中央揃えでいいと思うな~

文字色

文字色も変更することができます。

こちらの方法も至って簡単。

下記コードの『#808080』の部分を好みの色に変更すればOKです。

color: #808080;

あまり色付きは見たことがないので、黒や灰色が一般的かと思います。

文字サイズ

文字サイズも変更可能です。

基本的には本文より少し小さめが良いのではないかと思います。

筆者の場合、本文のサイズが「16px」なので、キャプションは「12px」にしています。

 font-size: 12px;

画像との間隔

画像との間隔を変更できます。

少し分かりにくいと思いますので、以下の画像を確認ください。

デフォルト設定のキャプション位置を「0」とした時に、画像に近づく方向を「-(マイナス)」、遠ざかる方向を「+(プラス)」で調整できます。

先にご紹介したコードは「-1.9」で設定していますので、程よい感じにはなっていると思います。

お好みで変更してみてください。

  margin-top: -1.9em;

次の文章・装飾・画像との距離

キャプションの下から次の画像(文章、装飾)までの距離を変更できます。

距離をもう少し狭めたい・拡げたいと思う方は変更してみてください。

上記の画像は「10px」での間隔を示してます。

  padding-bottom: 10px;

まとめ:追加CSSを入力するだけ

画像の説明文(キャプション)の表示方法についてまとめます。

画像の説明文(キャプション)の表示を変更するには

  • 追加CSSを入力
/*キャプション位置変更*/
.wp-block-image figcaption {
  text-align: center;
	color: #808080;
  font-size: 12px;
  margin-top: -1.9em;
  padding-bottom: 10px;
}

カスタマイズできる5つの項目

  • 文字の揃え方
  • 文字色
  • 文字サイズ
  • 画像との間隔
  • 次の文章・装飾・画像との距離

いかがだったでしょうか。

とても簡単なので、細かい設定をしなければ1分(追加CSSを入力)で完了できると思います。

デフォルト設定の時点である程度見やすくしておいて欲しい、という思いはありますが、自分でカスタマイズできるのも1つの楽しみかも知れません。

今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見てみてください。

ブログのノウハウ_アイキャッチ
【完全保存版】ブログのノウハウを全て公開|初心者のためのブログ運営!! 2021年5月22日:初版発行2021年6月30日:記事追加(6記事追加)2021年7月31日:記事追加(6記事追加) 2021年8...

今後もちょっとした役に立つ情報等を発信していきますので、よろしくお願いします!

では、また!!

にほんブログ村 にほんブログ村へ

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA