はてなブログのヘッダー画像を横幅いっぱいにする方法教えてください!

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2022/05/26 22:39:58

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

.header-image-enable #blog-title #blog-title-inner {
    background-size: 100% 200px;
    background-position: initial !important;
}
他1件のコメントを見る
id:a-kuma3

もしよかったら、縦幅いっぱいにするのも教えてください。(無理なら大丈夫です)

縦の方は、元の方にサイズがバッチリ書いてある(200px)ので、そちらも変更する必要があります。

このコメントを書いている時点の「箱」の画像は縦が 512px なので、↓のようになります。

.header-image-enable #blog-title #blog-title-inner {
    height: 512px;
    background-size: 100% 512px;
    background-position: initial !important;
}

height を追加して、画像の│サイズを指定。

background-size の 2番目の数字も合わせる。

ただ、これだと画像がでかすぎて、初見の人がタイトル画像しか見えないことになります。

どちらかというとサイズに合わせた画像を用意するのが良いのではないかと思います。

画像が、200px を少し超える程度であれば、上記の方法でサイズ指定をしても良いかな、とは思いますが。

2022/05/26 22:53:04
id:NYANKO18

そうですね。わかりました。

回答ありがとうございました。

2022/05/27 21:47:48

その他の回答0件)

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

.header-image-enable #blog-title #blog-title-inner {
    background-size: 100% 200px;
    background-position: initial !important;
}
他1件のコメントを見る
id:a-kuma3

もしよかったら、縦幅いっぱいにするのも教えてください。(無理なら大丈夫です)

縦の方は、元の方にサイズがバッチリ書いてある(200px)ので、そちらも変更する必要があります。

このコメントを書いている時点の「箱」の画像は縦が 512px なので、↓のようになります。

.header-image-enable #blog-title #blog-title-inner {
    height: 512px;
    background-size: 100% 512px;
    background-position: initial !important;
}

height を追加して、画像の│サイズを指定。

background-size の 2番目の数字も合わせる。

ただ、これだと画像がでかすぎて、初見の人がタイトル画像しか見えないことになります。

どちらかというとサイズに合わせた画像を用意するのが良いのではないかと思います。

画像が、200px を少し超える程度であれば、上記の方法でサイズ指定をしても良いかな、とは思いますが。

2022/05/26 22:53:04
id:NYANKO18

そうですね。わかりました。

回答ありがとうございました。

2022/05/27 21:47:48
id:NYANKO18

もしよかったら、縦幅いっぱいにするのも教えてください。(無理なら大丈夫です)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません