最近、FacebookやTwitterなどのSNSでは画像が画面横幅いっぱいに広がっているのをよく見かけます。
流行りでしょうか?
WordPressテーマにもそういうテーマがあるかもしれませんが、探すのも大変ですし、なによりお金かかるのも避けたい。
ということで、この記事では、このサイトで使用しているテーマはLuxeritasを例にとり、アイキャッチ画像の左右の余白をなくすカスタマイズについて説明します。
Luxeritasの人はそのままコピペできます。Luxeritas以外の人は考え方がわかれば応用が利くと思います。
Luxeritasでアイキャッチの左右の余白を消す方法
このサイトで使っているテーマLuxeritasでは、個別記事のアイキャッチ画像の左右の余白サイズは.gridのpadding量で決まっています。
そのpadding量は、画面のサイズでpadding量で変わります。その値は以下の表の通りです。
.grid | ||
画面サイズ | padding-left | padding-right |
1310px以上 | 68px | 68px |
1309px~992pxまで | 25px | 25px |
991px~576pxまで | 20px | 20px |
575pxまで | 7px | 7px |
このpaddingを打ち消すようにマイナスマージンにしてあげればよいので、以下のようなCSSカスタマイズで期待した動きになります。
.post-top-thumbnail {
margin: 0px -68px 30px ;
}
@media (max-width: 1309px) and (min-width: 992px){
margin: 0px -25px 30px ;
}
@media (max-width: 991px) and (min-width: 576px){
margin: 0px -20px 30px ;
}
@media (max-width: 575px){
margin: 0px -7px 30px ;
}
まとめ
この方法は、画面サイズごとにメディアクエリで切り替えて設定しなければならないので、検証ツールでブレークポイントと必要なマージンを画面サイズ毎に調べるのが結構手間です。
しかし、今どきのレスポンシブを含めたカスタマイズは殆どこんな感じです。
デザインは流行り廃りがあるので、また別のデザインが流行ればまた変わると思います。