Cocoonのアイキャッチ画像を画面幅いっぱいに表示する【スマホ時のみ】

スマホ用カスタマイズコード

この世の全スマホでチェックはしておりませんが、大丈夫そうな気はしてます。上手くいかない場合はマージンの値を調整してみてください。

/*アイキャッチ全幅*/
.entry-header .eye-catch {
  margin-left: -1em;
  margin-right: -1em;
  max-width: none;
  width: auto;
}

あくまでもスマホ用コードですので、以下の様なスマホ向けのコード内に挿入してください。

@media screen and (max-width: 750px){
ul.menu-mobile {
/*ここにコードを挿入*/
}

メインカラム幅の調整コード

恐らくですが、前項のコードを適用しても左右に余白があると思います。2021年1月頃のCocoonのアップデートによりメインカラムの余白が変わった影響と思われます。

当サイトは以下のコードを追加して改善しましたが、メインカラムの幅自体が変わってしまいますので必要に応じてお試しください。

/*メインカラム幅も変わるのでご注意を*/
.content .main, .content .sidebar {
  padding: 13.6px;
}

また、この「13.6px」は意外とシビアな領域でしたので、余白が消えない場合は0.1px単位で調整が必要かもしれません。