WordPressの使い方がわかるブログ

【コピペ】テーマ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の画面はパソコンに近い大きさなので、CSSで大きくしなくてもいいことにしました。

 

メディア設定のサムネイルのサイズを大きくする

画像が粗い場合は、「メディア設定」「サムネイルのサイズ」を大きくしましょう。

初期設定は150×150ですが、WordPress Popular Postsの人気記事の画像が粗いので200×200にしていました。

今回、さらに300×300しましたが、200×200でいいかも?

画像サイズは、指定してるので問題ないです。

 

Regenerate Thumbnailsで再作成しよう

「サムネイルのサイズ」を300×300などに変更したら、プラグインのRegenerate Thumbnailsで再作成してくださいね。

サムネイルだから、失敗してもやり直せますけどね。

 

カスタマイズの前にバックアップは必須です。

面倒なので、UpdraftPlusでバックアップしちゃってます。

 

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

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

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

だけど、ここが腕の見せ所でもあるんです。

 

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

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

けど、右側にタイトルとのバランスが難しいかも?

スマホで見れば、これくらいでいいんじゃないかな?

と思ってます。

 

まとめ

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

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

とりあえず自分のスマホで確認してみるのが一番です。

個人的にはスマホを横向きでブログは読みませんけどね。

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