アメブロテンプレ改造 メニュー幅を均等に設置する方法

アメブロテンプ改造 メニューの設置

アメブロのテンプレート改造です。

アメブロのスキンデザインでは、
メニューがついていませんよね。

メニューの幅を均等に設置する方法
解説していきます。

 

 

 

以前の記事でも書いたのですが、
メニューバーは、読者さんを誘導するために、
必要なカスタマイズです。

メニューは、ヘッダーの下につけたいものですが、
リストタイプの設置方法は、解説していましたよね。
テンプレ改造 メニューバーの設置

 

同じ要領で、メニュー項目が増えた場合など、
ビジネスブログのように、メニュー項目が均等になるように、
設置してみましょう。

 

ただし、メニュー項目があまり増えると、
読者さんを本当に誘導したいページには、
誘導することができません。

たいだい5個~7個くらいを目安に、設置するのがいいですね。

 

趣味ブログや日記ブログでは、
メニューバーは必要ないかもしれませんが、
トップページからの誘導は、やはりメニューバーがついている方が
読者さんには、親切です。

 

 

ブログの全体のバランスを見ながら、設置してみてくださいね。

 

メニュー項目を均等にしていないときは、
こんな感じです。

メニュー変更前

 

メニュー項目を均等に変更にした完成は、
こんな感じです。

メニューを変更

 

 

このサイトは、私のサンプルとして
いろんなカスタマイズの実験をしているブログです。

 

元のデザインスキンは、【CSS編集可能】なデザインスキンを使用しています。

 

メニューの設置方法(項目を均等にする場合)

メニューの設置は、このCSS部分の変更と、
フリープラグインを設置して完了します。

 

ヘッダーに合わせて、メニューの幅を決めるのですが、
サンプルブログでは、ヘッダーの幅が、980pxです。

 

アメブロの最近のデザインスキンは、
幅が広くて、みんなこの980pxです。

 

これを目安に、このヘッダーの幅をメニューの項目数で割るわけです。

 

5個ならば、1つが196px

7個ならば1つが140pxですね。

 

3個だと、326pxですが割り切れないので、
設置の余白を確保すれば、OKです。

 

※余り少ないと、バランスが悪いので、
均等にしないほうがいいかもです。

 

それでは、CSSを追加します。

 


/* +++++++++++++++++++++++++++++++++++++++++++++++++++
メニュー設定
+++++++++++++++++++++++++++++++++++++++++++++++++++ */
#wrap,.skinContentsArea{
padding-top:50px; /* メニュー設置スペースの確保 */

}

#headerMenu{
position:absolute;
margin:0;
padding:0;
}


#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}

#headerMenu ul.menu li{
display:inline;
}


#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}


#headerMenu{
width:980px;
height:35px;
top:0px;
left:0px;
background:#ffcc99;
}

#headerMenu ul.menu li {
line-height:35px;
font-size:12px;
font-weight:bold;
font-family: "メイリオ","Meiryo" ;
text-align:center;
}


#headerMenu ul.menu li a{
width:196px;
color:#ffffff;
float:left;
background:url(http://db.tt/qBU4srnc) no-repeat 35px 8px;
}

#headerMenu ul.menu li a:hover{
font-weight:bold;
width:196px;
text-decoration:none;
height:35px;
color:#ffffff;
background-color:#ffee99;
}

【マイページ】のサイドバーより【デザインの変更】をクリック

【CSS編集】のところの下の方に、CSSソース(コード)の記載がありますね。

/*メニュー設定 */ として、
まだメニューを設定していない方は、
CSSの最後に、下記ソース(コード)を追加してくださいね。

※ /* */ は、コメントアウトといって、説明などを記載する時に使うタグです。

 

 

いったんここで、保存します。

 

ブログを確認してもメニューは表示されません。

 

次にフリースペースに下記のソース(コード)を
追加します。

 

サイドバーの【フリースペース編集】をクリック。

上記のコードをコピーて、貼ってください。

 

<div id="headerMenu"><ul class="menu"><li><a href="ここにリンク先のURL" target="_blank">トップページ</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー2</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー3</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー4</a></li><li><a href="ここにリンク先のURL" target="_blank">メニュー5</a></li></ul></div>

 
 

フリースペースの注意点
改行や空白があると、うまく表示されません。
表示がされない時は、ソース(コード)を確認してくださいね。

 

ソースの貼りつけが終了したら、
保存をして、ブログを確認してください。

 

表示が出来ない場合は、F5キーを押下して、
更新してくださいね。

 

表示がうまくいったら完成です。
こんな感じです。

※画像をクリックするとサイトへ飛びます。

http://ameblo.jp/test-site2/

 

フリースペースに貼ったソース(コード)は、
項目の表示名とリンク先です。

 

後から、表示項目名とリンク先を追加してくださいね。

 

意外に設定が多いのですが、
基本的なことは、1つづのメニュー項目の幅です。

 

幅の指定を追加して、
レイアウト(余白など)を整えると、
等間隔のメニュー項目を並べることができます。

 

このCSSを応用して、メニュー項目を画像にしたり、
マウスを合わせた時のお色や画像を変えたりできます。

 

ぜひ、自分なりのカスタマイズに挑戦してみてくださいね。

 

メニューバーにも、ちょっとした工夫がしてある
素敵なテンプレートは、アメブロビズ2(AmebloBiz2)です。
あなたのブログも、すてきなブログに変身できますよ。

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