2018年9月10日1こんにちは。記事タイトルのすぐ下に表示されるアイキャッチ画像って、ちょっとインパクト欲しいですよね。記事を開いて最初に目につく画像です。興味をひきつけておきたいところ!そこで、画像を幅いっぱいにすればインパクトが強くなるのでは?と思いました。今回は、そのアイキャッチ画像を画面横幅いっぱいにする!というカスタマイズをJINで行なっていきたいと思います。簡単作業です!まず、JINの子テーマをインストールしていない方はこちらから。子テーマってなに?JINで子テーマをインストールしよう!こんにちは、vanです。当サイトではワードプレステーマのカスタマイズをすることが多いのですが、カスタマイズをする上で大事な準備が...アイキャッチを画面横幅いっぱいに通常だとアイキャッチはこう見えています。CSSをちょっと追加するだけで、このように全幅表示にできます。両サイドにある垂直の線まで画像が大きくなっています。SNSアイコンまでの距離は少し広めに調整しました。コードの追加コピペするコードは以下の通り。}FTPを使える方:子テーマのstyle.cssにコピペ。FTPなし方法:「外観」→「カスタマイズ」→「追加CSS」にコピペ。微調整したい人向けのコード解説。.cps-post-thumbというクラスが、投稿記事のタイトルすぐ下に表示されるアイキャッチ画像にかかるクラス。これの横マージンをマイナスしてあげてるだけ。JINは1024pxでパディングに調整入るみたいなので、切り替えで横のマージン値を調整してます。下マージンはSNSボタンとの隙間です。オリジナルは5pxなのですが、アイキャッチ画像が大きくなってインパクト強めになったので、少し余裕をもたせて10pxに設定しました。必要とあらば元の5pxに戻してもいいですし、15pxとかに増やしても構いません。あとがき今回のカスタマイズはあっという間でしたね。これで通常の画像は今まで通りで、投稿のアイキャッチ画像だけ横幅いっぱい表示になりました。戻したいときはコードを削除するだけです。以上!ちょっと難しいですけどサイトの読み込み速度高速化が見込めるカスタマイズもあります。JINで使うグーグルフォントを軽くして読み込みスッキリ高速化!こんにちは。