iiie@diy

by syttg

【はてなブログ向け】カード型記事一覧化した際に起きる画像拡大表示の対処法

f:id:gorislog:20181207184738j:plain

 

 

当ブログでは、カード型の記事一覧化を採用しています。

 

はてなブログProに申し込むと、トップページの『記事一覧』を使用できるので選択、あとはCSSコードを書き換え、アイキャッチ画像を拡大し、記事タイトルや内容を調整して表示させます。

 

コードを紹介している記事や、当ブログで指定した調整が書いてあるので、そのあたりが気になる方は下の記事をどうぞ。

 

www.iiie.nagoya

 

はてなブログでカード型記事一覧化をすると起きる問題として、表示されるアイキャッチ画像が拡大表示されてしまうという問題。

 

f:id:gorislog:20181207071309j:plain

 

記事一覧化のCSSコードを打ち込んだ後に、コチラの画像を記事に掲載したとします。

 

トップページで記事一覧を確認すると、

 

f:id:gorislog:20181207183210p:plain

 

アイキャッチ画像として表示される画像が、一部消えており、拡大化(トリミングとでもいいましょうか)された画像になってしまいます。

 

もちろん、アスペクト比の関係や、画像サイズの問題で一部画像の端が消えてしまうのは仕方のない事なのですが(表示される画像サイズを均一化するために)、全体的に画像サイズを小さくする必要はありませんし、撮影した際に見せたい構図や情報が抜け落ちてしまう可能性があります。

 

そこで、今回はこの問題を解決するために方法を調べました。

 

対処法

 

正直書くと、自分で考えても全くわからなかったので、調べるとコードを公開してくださっている方がいました。

 

www.imuza.com

www.imuza.com

 

当ブログでは、下側の記事に公開されているコードを使用しています

 

フッターにコードをそのまま記載するだけで、症状が改善されますので、記事一覧化のカスタマイズをしている方は一度試してみると良いですよ!(使用しているCSSコードや設定によっては症状が緩和されない場合もありますが)

 

f:id:gorislog:20181207184141p:plain

 

コードを記載した後のトップページがコチラ。

 

若干両端が削れていますが(たぶんCSSの設定のせい)、コード打ち込み前に比べればかなり改善されてる

 

画像拡大によって画像が荒れることもないですし、アイキャッチ画像がきちんと表示されますので、読者に情報がしっかりと伝えられます。

 

記事一覧化をしている、又はこれから挑戦しようとしている方はぜひ一度試してください。

 

 

おわり。