三日坊主なりの楽しい暮らし

三日坊主のアラサーが自分なりの楽しい暮らし方を発信していきます。ただいま付き合って11年の彼氏と同棲中。

【表示速度】はてなブログのアイキャッチ画像は正方形!タイトル見切れ問題の対処法【カード型一覧形式】

f:id:iuran:20200922114145p:plain

 

どうも、いうら( @mikkabo_zunari )です!

 

ずーっと前から気になっていたことがあります。

どうしてはてなブログのアイキャッチ画像って、一覧形式で見ると正方形に切り取られちゃうの??

f:id:iuran:20200921163111p:plain

画像に入れてるタイトル見切れてるんだけど!!

なるべく真ん中寄りにタイトルを入れたりもしていたのですが、いざ記事をアップロードしてから見切れていることに気づくとかなりげんなりしてしまいます。

そして何より、真ん中寄りを気にして作るのがめんどくさい…。

いろいろ調べてみたのですが、アイキャッチ画像を長方形にする方法を見つけることができず…。

これを機にカード型一覧形式にしてみたら、見事見切れ問題が解決しました!

 

 

カード型一覧形式にする方法

こちらの記事を参考にさせていただきました!

CSSのコピーなどはこちらからお願いします☺

※この記事のカード型はパソコンのみ対応みたいです

blog.minimal-green.com

 

表示速度の変化

CSSが増えたことにより、どれくらい記事が重くなるのでしょうか。

PageSpeed Insightsで調べてみました!

※モバイルとパソコンの横に書いてある数字は、従来の一覧形式と比べてマイナスかプラスかという表記です

 

従来の一覧形式の場合

モバイル             

f:id:iuran:20200921170120p:plain 

パソコン

f:id:iuran:20200921170129p:plain

あたしのブログのスペックです。

 

単純にカード型一覧形式にした場合

トップページはこんな感じになりました。

f:id:iuran:20200921172140p:plain

モバイル(±0)  

f:id:iuran:20200921170530p:plain

パソコン(-7

f:id:iuran:20200921170538p:plain

やはりCSSが増えたせいか、パソコンの方の表示速度が落ちてしまいました。

 

カード型一覧形式で抜粋文を消した場合

さっきの本文が書いてある部分を全て消しました。

モバイル(+2)           

f:id:iuran:20200921170844p:plain

パソコン(-4

f:id:iuran:20200921170901p:plain

大量にあった文字が減ったので、さっきよりはどちらも速度が上がりました!

パソコンの方は最初に比べるとやっぱり下がってはいますが。

 

カード型一覧形式でタイトルを画像の下に配置した場合

こんな感じです。

f:id:iuran:20200921172529p:plain

モバイル(-2)           

f:id:iuran:20200921172203p:plain

パソコン(+7

f:id:iuran:20200921172211p:plain

あれ?パソコンの方がめちゃくちゃ上がってる!?

な ぜ ?

よくわかりません_(:3 」∠)_

 

タイトル見切れ問題は解決

とりあえず画像は記事に張り付けたままの状態で表示されるようになりました!

いえーい!!ストレスフリーだぜー!!

かと思いきや1つ問題が。

f:id:iuran:20200922111249p:plain

スマホで見るとちょっとさみしい?かも?

抜粋の文章だけでだいぶちがいますね。

う~んどうしよう。

これはもうちょっと考えてみます!

 

\ ランキングに参加しています /

 

にほんブログ村 OL日記ブログ アラサーOLへにほんブログ村

にほんブログ村 ライフスタイルブログ 自分らしい暮らしへにほんブログ村