WordPressのキャプションの位置をカスタマイズする方法

画像全てのキャプションの位置を変更する方法

最初に紹介するのは、画像に表示されているキャプションの位置を全て変更する方法です。

特定の画像のキャプションの位置を変更したい場合は、この後で説明する方法を使用してください。

この変更はCSSをカスタマイズして行います。

左寄せ

キャプション全てを左寄せにしたい場合は、次のCSSを追加してください。

.wp-caption p.wp-caption-text {
	text-align: left;
	margin-left: 20px; /* 左側の余白調整 */
}

右寄せ

キャプション全てを右寄せにしたい場合は、次のCSSを追加してください。

.wp-caption p.wp-caption-text {
	text-align: right;
	margin-right: 20px; /* 右側の余白調整 */
}

特定の画像のキャプションの位置をカスタマイズしたい場合

ここからは特定の画像のキャプションの位置をカスタマイズする方法を紹介します。

いくつか方法がありますが、初心者でも簡単にできる方法を紹介します。

この方法は以下の手順で行います。

1. テンプレートを記事に挿入
2. テンプレート内の「※画像を挿入」部分に画像を挿入する
3. テンプレート内の〇〇を画像に合わせた数値に変更する
4. テンプレート内の「※キャプション」を表示したいキャプションに変更する

テンプレートの挿入はAddQuickTagというプラグインを使うと簡単にできます。

実際に行うと次のようになります。

<div class="wp-caption alignnone" style="width: 240px;">
<div><img src="https://example.com/wp-content/uploads/2018/04/fox.png" alt="" width="300" height="300" class="alignnone size-full wp-image-65" /></div>
<p class="wp-caption-text" style="text-align:left; margin-left:20px;">狐</p>
</div>

テンプレートを紹介していきます。位置に合わせたテンプレートを使用してください。

左寄せと右寄せの場合は、テンプレート内にあるmargin-leftおよびmargin-rightに設定してある数値で位置の調整が可能です。

左寄せ

<div class="wp-caption alignnone" style="width:〇〇px;">
<div>※画像を挿入</div>
<p class="wp-caption-text" style="text-align:left; margin-left:20px;">※キャプション</p>
</div>

右寄せ

<div class="wp-caption alignnone" style="width:〇〇px;">
<div>※画像を挿入</div>
<p class="wp-caption-text" style="text-align:right; margin-right:20px;">※キャプション</p>
</div>

上・左寄せ

<div class="wp-caption alignnone" style="width:〇〇px;">
<p class="wp-caption-text" style="text-align:left; margin-left:20px;>※キャプション</p>
<div>※画像を挿入</div>
</div>

上・中央

<div class="wp-caption alignnone" style="width:〇〇px;">
<p class="wp-caption-text">※キャプション</p>
<div>※画像を挿入</div>
</div>

上にキャプション（右寄せ）

<div class="wp-caption alignnone" style="width:〇〇px;">
<p class="wp-caption-text" style="text-align:right; margin-right:20px;>※キャプション</p>
<div>※画像を挿入</div>
</div>

まとめ

特定の画像のキャプションの位置を変更するには、ちょっと手間がかかりますのでプラグインを使用するのがおすすめです。

また、画像につけるalt属性はSEOに効果があるので忘れずにつけるようにしましょう。