有料のWordPressテーマのSANGOも使ってます。
スマホの記事一覧のサムネイルを小さく表示してるけど、
もうちょっと大きいほうがいい！
そんなカスタマイズがコピペでできちゃいます。
具体的にいうと、
「記事一覧カードを横長にする」にチェックをいれてるけど、もうちょっと画像を大きくしたい！
そんな人のためのカスタマイズです。
※注意； このカスタマイズはSANGOVer3では検証していません。
SANGOの記事一覧のサムネイル画像を大きくするCSS
コピペってある通り、下記をCSSに追記するだけカスタマイズできます。
/* 一覧表示の画像 */
.sidelong__article {
max-width: 355px!important;
}
.sidelong__article img {
width: 130px!important;
height: 130px!important;
}
.sidelong__article-info {
width: 140px!important;
height: 130px!important;
}
.sidelong__article-info h2 {
font-size: 16px!important;
}
上記で表示が崩れる場合は、
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまで*/
}
横幅が479px以下に限定しています。
スマホを横向きで表示した場合と、iPadではCSSを無効にしています。
スマホを横向きにした場合は、SANGOではサムネイルが少し大きくなるので無効にしました。
スマホを横向き・iPadではデフォルトのまま表示させています。
iPadはパソコンと同じでいいんだけどスマホ表示が適用されます。
画面サイズはパソコンに近いのにスマホ扱いなので、iPad対応は難しいしいです。
メディア設定のサムネイルのサイズを大きくする
画像が粗い場合は、「メディア設定」の「サムネイルのサイズ」を大きくしましょう。
初期設定は150×150ですが、WordPress Popular Postsの人気記事の画像が粗いので200×200にしています。
さらに300×300しましたが、200×200でいいいいと思います。
画像サイズは指定してるので問題ないです。
Regenerate Thumbnailsで再作成
「サムネイルのサイズ」を200×200に変更したら、プラグインのRegenerate Thumbnailsでサムネイルを再作成してください。
大丈夫そうでも画像サイズを変更したら再作成しましょう。
カスタマイズの前にバックアップは必須です。
UpdraftPlusでバックアップしちゃってます。
もっと画像を大きくできる
もっとサムネイル画像を大きくできます。
けど右側のタイトルとのバランスが難しいです。
好みですが、これくらいでいいんじゃないか？と思ってます。
まとめ
スマホ表示やiPad表示はChromeのデベロッパーツールでも確認できます。
スマホを横向きで表示したり、スマホでPC表示して表示が崩れてないか確認しましょう！
自分のスマホで確認してみるのが一番いいです。
スマホを横向きにすることはありませんがスマホでPC表示することはあります。
※ SANGOも持ってるんだけど、SWELLを使ってます。
SWELLでブロックエディタにできたのでSWELLだけにしました。