【第9回】ブログ作成記録（ヘッダ画像編）
こんばんは。わいのり研究所です。
この度ヘッダのタイトル画像を変えてみました。
いかがでしょう？私は結構、気に入っています♪(*´ω｀*)
あと、ナビゲーションバー（メニューバー）を中央寄せにしました。
こんな感じになりました。きっとアインズ様もお喜びです♪
意外と、画像の調整に苦労しました。
苦戦その１．画像の幅問題！
まず苦戦したのは画像の幅です。
大きいままだとスマホ表示の時に横がはみ出ます（泣）
400×400でやっとスマホに収まりました。
画像は小さくなってしまいますが仕方ないです。
ただ、私はiPhone7Plusなのではみ出ないのかもしれません。
もし、はみ出てたら教えてください・・・
画像がもっと小さくなっちゃいますが・・・（泣）
でも、記事とかの画像は自動調整してくれるのに、タイトル画像は自動調整してくれないんですね。なにか方法があるような気がしますが。
苦戦その２．タイトル画像の余白問題！
次に苦戦したのは、デフォルトでは余白がありすぎて、バランスが悪くなってしまうということです。
画像の高さを調整したりしてみましたが、余白がありすぎでした。
これは「Innocent」のサイトに説明がありました。
タイトル画像を表示するときの「高さを変える」ことができると書いてあったので、それをCSSに記述して、高さを微調整して、今のバランスになりました！（拍手）
サブブログで何度試してもダメだったので諦めかけていましたが、いい感じに収まったときは気持ちよかったです♪
ナビゲーションバーを中央に
ナビゲーションバー（メニューバー）を中央寄せにするのは、CSSに書くだけだったので簡単でした。
このナビゲーションバーは「innocent」用だと思いますので、他のテーマで使えるか分かりませんが、参考に掲載しておきます。
最後に
今回のカスタマイズはこんな感じです。
この記事はこれだけですが、サブブログで他のテーマを試したり、不要な「jQuery」の記述を消して確認してみたりと、いろいろがんばりました。
次の記事では、今までのカスタマイズの総集編をしたいと思います。
では、今回もお付き合いいただきまして、ありがとうございました。
