どうも、いうら（ ＠mikkabo_zunari ）です！
ずーっと前から気になっていたことがあります。
どうしてはてなブログのアイキャッチ画像って、一覧形式で見ると正方形に切り取られちゃうの？？
画像に入れてるタイトル見切れてるんだけど！！
なるべく真ん中寄りにタイトルを入れたりもしていたのですが、いざ記事をアップロードしてから見切れていることに気づくとかなりげんなりしてしまいます。
そして何より、真ん中寄りを気にして作るのがめんどくさい…。
いろいろ調べてみたのですが、アイキャッチ画像を長方形にする方法を見つけることができず…。
これを機にカード型一覧形式にしてみたら、見事見切れ問題が解決しました！
カード型一覧形式にする方法
こちらの記事を参考にさせていただきました！
CSSのコピーなどはこちらからお願いします☺
※この記事のカード型はパソコンのみ対応みたいです
表示速度の変化
CSSが増えたことにより、どれくらい記事が重くなるのでしょうか。
PageSpeed Insightsで調べてみました！
※モバイルとパソコンの横に書いてある数字は、従来の一覧形式と比べてマイナスかプラスかという表記です
従来の一覧形式の場合
モバイル
パソコン
あたしのブログのスペックです。
単純にカード型一覧形式にした場合
トップページはこんな感じになりました。
モバイル（±0）
パソコン（-7）
やはりCSSが増えたせいか、パソコンの方の表示速度が落ちてしまいました。
カード型一覧形式で抜粋文を消した場合
さっきの本文が書いてある部分を全て消しました。
モバイル（+2）
パソコン（-4）
大量にあった文字が減ったので、さっきよりはどちらも速度が上がりました！
パソコンの方は最初に比べるとやっぱり下がってはいますが。
カード型一覧形式でタイトルを画像の下に配置した場合
こんな感じです。
モバイル（-2）
パソコン（+7）
あれ？パソコンの方がめちゃくちゃ上がってる！？
な ぜ ？
よくわかりません_(:3 」∠)_
タイトル見切れ問題は解決
とりあえず画像は記事に張り付けたままの状態で表示されるようになりました！
いえーい！！ストレスフリーだぜー！！
かと思いきや1つ問題が。
スマホで見るとちょっとさみしい？かも？
抜粋の文章だけでだいぶちがいますね。
う～んどうしよう。
これはもうちょっと考えてみます！
\ ランキングに参加しています /
