この記事は旧ブログ 時に書いたものです。
トップページの記事一覧表示は、はてなブログproのみで使える機能です。
こんにちは！ゆきおです。
当ブログ（旧ブログ）のデザインテーマは「Minimalism」を使用しています。
シンプルなデザインで気に入っているのですがスマホで見た時に記事一覧のアイキャッチが小さい長方形で表示されるのが以前から気になっていました。（最新記事や注目記事は普通に正方形で表示されている。）
本来なら横長のアイキャッチの左右を切り落として正方形の画像になるはずなんですが正方形の枠の中に横長アイキャッチの全体を表示しているので上下に余白ができています。
うっすらと正方形の枠線があるのも気になりますね。
chromeのデベロッパーツールで調べた結果、解決法がわかりましたので紹介します。
記事一覧のアイキャッチを正方形にする方法
結論から言うと下記のCSSコードを［ ダッシュボード］＞［ デザイン］＞［ カスタマイズ］＞［ デザインCSS］に張り付ければOKです。（枠内クリックでコピー）↓
@media screen and (max-width:640px){ .page-archive .entry-thumb { background-size:cover; background-position:center; } }
デザインCSSを変更する際は必ずバックアップしておいてください。少しの変更だからと油断すると面倒なことになります。
私も何度か痛い目に合っているので……
アイキャッチが長方形になる原因
chromeのデベロッパーツールで当ブログをスマホ表示させました。
このようにアイキャッチが小さい長方形になっています。↓
アイキャッチのプロパティを調べましょう。
このアイコンをクリックしてから。↓
アイキャッチをクリック。↓
background-sizeの値が100%となっていました。
これが原因です。↓
↑ 100%ということは正方形の枠に画像全体を表示するということです。
このために上下に余白ができたわけですね。
PC表示に変更してから同じようにアイキャッチのプロパティを調べます。
するとbackground-sizeの値がcoverとなっています。
その下のbackground-position:centerは中央寄せのことでしょうね。↓
↑ スマホ表示の時も同じ値を指定してやればPCと同様に正方形で表示されるはず。
そこで作成したのが冒頭のcssコードです。
実際にアイキャッチが正方形になるか確認
デザインCSSにCSSコードを張り付けてからスマホ表示させました。↓
↑ ちゃんと正方形で表示されました。
アイキャッチの文字もだいぶ読みやすくなりますね。
最後に
今回のデザインCSS変更で自分の思い通りにできて満足です。
もっとサイズを大きくするとか色々できそうですが、私の場合HTMLやCSSにこだわると何も手につかなくなるぐらいハマりそうなので怖いですね。
以上、ゆきおでした。それでは、また！
