超初心者のはてなブログカスタマイズ ～ヘッダーに画像を入れたら謎の余白が登場した、の巻～
ようやくスタイルシートを修正できるところまでたどり着いたので、今日はブログの看板とも言えるヘッダ部分に画像を入れてみます！
ヘッダーはブログタイトルとサブタイトルが書いてあるいちばん上の部分です。
「デザイン」→「カスタマイズ」→「ヘッダ」の順に選択すると、「画像をアップロード」というボックスが登場。
「参照」から使いたい画像を指定します。
今回新たにトリノスのロゴマークを作ってみました。こちら！
これから自分の作品を販売する時にもパッケージ等に使えるものを考えました。だいぶ気に入ってます！このロゴの話はまた後日。
画像を選択するとこんな画面になります。背景が黒いけど、とりあえず気にせず左下の「適用」をクリック。
するとすぐに反映されます！
が！デカかった（笑）！はみ出しとるやないかーい（笑）！
タイトル画像をリサイズして再度アップロードすると、
今度はハマりました。ふぅ。
しかし、ブログタイトルのテキストがカブってます。取りましょう。「表示設定」の「画像だけ表示」にチェックを入れると、無事画像だけになりました。ふぅ。
が！しかし！
タイトル画像下に謎の空白が登場している！今気づいた！なんてこった！これも取りたい！
ここでやっとCSSの登場です！わー！
しかしワタクシ、なんの知識も持ち合わせておりません故、勘です。ここからはもう勘です。ヘッダーを修正しているわけだから、おそらくヘッダーなんちゃらとかタイトルなんちゃらみたいな記述があるだろうと探しました。そして発見！headerってヘッダーでしょ！blog-titleってまさにそれでしょ！勘が冴えてます！
むかーしむかし、ホームページビルダーなんてものを少し触ったことがあるので、marginとかの数値を修正すればいいことはなんとなくわかります。しかし今修正したいのはタイトル下の謎の余白…。
いや待てよ…これって謎の余白がハマってるんじゃなくて、デフォルトのタイトル部分の高さー（引く）使用画像の高さ＝謎の余白、なんじゃないの…？
じゃあ高さの指定をしてあげればいいってことか！
というわけでさっそくググります。
即発見。冴えてます。（グーグル先生が）
height: ●●px;
という記載を足すだけでOKとのこと！実践！
数値は100とかキリのいい数字にしとこーっと的な軽いノリです。
すると！
おおお！謎の余白が消えました！
適当に指定した100pxがいい具合にハマってる！冴えてる！
勘とむかーしむかしの霞んだ記憶でもここまではできました（笑）！
さあ！この後のカスタマイズも先人達の知識が無限に広がるWWWの海と、私の勘と霞んだ知識とコピペでいけるのか！続く！（※不定期更新）
※途中の画像からお試しブログID表示へのモザイクがなくなっていますが決してモザイク処理がめんどくさくなったなんていやそんなまさかそんなことないですお試しだしここで使ってるIDに数字つけただけだし別にいっかってなっただけですウソですめんどくさくなりました（礼）
※うまくいったので本家トリノス（ここ）に実装。2015/03/05/20:57
スポンサーリンク
