ブログのヘッダー画像の幅が中途半端
「Minimalism」にヘッダー画像を表示させたときに思ったのが
- 「幅が横まで伸びていなくてなんだか中途半端」
- 「横まで画像を表示させたい」
ということでした。
そこで今回はこのヘッダー画像の幅調節の仕方を紹介します。
CSSの知識がなくてもコピペだけで簡単にカスタマイズできたので、ぜひ試してみてください。
※はてなブログのテーマ「Minimalism」を使用しています。
※CSSを編集する時はあらかじめバックアップを取るようにしましょう。
CSSにコピペする
こちらのサイトさんの以下のCSSをコピペさせていただきました。
/* ヘッダー画像の比率の調整↓ */
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}/* ヘッダー上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
/* ヘッダー画像の比率の調整↑ */
引用：https://www.kurasitotonoe.com/entry/blogheaderspace/
/* ヘッダースマホ対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}
引用：https://www.kurasitotonoe.com/entry/blogheaderspace/
はてなブログの「デザイン」→「カスタマイズ」→「デザインCSS」にこのコードを貼り付けます。
ヘッダー画像は「画像だけ表示」にしておきます。
※「画像とテキストを表示」の場合は左右に空白が出来てしまうので、表示は「画像だけ表示」にしておきましょう。
「変更を保存する」を押すと幅いっぱいまで画像が表示されるようになっています。
おわりに
今回ははてなブログのテーマ「Minimalism」のヘッダーの画像が中途半端に表示されている時にしたカスタマイズの紹介でした。
上に貼ったリンク先のサイトさんによると「Minimalism」の他にも「UnderShirt」というテーマに使った時にも同じように表示されたとのことです。（「SOHO」では利用できなかったとも）
あまりCSSに詳しくない私でもコピペするだけで簡単にカスタマイズが出来たので、気になっていたという方はぜひ参考にしてみてください。