みやもとメモ

「Notion」「資格」「ブログカスタマイズ」「Microsoft To Do」「Chrome拡張機能」などについて書いていきます。

目次
目次

【はてなブログ-カスタマイズ】サイドバーの最新/関連/注目記事の画像サイズを調整

この記事をシェアする

数日前から適用しているのですが、サイドバーの「最新記事」「関連記事」「注目記事」の画像サイズを変更しています。

画像サイズは、はてなブログを始めた当初に設定したような、デフォルトのままのような、、そんな曖昧な記憶です。
ですが今回、改めて確認したところ画像サイズを変更できることに気付きました。

元の画像サイズは小さく、画像全体が見えない設定になっていました。
今回の設定変更で画像サイズを大きくし、縦横比も画像に合わせて調整し、画像全体が見えるような設定に変更しました。

ということで今回は、どういった調整をしたのか書いていきます。

変更内容(画像)

まずは変更前後の画像を貼ります。

「最新記事」「関連記事」「注目記事」の3つを変更したのですが、どれも設定内容は同じです。
なので3つの中から「最新記事」をピックアップします。

変更前

変更後

こんな感じです。

変更前は画像と記事タイトルが横並びで表示されています。
スッキリした表示で見やすいなと思います。
ただ画像サイズが小さいのと、画像の中央部分を切り抜いたような表示です。
これだと、パッと見が分かりにくいなと感じていました。

変更後は画像が大きく表示され、そこから折り返して記事タイトルが表示されています。
スッキリした表示かと言われると疑問は残りますが、画像全体が見えるようになりました。
これにより、パッと見が分かりやすくなったかなと思います。

設定手順

一応、設定手順を載せておきます。

「最新記事」の設定手順を書いていきます。
「関連記事」「注目記事」も同様の手順で設定できます。

STEP
ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック

STEP
「カスタマイズ」→「サイドバー」→「最新記事:編集」をクリック

STEP
サムネイル画像の「横」「縦」を変更する
※変更前:横100、縦100
※変更後:横300、縦150

STEP
「適用」をクリック

STEP
「変更を保存する」をクリック

STEP
デザインが変更されているか確認する
デザインが変更されなかったり、想定の挙動になっていない方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、原因は色々考えられます。

注意事項

はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。

今使っているSilenceというデザインテーマに適用した形となります。

他のデザインテーマを使っている方や、使用している画像次第ではうまく動かない可能性がありますので、その辺りご了承ください。

おわりに

ということで、サイドバーの最新/関連/注目記事の画像サイズに関してアレコレ書いてみました。

画像サイズが大きくなり、画像全体が見えるようになりました。
これにより、パッと見が分かりやすくなったかなと思います。
ただ、サイドバーにしてはちょっと主張が強いかな…とも思いつつ。

しばらくこの設定で様子見して、違和感が強くなってきたら改めて設定変更しようと思います。

(追記)
スマホ版の画像表示が少し変になっていたため、CSSで調整しました。
以下の記事で詳しく書いています。こちらも良ければぜひ。

miya-moto-memo.hatenablog.com

関連記事

はてなブログ関連の機能は他にも記事を書いています。
気になる記事があればぜひ。

TOPへ戻る HOMEへ