WordPress 本文画像とテキストの間隔を増やす

WordPressが更新されると、ブロックエディタで作成された文に挿入された画像とテキスト間隔が狭すぎる現象が現れるバグが報告されています。 本文画像とテキスト間の間隔は簡単なCSSで調整が可能です。

WordPress 本文画像とテキストの間隔を増やす

WordPress 本文では、画像の下の間隔が狭すぎるため、画像の下の段落やタイトルなどの要素に近すぎる場合があります。 この場合、 CSS コードを使用して画像の下に余白を追加できます。

/* 본문 이미지와 텍스트 사이 간격 */
/* Margin between images and text in WordPress single posts */

.single .wp-block-image {
    margin-bottom: 25px;
}

上記のコードを WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加できます。 （数値を適切に調整して適切な余白を適用するようにします。）

上記のCSSコードをコピーして貼り付けても画像の下の間隔が増えない場合は、貼り付ける代わりに上記のコードを ダイレクトタイピングを入力して問題が解決する見てください。

この問題が人気ニュース、マガジンのテーマ Newspaper(Newspaper)に表示されています。 他のテーマでも、このような現象が現れることがあります。 このブログにインストールされている GeneratePress テーマの場合、ほとんどのサイトでこの現象が現れていませんが、一部の記事でこのような現象が目撃されることもありますね。

画像ブロックの下にギャップが狭すぎる場合は上記のコードでテストし、うまく機能しない場合は、以下のコメントで使用しているテーマとそのサイトのURLを残してください。正確なコードを確認します。

ちなみに基本的なCSSはそれほど難しくなく、学ぶのに時間もあまりかかりません。 CSSについてよくわからない場合は、次の記事を参照してCSSを学んでください。 ライフコーディングなどの無料動画講義を利用し、CSS関連書籍を購入し、リファレンスとして活用できます。

• WordPressにCSSを適用する方法[基本]

ボディ画像の中央揃え

参考までにブロックエディタ（Gutenberg）で書かれた記事で、すべての本文画像を中央揃え（中央揃え）したい場合は、次のCSSコードを使用できます。

/* 모든 본문 이미지 가운데 정렬하기 */
/* Center align all images in WordPress */

.single .wp-block-image img {
display: block;
margin: 0 auto;
}

- または -

.single .wp-block-image {
text-align: center;
}

同様に、カスタマイズの下の追加のCSSセクションに上記のコードを入力してください。

画像にシェーディングを適用する

このブログのように、ボディイメージにシェーディング効果（シャドウ効果）を適用したい場合は、次のコードを適切に適用できます。

/* WordPress 본문 이미지에 음영 효과 적용하기 */
/* Apply box shadow effect on images in WordPress single posts */

.single .entry-content img {
    box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
}

参照

• WordPress Newspaper テーマデモをインストールする
• WordPress Diviテーマポケレストランレイアウトパック無料ダウンロード
• シンプルな引用句レイアウトCSS（+GeneratePress テーマ）