ファンブログ グローバルメニューを設定してみよう
スポンサーリンク
グローバルメニューを付けたい!という方のために、設置方法をご紹介します。
CSSやHTMLなどを編集するため、上級編となります。
また、ファンブログではカスタマイズによるサポートは対象外となりますので、
ご了承ください。
HTMLとCSSにメニューを追加します
【1】デザイン > HTMLを開き、「編集」もしくは「HTMLの追加」をクリックします。
【2】グローバルメニューを挿入したい場所に上記のソースを入れ込み「保存」します。
「#」の部分には遷移させたいURLを設置してください。
カテゴリーなどのメニューを追加し、URLを設置するとスムーズです。
入れ込み用ソース ※コピーして使ってください
1
2
3
4
5
6
7
8
|
< div id = "navi-bar" > < ul class = "menu" > < li >< a href = "#" target = "_blank" >メニュー1</ a ></ li > < li >< a href = "#" target = "_blank" >メニュー2</ a ></ li > < li >< a href = "#" target = "_blank" >メニュー3</ a ></ li > < li >< a href = "#" target = "_blank" >メニュー4</ a ></ li > </ ul > </ div > |
【3】デザイン>CSSの編集を開き、CSSの一番下に上記のソースを入れ込み「保存」します。
コメントアウト(/* */)が入っている部分をカスタマイズしてオリジナルのグローバルメニューの完成です。
入れ込み用ソース ※コピーして使ってください
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/* グローバルナビ */ #navi-bar { margin : 10px 0 ; /* グローバルメニューの余白を指定 上下 左右の順に指定 */ padding : 0 ; } #navi-bar ul.menu{ display :table; width : 100% ; table-layout : fixed ; border-collapse : separate ; /* メニューとメニューの間の余白を入れる */ border-spacing : 2px 0 ; /* 余白の大きさ指定 左右 上下 の順に指定 */ } #navi-bar ul.menu li{ display : table-cell ; text-align : center ; vertical-align : middle ; } #navi-bar ul.menu li a{ display : block ; text-decoration : none ; color : #ffffff ; /* 文字の色 */ font-size : 14px ; /* 文字の大きさ */ font-weight : bold ; /* 文字の太さ */ background-color : #666666 ; /* メニューの背景色 */ background-image : url (); /* メニューの背景画像 */ padding : 10px 5px 10px 5px ; /* メニューの余白 上右下左 の順に指定 */ } #navi-bar ul.menu li a:hover{ text-decoration : none ; background-color : #bbbbbb ; /* ロールオーバーした時のメニューの背景色 */ background-image : url (); /* ロールオーバーした時のメニューの背景画像 */ } |
カラーを変更したい場合は、webカラーピッカーなどから色を選択して指定してください。