wordpressの画像情報解説!またキャプション表示を調整する

wordpress-imagecaption

画像のキャプションって何だろう?

wordpressでは画像に”タイトル“,”代替テキスト“,”キャプション“,”説明“の4つの情報を入力する事ができる。

wordpressの画像のキャプション表示の調整をする

しかし、いきなり”タイトル”,”代替テキスト”,”キャプション”,”説明”と言われても分からないと思う。

1つずつ説明していく。

画像情報の解説

  • タイトル“とはhtmlでいうところの”title属性“だ。どんな画像なのか?という事を説明する情報と考えて欲しい。さらに”ツールチップ“としての役割も持っている。ツールチップとは画像の上にマウスポインタを合わせた時に表示される情報のことだ。
  • 代替テキスト“とは画像が見れない場合に代わりに表示される情報だ。htmlでいうところの”alt属性“だ。ブラウザの仕様などによって画像が表示されない場合は、代わりにalt属性に記入した情報が表示される。検索エンジンのクローラーが画像を認識するための情報でもあるのでSEO対策のためにも正しく画像の内容を表すキーワードを入力しておこう。
  • キャプション“とはwordpress独自の属性だ。入力することで、自動的に画像の下にキャプション情報が表示される。空白でも構わない。空白の場合は画像の下にキャプション情報は表示されない。
  • 説明“は画像の説明だ。サイトには表示されないのでメモ代わりと考えてよい。SEOにも影響しないので、多くの場合は入力の必要は無い。

これで”タイトル”,”代替テキスト”,”キャプション”,”説明”、4つの情報について理解できた、と思う。

この4つの情報の内、キャプションだが、キャプションに入力した情報は自動的に画像の下に表示される。

wordpressの画像のキャプション表示の調整をする

こんな感じだ。

しかし少し見づらい。もう少し見やすく調整しようと思う。

画像のキャプション表示の調整をする

画像のキャプションを調整するにはstyle.cssを使用する。style.cssの下部に次のコードを追加しよう。

/* 画像のキャプションの調整 */
.wp-caption .wp-caption-text {
    font-size: 17px;
    font-size: 1.214285714rem;
    color: #000000;
}

どのような表示になっただろうか?

wordpressの画像のキャプション表示の調整をする

先ほどよりキャプションが見やすくなった。

これで画像のキャプションの調整が完了した!