【WordPress】【Cocoon】画像にキャプションを重ねる方法

こんにちは。雷神久です。

今回は画像にキャプションを重ねる方法を簡単に紹介します。

まずは下記画像を御覧ください。

このように画像の左下に重ねるように表示することができるようになるCSS記述方法です。

注意事項として、このCSSを使うとキャプションの入力がビジュアルエディタで行う時に難しくなる場合があります。その場合は画像を一旦小さくしてキャプションを入力してから元の画像の大きさに戻すなどして工夫して下さい。

CSSの記述場所

WordPressの [外観] > [テーマエディター] を開き、「スタイルシート（style.css）」の中身を編集します。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

上記の文字のすぐ下に以下をコピペして下さい。

/*画像にキャプションを重ねる*/
figure {
	position: relative; /*図形やビデオを相対位置関係に指定する*/
	display: inline-block;
}
	figure img {
		vertical-align: top; /*画像の範囲をどこからにするか指定している*/
	}
	figure figcaption {
		position: absolute; /*キャプションを絶対位置として指定できるようにする*/
		right: 0; /*キャプション表示位置を指定する*/
		bottom: 0;
		color: #fff; /*文字の色*/
		background: #777; /*バックグラウンドの色*/
	}

簡単に解説

figure というのは画像や表、動画を構成する要素で、「position（位置）」「ralative（相対位置）」「absolute（絶対位置）」を使って画像を相対位置関係に指定し、キャプションを絶対位置で指定してどこに表示させるかを決めます。

雷神がお勧めするCSSの教本

リンク