WordPress 画像のキャプションスタイルを変更する

WordPressで画像のキャプションスタイルを変更したい場合は、単純なCSSを使用して可能です。 ブロックエディタを使用しているときに画像キャプションスタイルを変更する方法を見てみましょう。 テーマに関係なく、基本エディタであるブロックエディタを使用する場合に適用可能です。

[この記事は2022年5月24日に最終更新されました。 ]

WordPress 画像キャプションスタイルを変更する(+ブロックエディタ)

デフォルトエディタであるブロックエディタを使用している場合は、画像を挿入して画像の下に直接キャプション(説明)を入力できます。 また、次の簡単なCSSコードで画像のキャプションスタイルを変更できます。

/* 이미지 캡션 스타일 변경하기 */
/* How to change the image caption style in WordPress including GeneratePress and Astra themes */

.wp-block-image figcaption {
    background-color: #1e1e1e;
    color: #f5f5f5;
    padding: 5px;
    margin-top: 0px;
	text-align:center;
}

上記のコードを ルックス>ユーザー定義>追加CSSに追加するだけです。

これにより、次のように画像キャプションスタイルが変わります。

WordPress 画像のキャプションスタイルを変更する
画像キャプションスタイルが変更されました。

GeneratePress テーマアストラテーマ、そしてHelloテーマ(エレメンページビルダーと一緒によく使われるテーマ)でテストしてみるとうまくいきました。 他のテーマでも基本エディタ(Gutenberg)を使用して文章を書くと、問題なく動作します。 うまくいかない場合は、以下のコメントで対応する投稿URLとテーマ名を教えてください。

背景色、テキストカラー、余白などは適切に変更してください。 基本的なCSSを知れば、難しくないように好きなようにスタイルを変えることができるでしょう。 基本的なCSSの内容は簡単に学ぶことができ、時間もそれほどかかりません。

クラシックエディタで画像キャプションを変更する

WordPressで記事に画像を挿入するときや、画像を挿入した後、キャプション(図の説明)を追加することができます。 例えば、記事に画像を挿入した後、キャプションを追加するには、画像をマウスでクリックした後に、編集アイコン(鉛筆)をクリックします。

WordPress - 画像のキャプションを追加する

次に表示されるポップアップ画面で、キャプションを追加します。

Add Caption in WordPress

設定を保存(更新)するキャプションが図に追加されます。

キャプションの形は、使用する WordPress テーマごとに異なります。 キャプションが中央に配置されていない場合は、次のコードをスタイルシートファイルに追加すると、中央に配置されます。

.post p.wp-caption-text { text-align:center; } .aligncenter {text-align:center; margin:0 auto; }

WordPress 画像のキャプションの外観をCSSを使用して変更することができます。 たとえば、 CSSを使用すると:

.wp-caption { border: 1px solid #ddd; /* Border 設定 */ text-align: center; background-color: #f3f3f3; / * キャプションの背景色 */ padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius:3px; -webkit-border-radius: 3px; border-radius:3px; } .wp-caption img { margin:0; padding:0; border:0 none; } .wp-caption p.wp-caption-text { font-size: 11px; / *文字サイズ* / line-height:17px; /* 線高設定 */ padding: 0 4px 5px; margin:0; } // Source: designm

図を中央配置する .aligncenter 要素が追加されます。 上記のCSSを適用してみるとテーマに沿って 図は中央整列できない場合があります。 この場合、次のコードを追加すると、問題が解決することができます。

/* WordPress 画像の中央揃え* / .aligncenter、img.aligncenter { clear:both; display: block; margin-left: auto; margin-right: auto; }

上記のCSSコードを適用すると、次のような形に画像のキャプションが表示されます。

Customize Image Caption in WordPress

テーマに沿って、上記のCSSコードが適用されない場合があります。

メモ:


7のコメント

  1. / *キャプション* /
    .wp-caption p.wp-caption-text {
    font-size:1.2em;

    パディング:4px 5px。
    マージン:0。
    フォントスタイル:イタリック;
    }
    このようにしたが、よくアンドゥェソヨ。

    1. こんにちは?

      次のコードでテストしてみてください?

      .wp-caption .wp-caption-text {
      font-size: 0.8em !important;
      font-style: italic !important;
      }

      1. キャッシュプラグインがインストールされている場合は、キャッシュを削除してみていただけますか? ブラウザのキャッシュも削除してみシゴヨ。

      2. 言葉通り、キャッシュの問題でした。 ブログのキャッシュのみ消去されるのではないかとします。
        ブラウザのキャッシュはまだ取りまとめるなかったが、家に持って行ったらいつの間にさジョトね。
        無知というのは大変です。

      3. 問題がうまく解決されてよかったですね…最初から知っている人はどこですか? 試行錯誤を受けながら一つずつ学びます。
        楽しい週末と休日になってください^^

コメントを残す

*メールアドレスは公開されません。