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

Last Updated：2023年07月16日| | 17のコメント

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

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

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

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

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

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

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

WordPress 本文画像とテキストの間隔を調整する

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

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

ちなみに基本的なCSSはそれほど難しくなく、学ぶのに時間もあまりかかりません。 CSSについてよくわからない場合は、次の記事を参照してCSSを学んでください。 ライフコーディングなどの無料動画講義を利用し、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;
}

参照

17のコメント

コメント

  1. /*サムネイルとヨーグルの間の間隔*/

    .wp-post-image {
    margin-bottom：数値。
    }

    マイナス値も適用されますね。^^

    応答

  2. GeneratePress テーマの上部 - サムネイル、下部 - 概要のレイアウトの場合、サムネイルとサマリーの間隔も調整できますか？

    応答

  5. 最初の画像の下に目次が入る形式で文を作成していますが、もし本文画像と目次の間の間隔だけ増やすことができるのでしょうか？

    応答

  6. 先生こんにちは！ 最近ワープに入門した新賭けです。
    初めからこれまでずっと先生のブログを見ながら適用し、勉強しています。

    画像とテキストの間の隙間をあけるコードを貼り付けて適用してみたり、直接タイプして適用してみたりしましたが、どれは適用になり、またある文は適用にはなりません。 結局は適用がきちんとできないと見るのが正しいようです。

    使用しているテーマは Generatepress 有料版を使用しており、
    サイトは https://brocoly.co.kr 입니다。

    ありがとう！

    応答