【はてなブログ-カスタマイズ】サイドバーの画像サイズを修正（CSS対応）

以前、サイドバーの画像サイズを調整したのですが、スマホ版の表示がちょっと変な感じになっていました。
※スマホ版の表示なので厳密にはサイドバーではなく、記事の下の方の最新/関連/注目記事の画像サイズです。

サイドバーの画像サイズ調整に関しては、以下の記事で書いています。

関連記事

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

画像サイズは２か月くらい前に調整したのですが、変な感じになっていたのに今さら気付きました。

どんな感じで変なのかは後ほど詳しく書きますが、CSSでサッと修正できたのでラッキーでした。

それでは、どんな対応をしたか書いていきます。

変更内容（画像）

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

変更前

変更後

こんな感じです。

変更前は、画像サイズが中途半端で、記事タイトルが読みにくい感じになっています。
画像サイズが中途半端になってしまうかどうかは、スマホの横サイズ次第なのですが、おそらく多くのスマホで記事タイトルが読みにくい感じになっていたはず。

変更後は、画像が横幅いっぱいに表示されるように対応しました。
記事タイトルが必ず画像から折り返して表示されるので、見やすい感じになりました。

適用したCSS

/***サイドバーの画像サイズ調整***/
.urllist-image {
	width: 100%;
}
/***サイドバーの画像サイズ調整ここまで***/

上記CSSを適用すると、最新/関連/注目記事の画像サイズが横幅いっぱいに表示されます。

適用手順

一応、適用手順を載せておきます。

STEP

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

STEP

「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック

STEP

上述のCSSをコピペする（既存のCSSは消さずに）

STEP

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

STEP

デザインが変更されているか確認する

デザインが変更されなかったり、変になっている方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。

注意事項

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

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

他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のCSSを適用しようとしている方はその辺りご了承ください。

おわりに

ということで、「サイドバーの画像サイズを修正」に関してアレコレ書いてみました。

今回の対応は、ブログカスタマイズ後の確認を怠ったことにより発生したものです。

ブログカスタマイズ後は基本的に、PC・スマホのそれぞれでデザインや挙動を確認しています。
ですが、以前のサイドバー画像サイズ調整の際はスマホでの確認を忘れてしまっていたようです。

記事タイトルがちょっと読みにくくなっただけなので影響はそれほど無かったですが、今後は忘れないように気を付けようと思いました。

またなにかブログカスタマイズしたら記事にします。

関連記事

HTML・CSSに関連する記事は他にも書いています。
気になる記事があればぜひ。