Googleアドセンスに高確率で合格する方法を公開中

【Cocoon】アイキャッチ画像を横幅いっぱいに表示「1分で解決」

アイキャッチ画像を画面幅いっぱいに表示させたい!

てことで、今回はアイキャッチ画像のカスタマイズです。

通常、左右に余白が出来ますが、それを無くしちまおう作戦。

イメージとしては、「マナブログ」さんを想像して頂けると分かりやすいかと思います。

注意点

スマホ表示でしか機能しません。PCでは余白ありで表示されます。

コピペで出来るので、早速行きましょう!

アイキャッチ画像を幅いっぱいに表示させる

以下のコードを「テーマエディタ」の「style.css」にコピー&ペースト(貼り付け)してください。

/*480px以下アイキャッチ画像の幅を無くすCSS*/
@media screen and (max-width: 480px){
  .entry-header .eye-catch {
    margin-left: -1em;
    margin-right: -1em;
    max-width: none;
    width: auto;
  }
} 

以上。

楽ちん。

「もっとカスタマイズしたい!」 という方は、他にもカスタマイズを紹介しているのでご参考に。

コメント

タイトルとURLをコピーしました