初心者でも簡単！ はてなブログ ヘッダーをカスタマイズしてみたよ！
いつもご覧いただきありがとうございます。トモです。
前回プロフィール画像をちょこっとカスタマイズしたことで、PC環境でのヘッダーのタイトル画像とイラストが被ってしっくりこないのでいじってみました。
改良したポイントは
プロフィール画像とヘッダー画像のイラストが同じようなデザインでやかましい点
（ 実は想定内でプロフ画像をパーカーからGジャンに変更してたけど、甘かった～笑 ）
使用させていただいているテーマ
【 SOHO 】のシンプルでオシャレなイメージはできるだけ崩さない。
もともとこのテーマ 【 SOHO 】は小洒落たショップブログや写真メインのブログなどスタイリッシュなブログにぴったりはまる感じと思うのですが...
僕のブログに、はまっているのか？
僕がセレクトしてることじたいイメージ崩れてる？ 笑
グローバルナビの設置と、詳しいプロフィールとお問い合わせ プライバシーポリシーをヘッダー下へ移植
どうもしっくりこないので元に戻します。
この３点を忘備録も兼ねてまとめてみました。
ヘッダー画像の変更
まずは イラストレーターで作った1000 × 200 サイズのヘッダー画像を何パターンか用意し設置してみます。
パーカーのイラストのを右から左へ持ってきただけの小細工
やっぱりやかましいので 却下！
悪くはないけど... なんかさびしい？ でも、やかましくはしたくないし…
そうだ、背景に色をつけて白の文字抜きの方が良くね？
う～ん…悪くはないけど ？ ？ ？
この時点で【 SOHO 】のスタイリッシュなイメージからは離れていってます 笑
背景色をヘッダー画像バックぱねると同色に変えてみれば？
【 デザイン 】→【 カスタマイズ 】→【 背景色】で確認しますが
もちろんデフォルトのカラーパレットにこの色はないので、
CSSのカラーコードを変更します。
変更の手順は
デフォルトのカラーパレットを開き、どの色でも良いので１色選択
適当にホワイトを選択しました。
選択することでCSSに選択したカラーコードがでてくるので、
そのコードを自分がつけたい色に書き換えてあげます。
【 デザイン 】→【 カスタマイズ 】→【｛ ｝デザインCSS】
この #fff ( ホワイトのHTMLカラーコード )を書き換えます。
カラーコードの取得
ヘッダー画像バックパネルのカラーコードを調べてみます。
こんな時便利なのがグーグルさんの「ColorPick Eyedropper」
chromeの拡張機能でが、仕事柄このアプリには普段からよくお世話になっています。
web上で気に入った色のコードを調べるのに重宝しますよ！
とりあえず「ColorPick Eyedropper」でコードを調べて書き換えましたが
この「ColorPick Eyedropper」微妙に合わない場合がよくあります。↓
これは、いただけませんよね～
他にカラーコードを調べるアプリもいろいろと有りますが、濃色の場合色あわせは
以外と面倒臭いので、背景色はこの色で良しとし、ヘッダー画像の方を改良します。
＊ちなみに色あわせなど必要なく背景色を好きな色に置き換える場合はHTMLカラーコードで検索すると
カラーパレットにカーソルを置くだけでコードを教えてくれるサイトがたくさんありますよ。
ヘッダー画像をPNG形式の画像ファイルに変換
バックパネル部をを透過させました。
これで画像サイズ1000 × 200 をキープでき背景の色の段差はなくなるはずです。
グローバルナビの設置
【 SOHO 】のカスタマイズページを参考に設置しましたが、
どうもこのブログにはしっくりこないので外しました。。
before
after
最後に
いかがでしょうか？
１時間ほどでできるプチカスタムですが、多少は個性が出たかなぁと...
これでしばらくは記事に専念できそうです。
あっ詳しいプロフィール作ったのでよければのぞいてみてくださいね。
たいして詳しくないですが…
