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

千ちゃん

WordPress【Lightning】テーマでスマホの時に見やすくならないかしら？

シンさん

アイキャッチ画像の加工とスタイルを変更する事で見やすくなるよ！

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

Contants

今回の最終ゴール
- スマホで見た場合
- タブレットで見た場合
修正の手順
参考サイト
まとめ

今回の最終ゴール

シンさん

スマホ/タブレット(PC)で見るときのこんな感じで見れるのはどうかな？

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

スマホで見た場合

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

タブレットで見た場合

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

千ちゃん

すごく見やすいわ！ぜひやり方を教えて！

シンさん

手順を教えるね！

修正の手順

修正の手順は主に3つ。すでに登録してある画像のサイズ変更とCSSによる表示のサイズ変更を行います。

修正の手順

アイキャッチ画像の修正
アイキャッチ画像の再作成
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;
　}
}