モバイルの画像の余白を無くしてみた【WordPress Cocoon】

旅行と食べ歩きブログは、モバイルのみ画像の左右の余白をなくしました。

こちらの記事を参考にさせていただきました。

「外観→テーマエディタ→Cocoon Child: javascript.js」にコードを追記して「ファイルを更新」

$(function() {
$('.post').find('img[src$=".jpg"],
[src$=".jpeg"],
[src$=".webp"],
[src$=".png"]').parents('p').addClass('max-img');
});

次に、「外観→テーマエディタ→Cocoon Child: スタイルシート (style.css)」にコードを追記。

@media screen and (max-width:480px){
.post p:not(.max-img) {
margin-left:15px;
margin-right:15px;}
}

次に、本文の左右を CSS で調整。

@media screen and (max-width:480px){
main.main {padding:0px;}
}

※数値はお使いのテーマやスキンによって異なりますので調整してください

これで当サイトの環境では画像の余白が無くなりました。

次に、余白を無くしたことにより生じたズレた部分を直します。
当サイトは見出し・リストタグ（liなど）・引用タグ（blockquote）を CSS で調整しました。

どうしても上手く調整できない場合は、画像 img タグを <div class="image"> で囲むと良い場合もあります。