Jimdoナビゲーションカスタム

ナビゲーション関連のカスタムについて解説していきます。

ナビゲーションの幅を調整する

ナビゲーションの幅を調整してみましょう。

 

CSS:63行目

 

#navigation

{   

float:left;

width:220px;

padding:17px;
}

 

上記赤い部分がナビゲーションの幅です。

220pxとなっている箇所を変更して幅を調整してください。

 

ナビゲーションにアイコンを付ける

Jimdoのデフォルトのナビゲーションにはアイコンが付いていません。メニューを引き立てる役割としてアイコンを付けてみましょう。

 

CSS:111行目~119行目

 

下記のように変更します。

 

ul.mainNav1 li a{   

font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;   

text-decoration: none;   

display: block;   

color:#333;   

border-bottom:1px solid #CCC;   

background:url(アイコン画像ファイル名)no-repeat left;

}

ul.mainNav2 li a{   

font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;   

text-decoration: none;   

display: block;   

color:#333;   

border-bottom:1px solid #CCC;   

background:url(アイコン画像ファイル名)no-repeat left;

}

ul.mainNav3 li a{   

font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;   

text-decoration: none;   

display: block;   

color:#333;   

border-bottom:1px solid #CCC;   

background:url(アイコン画像ファイル名)no-repeat left;

}

 

Jimdoのナビゲーションには3段階の階層があります。

上層>中層>下層と分けられますので今回のカスタムは3段階それぞれ、

別のアイコンを設定することができるようにCSSを設定します。

.mainNav1・・・上層

.mainNav2・・・中層

.mainNav3・・・下層

すべて同じアイコン画像を設定してもOKですし、それぞれを変えてあげる事で

メリハリをつけたり雰囲気を変えることもできます。

 

これでナビゲーションのメニューにアイコンを付けることが出来ました。

 

[補足]

また、この箇所のカスタムでメニューの高さの調整などもできます。

 

ナビゲーションを横並びにする

もともと縦に並んでいるナビゲーションを横並びにします。

横並びにしてから、2階層目以降はサイドバーに表示するように設定します。

 

HTML(元のHTML)

 

<div id="navigation">

<var>navigation[1|2|3]</var>

<div id="sidebar">

<var>sidebar</var>

</div>

</div>
<div id="content">

<var>content</var>

</div>

 

HTML:元のHTMLを下記のように書き換えます。

 

<div id="navigation">

<var>navigation[1|2|3]</var>

</div>

 

<div id="wrapper">

<div id="sidenavi">

<var>navigation[1|2|3]</var>

<div id="sidebar">

<var>sidebar</var>

</div>

</div>

<div id="content">

<var>content</var>

</div>

</div>

 

CSS:元あるCSSに新たに追加した下記のCSS IDを追加します。

 

#wrapper{clear:both;}

#sidenavi{widht:220px;padding:17px;float:left;}

 

CSS:元あるナビゲーションに関するCSSを書き換えます。

 

/*  Navigation----------------------------------------------- */

ul.mainNav1,ul.mainNav2{

margin:0;padding: 0;

}

ul.mainNav1 li{

float:left;display: inline;

margin: 0;

padding: 0;

}

ul.mainNav2 li{

float:none;

margin: 0;

padding: 0;

}

ul.mainNav1 li a,ul.mainNav2 li a{

font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

display: block;

color:#333;

}
ul.mainNav1 li a {
padding:4px 4px 4px 4px;}

ul.mainNav2 li a {padding:4px 4px 4px 14px;}

ul.mainNav3 li a {padding:4px 4px 4px 24px;}

ul.mainNav1 a:hover{background:#EEE;color:black;}

ul.mainNav1 a.current { font-weight:bold; }
#sidenavi {

float: left;

width: 182px;

}

#sidenavi ul.mainNav1 li,

#sidenavi ul.mainNav2 li{

display: inline;

margin: 0;

padding: 0;

}

#sidenavi ul.mainNav1 li .level_1 {

display: none;

}

#navigation ul.mainNav2 {

display: none;

}

 

多少大掛かりな作り変え作業ですが、一度お試しください!

作り替えしたメニューには装飾が施されていないので、更に色をつけたり

枠をつけたりすることでメニューボタンのようにみせることができます。

 

 

ナビゲーション背景を画象にして画象ボタンのようにする

ナビゲーションに背景画象を設定します。

ボタン背景画像を2つ用意してマウスが乗った時に背景が切り替わり、

ボタンが押されたような効果を出してみましょう。

 

ボタン背景画像を2種類用意します。

通常ボタン背景

幅220px 高さ40px

画像ファイル名:menubg.jpg

マウスが乗った時のボタン背景

幅220px 高さ40px

画像ファイル名:menubgon.jpg


用意した2つのボタンをファイルからアップロードします。

 

次にボタンをCSSに埋め込んでいきます。

 

CSS:元のCSS

 

/*  Navigation----------------------------------------------- */
ul.mainNav1,ul.mainNav2{    margin:0;    padding: 0;}
ul.mainNav1 li,ul.mainNav2 li{    display: inline;    margin: 0;     padding: 0;}
ul.mainNav1 li a,ul.mainNav2 li a{    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;    text-decoration: none;    display: block;    color:#333;    border-bottom:1px solid #CCC;}

ul.mainNav1 li a { padding:4px 4px 4px 4px; }

ul.mainNav2 li a { padding:4px 4px 4px 14px; }

ul.mainNav3 li a { padding:4px 4px 4px 24px; }

ul.mainNav1 a:hover{    background:#EEE;    color:black;}
ul.mainNav1 a.current { font-weight:bold; }

 

CSS:入れ替えるCSS

オレンジ色の箇所にそれぞれマウスがのっていない状態(menubg.jpg)と

マウスが乗った状態(menubgon.jpg)の画象を入れ込みます。

横幅と縦幅を画象の大きさに合わせます。

 

/*  Navigation----------------------------------------------- */

#navigation li a{width:220px;height:40px;background:url(menubg.jpg)no-repeat;}

#navigation li a:hover{width:220px;height:40px;background:url(menubgon.jpg)no-repeat;}

ul.mainNav1,ul.mainNav2,ul.mainNav3{    margin:0;    padding: 0;}

ul.mainNav1 li,ul.mainNav2 li,ul.mainNav3 li{    display: inline;    margin: 0;     padding: 0;}

ul.mainNav1 li a,ul.mainNav2 li a,ul.mainNav3 li a{    font:normal 11px/40px Verdana, Geneva, Arial, Helvetica, sans-serif;    text-decoration: none;    display: block;    color:#333;}

ul.mainNav1 li a.level_1 { padding:0 0 0 10px;}

ul.mainNav2 li a.level_2 { padding:0 0 0 20px;}

ul.mainNav3 li a.level_3 { padding:0 0 0 30px;}
ul.mainNav1 a:hover{    background:#EEE;    color:black;}ul.mainNav1 a.current { font-weight:bold; }

 

これで完成です!

背景画像を変えてあげるだけで、いろんなナビゲーションを作ることができます。

ぜひお試しください。