【WordPress】画像のキャプションのカスタマイズ

記事に画像を載せてキャプションを追加しようと思ったとき、思った感じとは違って何とも言えない気分になったことはないだろうか。

今回は、そんなキャプションの見栄えを良くしてみた。WordPressそのもののブロックを利用するため、テーマにもとらわれないカスタマイズになった。

私が現在使用しているテーマはCocoonであるため、これを基準にカスタマイズしている。今回紹介するカスタマイズはWordPress標準のものをCSSコードで弄っているので互換性はあるはずだが注意しておいてほしい。

WordPressの標準キャプションの問題点
キャプションのカスタマイズの一例
- カスタマイズのポイント
- カスタマイズ例
最後に

WordPressの標準キャプションの問題点

さて、上の画像はWordPressの画像ブロックにそのままキャプションを付けたものを撮影したのだが、見ればわかるようにこの通り非常に素っ気ないものになっている。

そして、画像とキャプションが微妙に離れていて、なおかつキャプションの文字が本文の文字とほぼ変わらないため、画像の下の文字が上の画像を説明するものなのか、それとも本文なのかもわかりづらい。これではキャプションがキャプションの意味を成さないので閲覧者にとっても不親切であるし、もちろん執筆した本人にも後々記事の整備性などに問題が出てくるだろう。

なので、執筆者にも閲覧者にも見やすいかたちにしておいたほうがいいのだ。

キャプションのカスタマイズの一例

それでは、キャプションのカスタマイズを説明していく。キャプションの位置と文字の大きさなどをCSSで再設定し、見やすくカスタマイズする。

カスタマイズのポイント

私は、今回キャプションをカスタマイズするにあたって以下の3点を心掛けた。見やすいキャプションに必要な要素だと感じるからだ。

キャプションが画像と重なる
キャプションに背景がある
画像にカーソルを合わせたときはキャプションが消える

それではなぜこの3点を重視したのか説明したい。

まず、画像とキャプションが離れていると、そのキャプションは画像を説明するものなのか本文なのかわかりづらいということだ。実際WordPress標準のキャプションはそのせいで認識しづらい。しかもキャプションと本文の文字のサイズが同じというのもややこしさに拍車をかけている。

そして、そのまま黒い文字が画像に被さるだけではキャプションが見づらいので背景を付ける。その際の背景は下の画像を透かすようにしたい。映画の黒帯でもないので、画像そのものをすべて邪魔したくない。

そして、キャプションが画像に張り付いたままだとうっとおしい。画像そのものを見たいときはキャプションが一時的に消えてくれた方がよいだろう。画像の下部にも何か重要な情報がある場合、その部分がわかりづらいのは閲覧者に不親切だからだ。

というわけで、私はこの3点を重視した。

カスタマイズ例

それでは、下記にCSSコードを記すので、それをstyle.cssにコピペしてほしい。

style.cssの場所は、WordPressのダッシュボードの「外観」から「テーマエディター」を選ぶと、右端の「テーマファイル」の中に「スタイルシート（style.css）」があるので、それを選ぼう。

スタイルシートを編集するときは必ず子テーマを選ぼう。さもなければテーマのアップデートが来るたびに、自分のカスタマイズが上書きされて無くなってしまう。もし親テーマを選んでいる場合は、ダイアログで下のように注意書きが表示されるので見分けることは簡単だ。

CSSコード

/*WordPressの画像ブロックと画像のキャプションのカスタマイズ（全体）*/
/*ここから*/
.wp-block-image figure {
    position: relative;
}

.cf .wp-block-image figcaption {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    padding: 2px 16px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 16px;
    transition: 1s all;
}

.wp-block-image figure:hover figcaption {
    opacity: 0;
    transition: 1s all;
}

@media screen and (max-width: 480px) {
	.cf .wp-block-image figcaption {
            font-size: 10px;
            margin-bottom: 8px;
        }
}
/*ここまで*/

また、もうちょっとだけ整えたコードはこうなる。:hoverなどに関わるエフェクトをひとつにまとめてすっきりさせただけである。

/*WordPressの画像ブロックと画像のキャプションのカスタマイズ（全体）*/
/*ここから*/
.wp-block-image figure {
    position: relative;
}

.cf .wp-block-image figcaption {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    padding: 2px 16px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 16px;
}

.wp-block-image figure:hover figcaption {
    opacity: 0;
}

.cf .wp-block-image figcaption, .wp-block-image figure:hover figcaption {
    transition: 1s all;
}

@media screen and (max-width: 480px) {
	.cf .wp-block-image figcaption {
            font-size: 10px;
            margin-bottom: 8px;
        }
}
/*ここまで*/

外観

上記のCSSコードを記入することで、画像のキャプションはこのようになる。

マウスカーソルが画像の外にあるときは、このようにキャプションが画像の上に重なるように常時される。

そして、このようにマウスカーソルを画像の上にのせているときは、キャプションが消えて画像全体が表示される。

解説

それでは、解説を行っていきたい。

まずは、画像ブロックの一つ内側の要素を相対位置（relative）に指定しておく。そうしておかないと、キャプションを絶対位置にした際に投稿記事左上まで飛んで行ってしまうからだ。

そして次に、キャプションを画像ブロックの一つ内側の相対位置の絶対位置（absolute）に指定して、bottom:0;で位置を画像の下部に固定する。

そして、キャプションの背景は下の画像を透かせたいため、rgbaを使って色を指定し、alphaチャンネルを0.4に設定することで透過しつつも見やすさを両立させた。その際、このままではWordPressのもともとのmargin-bottomの設定のせいで画像の底辺とキャプション背景の底辺に少し空間が出来てしまうため、それをpx単位で設定しなおすことでぴったりと合わせた。

また、widthを100%にすることで背景を画像の端から端まで広げる。あとはpaddingを適当に指定することで文字と縁に余裕を持たせてなるべく窮屈さをなくした。そして、私はテーマ側で本文の文字サイズを18pxに指定しているので、キャプションの文字を16pxに設定しなおし、キャプションと本文の文字が同じという違和感をなくした。また、文字の色が#333のままでは背景と同化して見づらく不親切なので、文字の色を#fffに変えて白色にすることで見やすくした。

最後に、画像にマウスカーソルを合わせた際、キャプションが徐々に透明になって消えるようなエフェクトを施した。「上の要素:hover 下の要素」とすることで、上の要素の:hoverで下の要素だけがその影響を受ける仕組みを使用した。

そして、一番下の@media screen and～のところは、スマートフォンの画面サイズでキャプションを確認したとき、キャプションの文字が本文よりも大きく違和感があったので、画面の幅が480px以下の場合は10pxになるように再設定した。スマートフォンの画面はそんなに使用者の目と距離がある場面で使うことはないので、文字は小さくてもよいだろうと判断したからだ。あとはmargin-bottomの部分少しだけ直して隙間を埋めた。

これで解説は終わりである。