WordPress全般

画像キャプションを再デザインしてみた

全般

画像に付け加えたキャプションが、下書きと公開記事では想像と違って見えたことはありませんか？

今回は、そんなWordPressの画像ブロックのキャプションを、少しカッコよくカスタマイズする方法を紹介していきます。

このカスタマイズはWordPress標準の構成を元に作成していますが、お使いのテーマによってはデザインの崩れが発生する可能性がありますのでご注意ください。

はじめに

このように、非常に簡素なデザインとなっているのがわかりますね。

その中でも、以下の点が目立ちます。

  1. 文字の大きさが段落の本文と殆ど同じ。
  2. 画像とキャプションの間隔が、段落同士の幅とあまり変わらない。

このため、記事を読んでいる人たちに対して若干不親切な印象を与えているといえます。

カスタマイズを行う前にするべきこと

WordPressのカスタマイズを行う際は、必ずバックアップを取るようにしてください。万が一の場合に備えてです。

なお、当サイトでは、WordPressのバックアップを取得する方法についても、解説を行っております。

「FileZilla」を使ってWordPressのバックアップを取る手順を解説
mycus-tom.com

バックアップを取る方法はいろいろありますが、自前でカスタマイズを行う場合は各種ファイルをサーバーから直で取得できるFTPソフトを使った方が便利ですので、ぜひ参考にしてください。

今回のカスタマイズの場合、WEBサイトの動作に問題が発生することはまずありえないのですが、デザインの崩れが発生する危険性がありますので、バックアップを推奨しています。

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

それでは、カスタマイズをおこなっていきましょう。

ここでは、CSSというものを使いますので、お使いのWordPressより子テーマの「style.css」の編集画面にアクセスしてください。

WordPressの管理者画面に入り、サイドバーの「外観」から「テーマエディター」をクリックしてください。

すると、上の画像のように「テーマの編集」画面を開くことができます。

そして、この画面より「スタイルシート(style.css)」を選び編集を行える状態にしておいてください。

スタイルシートを編集する時は、必ず子テーマを選ぶようにしましょう。

その理由は、親テーマのアップデートを受けないからです。通常、サポートが継続されているテーマでは、定期的にアップデートが行われるのが普通です（頻度はテーマによります）。このとき親テーマにカスタマイズを行っていた場合、その影響で上書き更新が行われてしまいますので、すべて最初からやり直しになってしまいます。

なおテーマの編集画面では、親テーマを選んでいた場合以下のような注意文が表示されますので、見分けることは簡単です。

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;
        }
}
/*ここまで*/

また、もう少し整えたものはこちらになります。

/*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;
        }
}
/*ここまで*/

先ほどのものと内容は変わりません。「:hover」など、エフェクトに関わる効果をまとめただけです。

CSSはプロパティが同じであれば、セレクターをまとめて表記することができます。

この程度のカスタマイズでは地味なように見えますが、大掛かりなものになるとコードの量を抑えることができ、結果としてWEBページの読み込み速度の向上などに繋がりますから、心掛けておくと良いですよ。

外観

さて、先ほどのCSSカスタマイズで画像のキャプションは以下のようになります。

まず、マウスのカーソルが画像にかかっていないとき。

半透明のキャプションが画像下部に被さって表示されます。

そして、マウスカーソルが画像の上にある時。

キャプションが非表示になり、画像を完全な形で見ることができます。

このように、キャプションを分かりやすい部分に配置することができ、また画像そのものを確認したいときはキャプションがフェイドアウトするようになりました。

これにより、素の状態よりもキャプションらしくなりました。

解説

それでは、今回のカスタマイズの解説を簡単に行っていきます。

ではまず、画像ブロックとキャプションの位置関係から。

画像ブロックのfigure要素を「position: relative」とし、相対位置に指定します。そして、キャプション自体を「position: absolute」として絶対位置に指定します。

こうすることでキャプションはその座標をfigure要素から参照するようになりました。

そして、キャプションに「bottom: 0;」を指定し、いついかなる時でもfigure要素の下部に表示されるようにします。

positionプロパティはその要素自体の配置を決定しますが、それは祖先や子孫にも影響を及ぼします。

relativeはabsoluteなどの祖先となり、そのabsoluteは一番近い祖先を探します。

どの要素にも祖先が無い場合はhtml要素、つまりWEBページを構成する全ての祖先の左上を参照します。

