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