WordPressの Gutenbergで選ぶブロックがどう表示されるか調べるうちに、各ブロックの表示が気になるので初期表示からスタイルを変更するまでを投稿しようと思う

本 投稿は インライン要素のインライン画像。

初期表示

修正ポイント

  1. 文章と画像が 1行 同じ行に表示されているが 画像が少し浮いている
※ 画像下部の 赤枠の部分 ※

注意事項

修正にあたり、今回使用するツールは以下を利用する

  • ブラウザ > Google Chrome
  • WordPress テーマ > Iconic One

HTMLのスタイル変更にあたり、子テーマを作成して行っている。子テーマを作成する手順は 下記のようなサイトを参考に。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存 […]

デザイン修正

HTMLを確認

Chrome(デベロッパーツール)を使って 表示箇所のHTMLとスタイルを確認する
# デベロッパーツールは ブラウザで F12 もしくは Ctrl+Shift+I で表示

デベロッパーツール(DevTools) の 左上 矢印ボタン(画像上 青字表示) 選択後、WEBの確認したい箇所(画像上 左画面の背景青表示) を選択
DevTools > 上段がHTML、下段がStyle 表示

インライン画像 HTML

<p>インライン画像は
  <img class="wp-image-NNN" style="width: 150px;"
    src="*url*/*file*.png" alt=""
    srcset="*url*/*file*.png 1049w,
      *url*/*file*-300x90.png 300w,
      *url*/*file*-768x231.png 768w,
      *url*/*file*-1024x308.png 1024w,
      *url*/*file*-660x199.png 660w"
    sizes="(max-width: 1049px) 100vw, 1049px">
な表示になる</p>
<p>インライン画像で
  <img class="wp-image-NNN" style="width: 150px;"
    src="*url*/*file*.png" alt=""
    srcset="*url*/*file*.png 1049w,
      *url*/*file*-300x90.png 300w,
      *url*/*file*-768x231.png 768w,
      *url*/*file*-1024x308.png 1024w,
      *url*/*file*-660x199.png 660w"
    sizes="(max-width: 1049px) 100vw, 1049px">
と画像を表示してから改行すると<br>
こんな表示になる</p>

WordPress、ブロックは <p />で括られていて、画像は<img />で表示されている

インライン画像 画像部 Style

右側の画面(margin:橙, border:黄, padding:緑, 本体:青) をみると 下部 margin:10px が指定されている

上記 HTML, Style から 今回の修正ポイント 画像下部の不要な余白は margin:10px が原因と思われる

Style変更

DevTools上で 直接Styleを変更し、気にいったStyleになるよう 修正する

DevTools Stylesの中で Styleの無効化
(画像上 訂正線で表示された margin-bottom: 10px; が無効化されている)
DevToolsで Styleを追加することも出来る
(画像上 margin-left: 5px; margin-right: 5px; を追加している)

Styleの適用

子テーマの style.css に 以下を追加する

.entry-content img[class*="wp-"] {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 0px;
}

結果

インライン画像はな表示になる

インライン画像でと画像を表示してから改行すると
こんな表示になる

補足

今回の投稿については 以下の紹介を省略している
先駆者たちがたくさん紹介しているサイトがあるので 各自確認されたし。

  • HTML : pタグ, imgタグ 等
  • HTML Style : class, margin 等
  • WordPress オリジナルstyle.css 追加/更新方法

ここまで書いておいて言うのもあれなんだけど、インライン画像 使わないかな..

CAPTCHA