さて、これでキャプションが画像に覆いかぶさるようになったわけですが、ただ文字が表示されるだけだと画像の色によっては見づらくなります。

なので、「background-color」プロパティでキャプションに背景色を設定しましょう。このとき、色素の値をrgbaカラーで指定することでアルファチャンネルが有効になり、半透明な背景に設定することができます。

RGBカラーにおいては0が黒なので、R（= Red）・G（= Green）・B（= Blue）の三色を0に設定し、真っ黒にします。そして、A（= Alpha）を小数点以下にすることで、透明度の調整が可能です。このカスタマイズにおいて、私の場合は0.4に設定しました。

また、背景色が黒寄りの場合、文字色がそのままだと読みづらくなるため「color: #FFF;」を指定しましょう。これで可読性が向上します。

キャプションに背景を設定したのは良いですが、このままだとそれ自体の大きさがいびつになってしまいます。もっと言うと、要素の大きさがキャプション内の文字数を参照しているままなのです。

なので、キャプション要素に「width: 100%」を指定しましょう。これにより、文字数に関わらず要素は画像の左端から右端までカバーするようになります。これは、先のfigure要素にrelativeを指定したため、キャプション要素はそれを参照に100%の幅の長さの数値を取得できるというわけです。

また、下端に微妙に隙間があるため「margin-bottom」を用いて位置を修正することもおすすめします。これは、WordPressで最初から指定されているCSSによるものです。

最後に、カーソルを画像に合わせたらキャプションが消え、また外したらキャプションが出現する機能を作ります。

これには「:hover」という疑似要素を使用します。この疑似要素、CSSの表記法によって、まるでスイッチのように要素の作用を分けることもできます。

つまり、以下のような感じでです。

.hoge1:hover .hoge2 { opacity: 0; }

この例では、hoge1という要素にカーソルを載せると、hoge2が透明になります。つまり、hoge2を透明にしたいとき、それそのものに:hoverを指定するのではなく、別の要素を用いてそれを行うこともできるというわけです。

こうすることで、画像部分にカーソルを置いたときにフェードアウトし、またカーソルを外したらフェードインするキャプションを作ることができました。

以上が主な点になります。

他には、キャプション自体の内部の文字との間隔や文字の大きさを整えました。

また、WEBページを表示する画面のサイズが480px以下、つまりスマホ画面のときに少々レイアウトの崩れが発生しましたので、CSSの上書きにより調節しました。

CSSには「アットルール」と呼ばれるものがあります。

これはCSSの動作にルール付けを行うもので、これを設定するとWEBページがその条件に一致する場合では、必ずそのルールを優先して参照するようになります。ただし、その条件にそぐわない場合は参照しません。

このカスタマイズの場合は「max-width: 480px」、つまり画面の最大幅が480pxのときはこのルールを使うけど、481px以降の場合は使わないよ、ということになります。

これは、デバイス間で同じページを表示するレスポンシブ設計というが愛年において非常に便利であるため、近年のWEBサイトでは必ずと言っていいほど使用されています（それまではサブドメイン等を利用して、同じ内容をガラケー用ページとパソコン用ページといった別々のページに分けるのが普通だった）。

カスタマイズで心掛けたポイント

このカスタマイズで心掛けた点は、以下の3点です。

  1. キャプションが画像に重なること
  2. キャプションには背景色があること
  3. 画像だけの表示もできること

まず、1番目の理由は、そのキャプションが何を説明するものなのか、一目でパッと分かるようにしたかったからです。もちろん、デフォルトのデザインでもわからないことはないと思いますが、やはりそれが画像の説明を表すものだと気が付くのにちょっとの時間を要するような気がするからです。

そして、キャプションと画像を重ねるならば、キャプションには背景があった方が親切ですよね？そしてその文字も背景に対応して読みやすい色が付くと良い。これが2番目の理由です。

そして最後に、キャプションで隠れている部分も見えた方が良いとの考えから、画像のみの表示も両立できるような機能を付け加えました。

以上が今回のカスタマイズのポイントになります。

最後に

以上がキャプションのカスタマイズになります。

様々なWordPressテーマに合う、シンプルなデザインになりました。

このままコピペして使っても良いですし、あなたが考えているカスタマイズの参考にしてくれても構いません。

それでは、また。

注意点として、このデザインは小さすぎる画像の場合、向かないかもしれません。