スポンサーリンク
ブログ

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

アイキャッチ画像をスマホで見やすく【Lightning】全幅設定
千ちゃん
千ちゃん
WordPress【Lightning】テーマでスマホの時に見やすくならないかしら?
シンさん
シンさん
アイキャッチ画像の加工とスタイルを変更する事で見やすくなるよ!

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

今回の最終ゴール

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

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

スマホで見た場合

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

タブレットで見た場合

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

千ちゃん
千ちゃん
すごく見やすいわ!ぜひやり方を教えて!
シンさん
シンさん
手順を教えるね!

修正の手順

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

修正の手順
  1. アイキャッチ画像の修正
  2. アイキャッチ画像の再作成
  3. 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で投稿記事をより目立つように表示しましょう。

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

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