【はてなブログ】ヘッダー画像を横幅いっぱいに貼りたいとき
こんにちは、ポンコツ母さんこと、日和です。
今回は、はてなブログカスタマイズです。
色々カスタマイズありますが、わたしが一番手こずったのは、タイトルの設定。
タイトルの何が難しいかというと、
・ちゃんと枠内におさまらない
・余白ができる
という超難問。
色々先人たちの書いてくれたCSSをコピペさせてもらうも、なんかうまくいかない。。
自分の覚書になりますが、もし困ってる方がいたら、ちょっとでもお役に立てればと思います〜。
＊このブログは、はてなブログproで運営しています。
＊以下の画像は全てテスト用のサブブログです。
＊このブログは現在、『innocent』というテーマを使ってます。
グローバルメニュー（PCだと画面一番上の各メニュー表示・スマホだと画面左上の三本線）が設定しやすいこと、シンプルで見やすいという点が気に入ってます。
タイトル画像でオリジナリティを出そう
この画像をタイトルいっぱいに貼りたい！！と、思い立ちました。
画面サイズは1000×200で作ってます。（没タイトル画像）
いざ、貼ってみる！
デザイン＞カスタマイズ＞ヘッダ＞タイトル画像、から設定してみると。。。
あれ？なんか、思ってたんとちがう。
そこで、ググってみた。
ふむふむ、はてなフォトライフにあげた画像をコピペして、あれこれしたらいい、のね！
・・・・うん、よくわからん！！！
そこで、わたしが参考にさせていただいたサイトがこちら
こちらの「ブログのタイトル画像」という項目をそのままマネさせていただくと、
あら不思議！！ちゃんとタイトル画像が設定されるじゃありませんか！
ということで、下手な説明より実践あるのみ。
やってみよう〜。
ちょっとむずかしいけどHTMLとかやってみよう
はてなフォトライフにアップロードする手順から、HTMLのコピペまでは、モーリーさんのブログの通りに進めばOK。
とってもわかりやすいです。
モーリーさんありがとうございます！！
デザイン＞カスタマイズ＞ヘッダ下に、モーリーさんのHTMLをコピペします。
変更するのは、上半分です。
自分のブログのトップページアドレス、タイトル画像用URL、ブログタイトルを入力します。
モーリーさんの説明にもちゃんと書いているのですが、読まずにそのままコピペしてしまい、、冷や汗でした。
すみません。。みなさま、お気をつけください。
さて、「変更を保存する」を押して作業完了！！
見てみると。。。
できてないジャマイカ！！！
横の余白！！！
モーリーさんのブログにちゃんと拡大する方法としない方法と載っています。
例によって見てないとこうなります。
ということで、今度は横の余白を消します。（拡大しない方を選んだ場合）
消すというか、タイトル画像の背景色を先程のHTMLの中に書き込みます。
余白を画像と同化することで、横幅いっぱいに画像を貼ったように見せるの術。
でも、背景色なんて、薄い小豆色というか、薄めたココアみたいな色、としか言いようがない！色の名前なんてわからん！
なんて、色の名前が分からず困ったときは、こんな便利なツールを使おう。
今回は、イメージピッカーを使ってみました。
イメージピッカーのサイトを開いて、画像をアップします。
CSSではなく、デザイン＞カスタマイズ＞ヘッダ＞へッダ下です。すみません。
この薄ココア色は、＃cfb7b8というのですね。
これを先程のHTMLに書き込みます。
さあ、「変更を保存する」を押して、確認してみよう。
でけた！！！！
まとめ
苦労した分、できたときは感動です。
カスタマイズ、やりすぎると見辛くなりますが、ハマるとたのしい。
もし、ヘッダーでお困りの時は試してみてくださいね。
したっけまた。
