Cocoonのアイキャッチ画像を幅いっぱいに表示するカスタマイズ

ウェブ

ちょっと前にテーマをCocoonに変更しました。
 
とりあえず開設当初はブログデザインのカスタマイズよりも記事を書くことに注力しようということで他のテーマを使ってました。
 
そして約100記事ほど書いた時点でネタも尽きてきたので、一旦、このタイミングで気分転換も兼ねてテーマを変更してみよう。
 
ということで、最近は記事を書かずにブログデザインのカスタマイズばかりしていました。
 
まだまだちょこちょこと弄る可能性はありますが、一応は自分のイメージ通りになってきましたので…
 
これまでに施してきたカスタマイズの中で、参考になりそうなものは記事でそのやり方を書いていこうと思ってます。
 

りこぴんD🍅
りこっぴ🍅
というわけで今回はアイキャッチ画像を幅いっぱいに表示するカスタマイズについてご紹介します。

 
CSSに軽く追記するだけで簡単にできますので興味ある方はお試しください。
 
 

完成図

まずはこのカスタマイズを施す前のスクリーンショットと施した後のスクリーンショット(完成図)
 
両方を比較でお見せしたいと思います。
 

カスタマイズ前

・スマホ
 

 
・PC
 

 

カスタマイズ後

・スマホ
 

 
・PC
 

 
比べてみるとわかるかと思いますが、カスタマイズ前の方だとアイキャッチの左右に余白があります。
 
カスタマイズ後の方だとアイキャッチの左右に余白はなく、スマホだと画面いっぱいに画像が表示されます。
 
 

やってみよう!(CSSの追記)

手順は簡単です。
 
以下のCSSをCocoon子テーマのstyle.cssにコピペしてください。

/*---------------------------------
アイキャッチの幅最大化
--------------------------------*/
/*記事タイトルの余白調整*/
.entry-title {
    padding: 0.2em 0px;
}

/*アイキャッチの幅調整*/
.eye-catch {
    max-width: 114%;
    margin-right: -30px;
    margin-left: -30px;
}
/*---------------------------------
アイキャッチの幅最大化ここまで
--------------------------------*/

 
上記のコードだけだとスマホやiPadなどで見た時の表示がおかしくなるので、さらにstyle.cssの@media screen and (max-width: 834px){の部分に
 
(この部分)
 

 
 
以下のCSSをコピペしてください。

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/*スマホ・タブレット表示の際のアイキャッチ余白調整*/
.eye-catch {
    margin-right: -16px;
    margin-left: -16px;
}
}

 
ここからは問題なければやらなくてOKです!
 
もしこれでスマホやiPadでのスクロール時に画面が固定されなくなるようであれば、さらにstyle.cssの今度は@media screen and (max-width: 1023px){の部分に、以下のCSSを追記しましょう。

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
/*はみ出した領域の非表示*/
.content {
    overflow: hidden;
}
}

 
以上、Cocoonのアイキャッチを幅いっぱいに表示するカスタマイズの手順でした。
 

9+

この記事へのコメント

トップへ戻る