この記事は、はてなブログで
とお悩みの方へ
わたしも簡単なHTMLがちょっとわかる程度で、CSSなどの難しいことはわからないカスタマイズ初心者ですが、
そんなわたしでもできた「ヘッダー画像周りのカスタマイズ方法」を、
備忘録がてらなるべくわかりやすく画像付きでまとめました。
同じテーマをご使用の方や、
カスタマイズで悩んでいる方に届けば良いなと思います(^^)♪
ヘッダー画像まわりの余白
▼ちなみにこのブログは、こちらのテーマを使用させて頂いております。
このテーマだけのことではないかも知れませんが、
はてなブログはだいたい、普通にヘッダーに画像を設定するとPCで見たときに横に余白があったりします。
（スマホで見る分には問題ないかも知れません）
わたしはこの白い部分も全部ヘッダー画像で埋まってくれた方が好みだし、
余白がない方が何となくお洒落な感じがするのでカスタマイズしたいなーと思いました。
いろいろ調べてみて、
「ヘッダー画像の大きさ自体を大きくして余白を消す方法」などもいくつか試してみたのですが、このテーマでは上手く表示できなかったので😇
別の方法にしてみることにしました。
余白の白い部分を画像の色と同じにして余白を埋めるという戦法です！
ヘッダー画像を用意する
ヘッダー画像はCanvaのテンプレートで作らせていただきました。
▼Canvaでのカラーコード取得法。
ヘッダー画像の背景のピンクの部分をクリックすると左上のカラーがピンクになります。そこをクリックすると、
現在使用中のカラーが出てきますので、そこをクリック。
その色のカラーコードが出ていますのでそれをコピーします。これで画像の色と背景の色を同じにします。
▼こちらでお好みの色を選んでもOK。
余白のカラー変更
▼コチラのコードの赤の部分に好きな色のカラーコードをいれて、
body{
background:#F4DADA;
}
デザイン＞ カスタマイズ＞ デザインCSSの枠内に貼り付けます。
白い部分がピンクになりました(^^)♪
反映しない場合は、なるべく他のコードよりも上の位置に貼り付けると良いらしいです。
▼このコードでも変わりました。
/* <system section="background" selected="F4DADA"> */
body{background:#F4DADA;}
/* </system> */
いろいろ調べては試して上手く行かずまた調べて…を繰り返してようやく上手くいったのですが、このコードをどこで見つけたのかわからなくなってしまいました…😇ｽﾐﾏｾﾝ
（これで合ってるのかわからないんですけど、selected="F4DADA"のところは#つけなくて良いのかな？^^;）
どっちのコードが合ってるのかわかりませんが、変わったからいっかー！という感じでやってますｗ
スマホで見切れる問題
スマホで見てみると、画像が画面に収まっておらず切れてしまっています。
コレもなんとかしたいので、
▼参考にさせていただきました。
こちらの記事に書かれている、
ヘッダー画像レスポンシブ対応のコードを入れると、
スマホでもPCと同じように表示されました(^^)♪
スマホから見るとちょっとタイトル文字が小さすぎるかな…？
その辺は、後で微調整していきたいと思います。
まとめ。
ここまで書いていてなんですが、
ピンクもいいけどモノトーンも捨てがたいんだよなぁ～とか、
涼し気なカラーも良いなぁとか、
悩みに悩んで２転３転、設定し直しています^^;
まだまだ気分で変わると思います😇
このように、
「ヘッダー画像と余白」を変えるだけでもグッとお洒落っぽさが出て、
ブログがワンランク上がったような嬉しさがありますので
ぜひ試してみて下さい！(^^)♪
最後までお読み下さり、
有難うございましたm(_ _*)m
20230730＠negi.
