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%に恨み辛みあると思うけれども、我慢して追加だ。道は開ける。
多分出来たはず！
ついでにメニュー増やしまくってしまった……(笑)！
さて、こんなところでボクはまたデザインテーマ作りに戻るとしよう。
みんなも良い、カスタマイズライフを。
それじゃあまた、ありがとうございます。
ばいばいばー。
