こんにちは。vanです。
記事タイトルのすぐ下に表示されるアイキャッチ画像って、ちょっとインパクト欲しいですよね。
なにせ記事を開いて最初に目につく画像です。しっかり興味をひきつけておきたいところ！
そこで、画像を幅いっぱいにすればインパクトが強くなるのでは？と思いました。
今回は、そのアイキャッチ画像を画面横幅いっぱいにする！というカスタマイズをJINで行なっていきたいと思います。
簡単作業です！
まず、JINの子テーマをインストールしていない方はこちらから。
https://vanblog.net/jin-childtheme/
アイキャッチを画面横幅いっぱいに
通常だとアイキャッチはこう見えています。
CSSをちょっと追加するだけで、このように全幅表示にできます。両サイドにある垂直の線まで画像が大きくなっています。
SNSアイコンまでの距離は少し広めに調整しました。
コードの追加
コピペするコードは以下の通り。
/*サムネイルワイド*/
.cps-post .cps-post-thumb {
margin: 0px -30px 10px; }
/*パディング切り替わり後のサムネイルワイド*/
@media (max-width: 1023px) {
.cps-post .cps-post-thumb {
margin: 0px -20px 10px; } }
- FTPを使える方：子テーマのstyle.cssにコピペ。
- FTPなし方法：「外観」→「カスタマイズ」→「追加CSS」にコピペ。
保存しておわりっ！
[adsense]
解説
微調整したい人向けのコード解説。
.cps-post-thumbというクラスが、投稿記事のタイトルすぐ下に表示されるアイキャッチ画像にかかるクラス。
これの横マージンをマイナスしてあげてるだけ。
JINは1024pxでパディングに調整入るみたいなので、切り替えで横のマージン値を調整してます。
下マージンはSNSボタンとの隙間です。オリジナルは5pxなのですが、アイキャッチ画像が大きくなってインパクト強めになったので、少し余裕をもたせて10pxに設定しました。
必要とあらば元の5pxに戻してもいいですし、15pxとかに増やしても構いません。
あとがき
今回のカスタマイズはあっという間でしたね。
これで通常の画像は今まで通りで、投稿のアイキャッチ画像だけ横幅いっぱい表示になりました。
戻したいときはコードを削除するだけです。
以上！
ちょっと難しいですけどサイトの読み込み速度高速化が見込めるカスタマイズもあります。