横幅いっぱいにできるだけでなく、余白も消えます！ 色々な記事見たのにできないよーって方に救済を。思ったよりずっと簡単です。
忘れたくない人はこの記事をブックマークとかしておくことをおすすめします、あまり強いブログではなく検索結果に中々でないので……
2023年最新版。確実性は一番自信があります。
横幅いっぱいに表示し、余白も無くすCSS
色々な記事のものを試して、なんか違くて疲れていることでしょう。とりあえず方法を端的に。理由とかはあとから。
まず、はてなブログのヘッダー表示機能は使いません。直接CSSで画像を貼り付けて色々します。
以下のCSSをデザインCSSに貼り付け。ただし注意する所があるので、読んでね。
コード（自分で記入する所あり）
メモに一旦コードをコピペしておきましょう。後から記入がしやすいです。
/* ----- 「タイトル」と「ブログの説明」を隠す ----- */
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}/* ----- 「タイトル」と「ブログの説明」を隠す終わり ----- */
#blog-title{
padding: 0px;/* ----- ヘッダー画像周りの余白を消す ----- */
}
#blog-title-inner{
background-image:url(ここに画像URLを貼り付け); /* ----- 背景画像を直接URL指定 ----- */
background-position:center center;
background-size:cover;
width: 100%;
aspect-ratio: 5 / 1; /* ----- 画像のアスペクト比。自身の画像の縦横比に合わせる ----- */
}
自分で記入する所が2つあるから、すぐ下の説明を見てやってみてね
ヘッダーにする画像のURLを持ってくる
PCで作業して下さい。まず、ヘッダーにする画像をはてなフォトライフにアップしましょう。（1000px以下推奨）
右上の「アップロード」を選び、アップロードしたら、「マイフォト」から画像を選び、画像の上で右クリック。
「画像アドレスをコピー」があるのでそれをクリックすればコピーされます。そしたら、さっきメモに置いたコードの「ここに画像URLを貼り付け」にペーストして下さい。
いつもヘッダー設定する所じゃなくて「はてなフォトライフ」だよ！
アスペクト比を記入する
次に画像のアスペクト比を入れて下さい。
例えば横1000px・縦200pxのものなら（5 / 1）に。
横1000px・縦400pxのものなら（2.5 / 1）です。自分の画像にあったアスペクト比を記入しましょう。僕のCSSでは（5 / 1）になっています。
いろいろな縦横比に対応できるから、アスペクト比は覚えておくとお得だよー
できたら
デザインCSSにできたコードを貼り付けましょう！ これでピッタリ揃っていたら大勝利です。「変更を保存」を忘れないように。
なぜこの記事を書くことに至ったのか
普通にヘッダーを配置
調整しようとする→あれ？ うまくいかないじゃん！
はてなブログ側の変な処理を避ける
直接配置→調整→あれ？
なんだこの細さは、なんかpaddingもあるし
padding0にする→まだ高さがやばい
height→autoに！→効かねぇ！（泣）
だったらアスペクト比だこらぁん
大 勝 利
……変なノリですみません
それでも無理だったら
テーマ側のcssが干渉している可能性が高いです。思い切ってテーマを変えるのもあり（カスタマイズしたCSS・HTMLはメモとかに保存してまたすぐに元に戻せるようにしておこう。それでノーリスクでテーマ変えれます）。
僕の使っているはてなブログテーマは「KOARA」です。知る人ぞ知る神テーマだと思っています。
※現在はカスタマイズの都合により別テーマにしています。
以上です。たぎでした！
次はこちら→記事一覧 - たきパーティ
