
千ちゃん
WordPress【Lightning】テーマでスマホの時に見やすくならないかしら?
シンさん
アイキャッチ画像の加工とスタイルを変更する事で見やすくなるよ!
アイキャッチ画像の再作成とCSSでアイキャッチ画像を見やすくできる方法を解説します!
今回の最終ゴール
シンさん
スマホ/タブレット(PC)で見るときのこんな感じで見れるのはどうかな?
左側:BEFORE(標準の投稿一覧表示)
右側:AFTER(見やすくした投稿一覧)
スマホで見た場合
Google Chrome開発者モード『iPhone6/7/8』で表示
タブレットで見た場合
Google Chrome開発者モード『iPad』で表示
千ちゃん
すごく見やすいわ!ぜひやり方を教えて!
シンさん
手順を教えるね!
修正の手順
修正の手順は主に3つ。すでに登録してある画像のサイズ変更とCSSによる表示のサイズ変更を行います。
修正の手順
- アイキャッチ画像の修正
- アイキャッチ画像の再作成
- CSSの追加
サイズの変更
今回は大きくしたいので、「幅150/高さ150」→『幅320/高さ240』に変更します。
「ダッシュボード」-「設定」-「メディア設定」で変更します。

今回はスマホ・タブレット共に同じアイキャッチを使用しています。
タブレットとスマホでのサイズを考慮すると320pxぐらいがバランスがいいと思います。
画像の再作成
既存記事のアイキャッチ画像を再作成します。
今回はプラグインの「Regenerate Thumbnails」を使用します。
インストール後に「ツール」-「Regenerate Thumbnails」をクリック
『Regenerate Thumbnails For All xxx Attachment』をクリックします。
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で投稿記事をより目立つように表示しましょう。
少し手を加える事であなたのサイトもより一層かっこよくなります!
ぜひ使ってみてください!
スポンサーリンク