アイキャッチ画像をスマホで見やすく【Lightning】テーマの全幅設定

アイキャッチ画像をスマホで見やすく【Lightning】全幅設定

この記事はWordPress【Lightning】テーマで、投稿記事をスマホで見るときにアイキャッチを大きくできる方法ないかな~に答えます!

アイキャッチ画像の再作成とCSSでアイキャッチ画像を見やすくできる方法を解説します!

今回の最終ゴール

スマホ/タブレット(PC)で見るときのアイキャッチ画像を全幅表示して見やすくします!

左側:BEFORE(標準の投稿一覧表示)
右側:AFTER(見やすくした投稿一覧)

スマホで見た場合

Google Chrome開発者モード『iPhone6/7/8』で表示
アイキャッチ画像をスマホで見やすく【Lightning】全幅設定-スマホで見た場合

タブレットで見た場合

Google Chrome開発者モード『iPad』で表示
アイキャッチ画像をスマホで見やすく【Lightning】全幅設定-タブレットで見た場合

修正の手順

  1. アイキャッチ画像の修正
  2. CSSの追加

アイキャッチ画像の修正

アイキャッチ画像の修正をします。
新規分と既存分の画像の修正を行います。

  • アイキャッチサイズの変更
  • アイキャッチ画像の再作成

サイズの変更

今回は大きくしたいので、「幅150/高さ150」→『幅320/高さ240』に変更します。

「ダッシュボード」-「設定」-「メディア設定」で変更します。

アイキャッチ画像をスマホで見やすく【Lightning】全幅設定-メディア設定でサイズを変更する

今回はスマホ・タブレット共に同じアイキャッチを使用しています。
タブレットとスマホでのサイズを考慮すると320pxぐらいがバランスがいいと思います。

画像の再作成

既存記事のアイキャッチ画像を再作成します。

今回はプラグインの「Regenerate Thumbnails」を使用します。
アイキャッチ画像をスマホで見やすく【Lightning】全幅設定-アイキャッチ画像を再作成プラグイン「Regenerate Thumbnails」

インストール後に「ツール」-「Regenerate Thumbnails」をクリック

『Regenerate Thumbnails For All xxx Attachment』をクリックします。
アイキャッチ画像をスマホで見やすく【Lightning】全幅設定-アイキャッチ画像を再作成プラグイン実行

CSSの追加

テーマの編集「style.css」or カスタマイズ「追加css」の編集画面で下記CSSをコピペします。

追加CSS

@media (max-width:480px) {
 .media .postList_thumbnail{
  width: 100%!important;
  padding-right:0!important;
 }
}

@media (min-width:481px) {
 .media .postList_thumbnail{
  width: auto!important;
   padding-right:20px!important;
 }
}

参考サイト

作成にあたり、下記の記事を参考にさせて頂き、設定方法など勉強させていただきました。

大変ありがとうございます。ぜひこちらの記事も見てください!

【内藤 勲様】ネットでファンが生まれる人気ブログの作り方-「大変分かりやすく解説されています!」

まとめ

WordPressテーマのLightningで投稿記事をより目立つように表示しましょう。

少し手を加える事であなたのサイトもより一層かっこよくなります!

ぜひ使ってみてください!

Follow me!