ヘッダー画像とナビゲーションを横一杯に！【Minimalismカスタマイズ】

f:id:ahirufudosan:20190224151300j:plain

こんにちは！あひる不動産です。

皆さん、ブログカスタマイズは好きですか？

僕はパソコンが苦手にもかかわらず、どうしてもちょこちょこいじりたくなってしまうのです。今日はヘッダー周りのカスタマイズをまとめておきたいと思います。

なんか、いろいろややこしいけど・・・やりたい。オレンジ使いたい。

ヘッダーとナビゲーションを横一杯に広げる

参考にさせて頂いたのは、とてもデザインが僕好みなこちらのサイトです。

/* ヘッダーとメニューを横一杯に広げる */
#blog-title { /* ヘッダーのデザインを指定するid */
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}

#gnav {
/* paddingの追記とmarginの変更 */
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}

/* 横の線 */
#container {
border-right: none;
border-left: none;
}

これで、横一杯に広がると思います。

タイトル画像の上下を調整する

ヘッダー画像の上下が余分にでかかったんですよね。これが嫌でした。探してみたら、やられている方がいたので、参考にさせてもらいました。

yuzumochi.com

こちらのサイトを参考にさせて頂いてわかったのが、横一杯に広げた箇所で上下も調整できるということだったので、topとbottomを追加しました。下の赤文字を追加。

/* ヘッダーとメニューを横一杯に広げ上下を調整する */
#blog-title { /* ヘッダーのデザインを指定するid */
margin-left: -500%;
margin-right: -500%;
margin-top:0px;
margin-bottom:0px;
padding-left: 500%;
padding-right: 500%;
padding-top: 40px;
padding-bottom: 0;
}