【カスタマイズ記録】ヘッダー画像作成&グローバルメニューあれこれ
こんばんは、パル子です！
前回に引き続き、カスタマイズの記録になります。
少しずつシャレオツデザインのサイトにしていくのだ！！
前回やったことはこちら↓
www.parucock.com
ブログのヘッダー画像を作ってみた
この前まではテキストのみで味気な〜〜い感じだったんですよね。ブログ名も冴えないし、紹介文もぱっとしないし、変えたい！と思っていました。
アイキャッチの作成ではないのですが、こちらのサイトさんがとっても分かりやすいです！
ロゴを作成してみた
こちらのサイトさんでロゴを作成しました。漢字対応のフリーフォントがたくさんあって楽しい。
次に使用した、Amazingly Simple Graphic Design Software – Canva にもお洒落な英字のフリーフォントが沢山あったのですが、ブログ名に漢字・ひらがな・カタカナを使用している私はこちらで作りました（笑）
ここで何パターンか作ったのち、あ、「パ」だけでいっか。となった。（いいのか？？）
背景色を透過したいので、ファイルは png で保存しました。
GIMP で透過処理
ご存知の方も多いかと思いますが、無料の画像編集ソフト『GIMP』！
私も愛用しております。今回は、操作に慣れているこちらのソフトで透過処理しました。
ネット上でも透過できるサイトがたくさんあるので、そちらを使っても良いと思います。
Canva を使ってみた
すごい〜〜！スマホのアプリちっく。沢山のテンプレートの中からサイズを選択できるのですが、私は、サイズはたしか800×200くらいで自分で設定して作りました。
フリー素材を適当に組み合わせる。
完成しました
Simple is Best！！！
えっ？？？？ 味気ないとか言ってたのに、シンプルすぎじゃね？？？とこれを読んでいる皆が思っていると思います。
いいんだべつに！！！「パル子でございま〜す」略して「パ」！「パの人」って覚えて貰えるように頑張るゾ！
ヘッダーへの挿入方法
前回も参考にさせて頂いた、こちらのブログを見ながら、タイトル下に画像を挿入します。
私は画像は拡大せず、左右の余白の色を画像に合わせて、余白を埋める形にしました。
ちなみに、こちらのサイトで、画像URLからカラーコードを得ることができます。
iromiru (イロミル) - 画像からカラーコード抽出便利サービス
と、ここで問題発生！
前回設定したドロップダウンメニューとヘッダー画像が被ってしまうという悲劇(;_;)
しかも、知識不足で直し方が分からない。
ということで、新しいメニューの設置方法を探す。（あきらめはやい）
新しいグローバルメニュー 設置してみた
参考にさせて頂いたのはこちら。とても分かりやすく説明されていて、カスタマイズもしやすかったです。
こんな感じになりました。
メニュー押した時。
押すとこんな感じで、でろでろーんって出てきます。
ヘッダーと記事の間にメニューが入って、バランスも良い感じです！
