【WordPress】Manablog Copyで画像ズレ問題と対応方法

web開発

マナブログコピーで画像がズレて困る

見出しの下の画像が微妙にズレて、見出しに重なってしまう場合があり困りました。
下図のように明らかに見出しに画像が食い込んでしまいました。

クラッシクエディタの「メディアを追加」からリンクなし画像を埋め込むと
マージントップが30oxではなく-10pxになりズレる。
ちなみにリンクあり画像はズレずに正常に表示される。
manablogをざっと見たところアイキャッチ画像以外はリンクあり画像ですね。
(画像をクリックすると画像だけのページに飛ぶアレです)

そもそも画像がズレる理由

① マナブログコピーがベースにしているBootstrapのCSSは画像に対して以下のスタイル設定をしている。

.single p a img, .single a a img, .single p img {
width: auto;
max-width: 100%;
margin-bottom: 30px;
margin-top: 30px;
border: 1px solid #d8d8d8;
}

② マナブログコピーでは以下のスタイルを設定している。

.single > img:not(.img-responsive) {
width: auto;
max-width: 87.5%;
margin-top: -10px;
margin-bottom: 30px;
border: 1px solid #d8d8d8;
}

margin-top: -10px; に設定されてますね。

③ worpressのクラッシクエディタでリンクなし画像を埋め込むとimgタグが生成される。
<img src= ・・・・>タグが自動生成される。

④ 上記③のimgタグはそのままでは①のBootstrapの条件に該当しない。
上位にaタグかpタグが必要なのに無いため。
②のスタイルが適応されるので、margin-top: -10px;となり、見出しに画像が食い込んでズレる。

 wordpressはHTML生成時に自動でpタグを追加したり、ソースに手書きで追加したpタグを自動的に削除したりしてるから必ず条件を満たさないとは言い切れない。
» 参考:WordPressでpタグやbrタグが消える現象を解決する

⑤ worpressのクラッシクエディタでリンク「あり」画像を埋め込むと①の条件を満たすのでズレない。
<a href=""><img src=タグが生成される。
このソースからWordPressはpタグをaタグの前に自動生成するので①の条件を満たす。

対応方法

画像の親要素にpタグが無いからズレるなら、pタグを手動で入れてやれば良い。

「メディアを追加」(リンクなし画像)した時に自動生成されるソース

<img src="">

これを下記のように強制的にpタグで囲んでやる

<p style="">
<img src="">
</p>

style="" は何もスタイル指定していないが重要
これを削除すると意味の無いpタグとみなされ、WordPressがHTML生成時に
pタグを自動的に削除してしまう。

WordPressプラグインのAddQuicktagで<p style="">を追加してやると良い感じです。

以下検証用のソースと検証結果


<h2 class="nmb">1 pタグが無いのでズレる</h2>
<img class="alignnone size-full wp-image-113" src="http://betterlife-blog.com/wp-content/uploads/2020/08/test.jpg" alt="" width="1200" height="845" />

1 pタグが無いのでズレる



<h2 class="nmb">2 無意味なpタグとみなされ自動削除されズレる</h2>
<p>
  <img class="alignnone size-full wp-image-113" src="http://betterlife-blog.com/wp-content/uploads/2020/08/test.jpg" alt="" width="1200" height="845" />
</p>

2 無意味なpタグとみなされ自動削除されズレる



<h2 class="nmb">3 回避方法:pタグが有効になりキレイ</h2>
<p style="">
  <img class="alignnone size-full wp-image-113" src="http://betterlife-blog.com/wp-content/uploads/2020/08/test.jpg" alt="" width="1200" height="845" />
</p>

3 回避方法:pタグが有効になりキレイ



<h2 class="nmb">4 画像のリンク先ありだと何もしなくてもキレイ</h2>
<a href="http://betterlife-blog.com/wp-content/uploads/2020/08/test.jpg"><img class="alignnone size-full wp-image-113" src="http://betterlife-blog.com/wp-content/uploads/2020/08/test.jpg" alt="" width="1200" height="845" /></a>

4 画像のリンク先ありだと何もしなくてもキレイ


終わりに

少しでもお役に立てたら幸いです。