お問い合わせはコチラから

【カスタマイズ】アイキャッチ画像の左右の余白を消す

サイト運営

最近、FacebookやTwitterなどのSNSでは画像が画面横幅いっぱいに広がっているのをよく見かけます。

流行りでしょうか?

WordPressテーマにもそういうテーマがあるかもしれませんが、探すのも大変ですし、なによりお金かかるのも避けたい。

ということで、この記事では、このサイトで使用しているテーマはLuxeritasを例にとり、アイキャッチ画像の左右の余白をなくすカスタマイズについて説明します。

Luxeritasの人はそのままコピペできます。Luxeritas以外の人は考え方がわかれば応用が利くと思います。

Luxeritasでアイキャッチの左右の余白を消す方法

このサイトで使っているテーマLuxeritasでは、個別記事のアイキャッチ画像の左右の余白サイズは.gridのpadding量で決まっています。

そのpadding量は、画面のサイズでpadding量で変わります。その値は以下の表の通りです。

.grid
画面サイズpadding-leftpadding-right
1310px以上68px68px
1309px~992pxまで25px25px
991px~576pxまで20px20px
575pxまで7px7px

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

まとめ

この方法は、画面サイズごとにメディアクエリで切り替えて設定しなければならないので、検証ツールでブレークポイントと必要なマージンを画面サイズ毎に調べるのが結構手間です。

しかし、今どきのレスポンシブを含めたカスタマイズは殆どこんな感じです。

デザインは流行り廃りがあるので、また別のデザインが流行ればまた変わると思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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