SANGOの記事一覧のサムネイル画像をCSSで大きくする方法

有料のWordPressテーマのSANGOも使ってます。

スマホの記事一覧のサムネイルを小さく表示してるけど、

もうちょっと大きいほうがいい!

という人のための記事を書きました。

そんなカスタマイズがコピペでできちゃいます。

具体的にいうと、

「記事一覧カードを横長にする」にチェックをいれてるけど、もうちょっと画像を大きくしたい!

そんな人のためのカスタマイズです。

目次

テーマ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でバックアップしちゃってます。

記事タイトルが長い場合は文字サイズを小さく

記事タイトルが30文字以上になると表示しきれないかもしれません。

そんな場合は文字サイズを小さくするのが簡単です。

もっと画像を大きくできる

もっとサムネイル画像を大きくできます。

けど右側のタイトルとのバランスが難しいです。

好みですが、これくらいでいいんじゃないか?

と思ってます。

まとめ

スマホ表示やiPad表示はChromeのデベロッパーツールでも確認できます。

スマホを横向きで表示したり、スマホでPC表示して表示が崩れてないか確認しましょう!

自分のスマホで確認してみるのが一番いいです。

スマホを横向きにすることはありませんが

スマホでPC表示することはあります。




よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次