【SWELL】画像キャプションの位置を画像の上に重ねる

2025年3月1日

当サイトでも使用しているWordPressテーマ「SWELL」の画像キャプションの位置を変更する方法です。

画像にキャプションを追加

画像ブロック＞キャプションを追加

追加CSSクラスを追加

画像＞高度な設定＞追加CSSクラス＞任意のクラス名追加

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

.wp-image {
	position: relative;
	width:300px; /*画像サイズ*/
	margin: 0 auto; /*画像位置センター*/
}

.wp-image figcaption {
	position: absolute;
	top: 0px; /*上からの位置*/
	right: 0px; /*右からの位置*/
	margin: 5px !important; /*上下左右余白*/
	padding: 3px 5px; /*上下左右余白*/
	background:#af0000; /*背景色*/
	color: #ffffff !important; /*文字色*/
	font-size: 14px !important; /*文字サイズ*/
	font-weight: bold !important; /*文字太さ*/
}

以上でWordPressテーマ「SWELL」の画像キャプションの位置変更方法となります。

動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari