理系学生の茶の間のちゃ

理系学生の茶の間のちゃ

理系の私が日々の少し役に立ちそうなそうでもない情報をお届けします!

理系学生の茶の間のちゃ

【ブログカスタマイズ】ヘッダーの余白をなくして、きれいにしたい!

f:id:hyrasan:20170607004536p:plain

こんにちは、先日ヘッダーを変えて自分のブログ感を出してきたウタです。

 今回はヘッダーの余白問題に対処していこうと思います!

ヘッダーの記事ありがとうございます。

前回こんな記事を書いて色々な方にブックマークしていただきました。
本当に有難うございました。今後とも何卒よろしくお願い致します。

alcove.hatenablog.com

 

..............。

お気づきの方は鋭いですね。

 

ヘッダー変えました。(1日ぶり2回目)

f:id:hyrasan:20170606225324p:plain

少し色味を変えて、イラストを大きくしたところがポイントです。
以前に増して、文字を大きくすることによって印象を強めていく作戦ですね。

ちなみにヘッダーを変えた報告は本題に一切関係ありません。

 ヘッダーが全体に表示されずに変な空間が...

ここからが本題です。

f:id:hyrasan:20170607001313p:plain

ヘッダーを変更してから自分のブログを見て気づいたのですが、謎の空間ができてしまっています。

白ベースの人なら気にはなりませんが、

「”茶”だから緑色だろ!」

という安易な発想で背景をこの色にした私には大きな問題でした。

余白なく変更したい!

そうなると余白をなくピッチリと全体に画像を表示させたくなるものです。

この余白をなくしてヘッダーを表示させる方法は月無ことのはさんid:tukinasikotonohaこちらの記事が大変参考になりました!ありがとうございます!

www.tukinasikotonoha.com

 ここからは記事に書いてあるようにすすめて行くことで設定できます!

しかしここで問題が....

各ブログによって下記の3つは必ずソースの書き換えが必要となる。

  • ブログのトップページURL
  • ヘッダー画像のURL
  • ブログタイトル

ヘッダー画像のURL.....

画像URLってなんだ....?

まだまだ初心者ブロガーなので、 ヘッダー画像のURLというワードがわかりませんでした。

どうやら、はてなフォトライフから取れるようです。

f:id:hyrasan:20170607003536p:plain

自分がヘッダーにしたい画像を選択して....

f:id:hyrasan:20170607003635p:plain

画像を表示させたら、「イメージのアドレスをコピー」をします。
これで、画像のURLがクリップボードにあるので、コードの中の指定の場所に貼り付ければ完成です!

 

無事に、余白の無いヘッダーが作ることができました!

おわりに

まだまだ、知らないことだらけですが、少しずつ変えていこうと思います!!

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ
にほんブログ村

ブログランキング・にほんブログ村へ
にほんブログ村


デジモノ・ガジェットランキング