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

画像に説明を入れるキャプションって簡単ですごい便利ですよね。

でもキャプションの位置を変えたいことってあるはずです。しかし、画像をそのまま挿入するとキャプションは自動的に入ってしまいます。

そのためどうやって位置を変えたらいいか悩む方も多いでしょう。

この記事では、簡単にお好みの位置にキャプションを入れる方法を紹介します。

例えば、左寄せや右寄せ。

そしてキャプションを上の位置につけることもできます。

※注：テーマによっては、独自のキャプションデザインを採用しているためきれいに表示されない場合があります。

キャプションの設定方法を確認する

この記事の目次

画像全てのキャプションの位置を変更する方法
- 左寄せ
- 右寄せ
特定の画像のキャプションの位置をカスタマイズする方法
まとめ

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

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

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

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

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; /* 右側の余白調整 */
}

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

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

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

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

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

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

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>