• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressのキャプションの位置をカスタマイズする方法

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

最終更新日:2021年10月6日

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

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

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

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

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

キャプション左寄せ
キャプション下・中央
キャプション右寄せ

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

キャプション上・左寄せ
キャプション上・中央
キャプション上・右寄せ
注意
テーマによっては、独自のキャプションデザインを採用しているためきれいに表示されない場合があります。
キャプションの設定方法を確認する
目次 非表示
1 画像全てのキャプションの位置を変更する方法
1.1 左寄せ
1.2 右寄せ
2 特定の画像のキャプションの位置をカスタマイズしたい場合
2.1 左寄せ
2.2 右寄せ
2.3 上・左寄せ
2.4 上・中央
2.5 上にキャプション(右寄せ)
3 まとめ

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

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

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

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

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

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

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

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

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

テンプレートの挿入は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>

まとめ

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

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

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « ギャラリーを作成できるおすすめWordPressプラグイン【ポートフォリオ向け】
Next Post: ブログ・アフィリエイトにおすすめのWordPressテーマ【2021年版】 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.