width100%やってるよ!! ってなっている人のヘッダ画像横幅いっぱい作戦。

2日間そうなっていたボク。

やあみんな、裏方の人だよ。

神属性魔法少女ざれんちゃん、略してKMZCだよ。

散々調べても出てくるのは「width: 100%;」ばかり、それをやってもヘッダ画像は画面いっぱいに広がってくれない。
何故なのか？　そもそものそれを、書いてくれているブログが全然無いんだ。

これがビフォー。
はてなブログ。ブログ。ヘッダ画像。サイズ。
記事とサイドバーの大きさにすら合っていない。
画像ははてなブログ推奨の「1000×200」の物、ざれんくんの誕生日に無理矢理掛けて2カラムの合計サイズは「1129px」。本当は1月29日なのだけれども、129pxじゃあ何も出来なくなっちゃうからね、11月生まれになってもらったよ。

さて、この状況。
「はてなブログ　ヘッダ画像　横幅いっぱい」
なんて検索の予測にも出てくるので、それについての記事も沢山あるね。しかしどれを見ても上記の通り、100%にすりゃあいい、の一点張り。それじゃあ解決しないんだ。

100%の対象になる大枠を変えなくてはいけないのだ。

各々のデザインCSSを見てもらえればあると思うけれども「#container, #footer」の記述がある所。ここを広げてあげることで、ブログページ全体の広さの限界が変わるんだ。

@media (min-width: 1280px) {
#container,
#footer {
width: 100%;
}
}

こうするの。
ちなみにボクの作っているデザインの現状で、括弧内のピクセル数はそれぞれ違うから変えちゃわないようにね。
大枠を100%にしてしまうことで、何やろうとも画面全体まで広げられるぞ、という可能性を示してあげられるんだ。

@media (min-width: 1280px) {
#content-inner {
width: 1129px;
margin: 0 auto;
}
}

続いてこれ。
今度は無限の可能性を示した後に、しっかり釘を刺す作業。
「#content-inner」は、記事やサイドバーを表示する枠の大きさ。先程書いたようにボクの場合は、ざれんくんの誕生日＋10か月ピクセルにしているよ。
しっかり釘を刺したら本題だ。

<h1 class="biyonhead"> 
<a href="https://ashuraka-zaren.hatenadiary.com"> 
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/z/zaren_13/20240311/20240311230607.png" alt="神属性魔法少女ざれんちゃんのブログ「カマザチャ開発日記、」です。" width="100%">
</a>
</h1>

実は本題、デザインCSSじゃなくてヘッダのブログタイトル下に入力なんだ！　驚きだね。
これもボクの場合、だから各々変える所は変えよう。
classに関しては、横幅以外に編集したい項目がある時にデザインCSSで使う物だから、横幅いっぱいにするのが目的だったらあまり関係ないよ。
肝心なのは「img src=""」に自分がヘッダ画像として設定している画像のURLを入力して、最後に「width="100%"」を追加すること。散々失敗してきてwidth100%に恨み辛みあると思うけれども、我慢して追加だ。道は開ける。

多分出来たはず！
はてなブログ。ブログ。ヘッダ画像。サイズ。横幅。いっぱい。width. width="100%".
ついでにメニュー増やしまくってしまった……(笑)！