MENU
モン
世界一やさしい人
モンブログのモンです!
「暇な人達のたまり場」をモットーに、日々の生活をワンアップする情報を発信中。
➤イチゴがすき。
更新した日をチェック!
2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031
カテゴリー

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

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

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

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

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

注意点

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

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

※現在は、CocoonからSWELLに移行しました!

\SWELLについての記事も是非チェックしてくださいね♪/

目次

完成の見本

横の黒線がスマホでの画面幅

この様に、横の余白を無くして幅いっぱいに表示させちゃいます。

んな感じ!

コピペで出来るから簡単♪

早速、やり方を説明していきます。

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

以下のコードを「テーマエディタ」の「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をコピーしました!
  • URLをコピーしました!

この記事を書いた人

モンブログのモンです!
2000年生まれ➤ハリー・ポッターが大好き。イチゴも好き。
➤「日常」「ハリーポッター」など好きな事を色々語る好きな事に特化したブログです。

コメント

コメントする

CAPTCHA


目次