HatenaBlog UnderShirt の横幅を拡大した
UnderShirt のレスポンシブ設定を変更し横幅を拡大した
HatenaBlog の デザインテーマ 『UnderShirt』 を半年前から使わせてもらっていますが、カード表示および本文表示の横幅が何となく狭いのが気になっていました。少し調べたところ、レスポンシブ設定を「デザインCSSで修正する」ことにより、横幅の拡大が可能であることが分かりました。
Chromeのデベロッパーツールで調べると、ブログ本文（カード）は「#main」、サイドバーは「#box2」で指定されており、「@media (min-width: 768px)...」で width をディスプレーサイズに応じた値に変えていることが分かりました。という訳で、この部分を以下のようにデザインCSSで書き換えました。
デザインCSSに追加
/* ---＜レスポンシブ設定＞--スマホ[375]・タブレット[680]・PC[992]・TV[1380] --- */
#main { min-width: 74vw; float: left;}
.media {
}
@media screen and (min-width: 375px) { /* 画面サイズ375px~ */
#box2 { width: 370px; } }
@media screen and (min-width: 680px) { /* 画面サイズ680px~ */
#box2 { width: 300px; } }
@media screen and (min-width: 992px) { /* 画面サイズ992px~ */
#box2 { width: 200px; } }
@media screen and (min-width: 1380px) { /* 画面サイズ1380px~ */
#main { min-width: 67.5vw; float: left;} }
上記をデザインCSSの最後に付け加えてください。UnderShirt のスマホ表示に影響を与えないで横幅が拡大できます。（なお、環境によっては期待通りの動作をしないこともあることをご了承ください。）
最後に、
UnderShirt の 開発者 rokuzeudon さんに敬意と感謝の念を捧げ、アイキャッチ画像に UnderShirt を使わせていただきました。ありがとうございました。
