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;
}

※もしかしたらCocoon設定の「カラム」で調整可能かも知れませんが未確認です

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

WordPressのアップデート後から？、サイトのコンテンツが左右にブレる・動いてしまう様になりました。

抜本的な解決策では無いかも知れませんが、paddingの値を14.6pxに上げたら改善。Search Console「コンテンツの幅が画面の幅を超えています」のエラーも改善しました。

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