Blogger Labo：【Vaster2】ヘッダーナビ（メニューバー）のカスタマイズ

このページでは、Vaster2のヘッダーナビ（メニューバー）のカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


ヘッダーナビのカスタマイズ


ヘッダーナビ

PC版のヘッダーナビのCSS（主に使うもののみ）


 メニューバーの幅と背景色の設定 

.PageList{
   width:100%;　横幅（100%）
   background-color:$(headernavi.background.color);　背景色（テーマデザイナー設定）
}

 リンクボタンの設定 

.header-nav a{
   padding: 10px 20px;　ボタンの上下・左右の余白（10px 20px）
   font-size: 14px;　文字サイズ（14px）
   color:$(headernavi.font.color);　文字色（テーマデザイナー設定）
   background:$(headernavi.link.color);　背景色（テーマデザイナー設定）
   text-decoration: none;　文字の装飾（なし）
   display: block;
   transition:.3s;　時間的変化（3s）
}

 カーソル通過時のリンクボタンの設定 

.header-nav a:hover{
   background-color:$(headernavi.link.hover);　背景色（テーマデザイナー設定）
   color:$(headernavi.font.hover);　文字色（テーマデザイナー設定）
   text-decoration:none;　文字の装飾（なし）
}

※（）内は初期値

上記が Vaster2のヘッダーナビのCSSに説明を加えたもの。

基本的には「/*　ヘッダーナビ」で検索して、中身を書き変えれば好みに合わせて変更できる。

なお、ここに関しては全部理解できていないので、詳しくは説明できない。

また、スマホのメニューボタンは「.button-toggle{}」で設定していくことになる。

スマホ版のヘッダーナビのCSS


/*　レスポンシブデザイン
--------------------------------------------------- */

 メニューバーのスマホ表示 

.header-nav a{
   padding:20px 20px;　ボタンの上下・左右の余白（20px 20px）
   font-size:16px;　文字サイズ（14px）
}

※（）内は初期値

スマホ表示時のメニューバーの設定は、PC表示時とは別に設定されている。

「/*　レスポンシブデザイン」で検索し、これ以下の「.header-nav a{}」の内容を書き換えれば変更できる。

メニューバーの幅を広げる


※分かりやすいように背景色をグレーに設定

【方法】

・「.PageList{」で検索
・「.PageList{}」に「padding（内側の余白）」を設定する

備考：スタイルシートリファレンス（padding）

やっておきたい設定


スマホ表示時にヘッダーナビ内容を読み込ませないようにする


Vaster2で作ったサイトをスマホで表示すると、ページ切り替えごとにヘッダーナビの内容が表示される。

この表示は、CSSに以下の内容を書き加えると止めることができる。

/*　レスポンシブデザイン
--------------------------------------------------- */

 .grobal-navi{
   width:auto;
   display: none;　/*　ページ切り替わり時にヘッダーナビを表示させない　*/
}

【方法】

・「/*　レスポンシブデザイン」で検索
・レスポンシブデザイン以下の「.grobal-navi{}」の中に「display: none;」を書き加える

参考：あかりlog