アメブロにメニューバーをつけようと悩んだ事ありませんか？
きちんとしたブログサイトを見ていると、ほとんどのサイトでヘッダー画像の上か下にメニューバーが付いていますよね、
あのメニューバーを自分のブログにもつけてみたいって人は多いと思います、だけど、どう付ければ良いのかなかなか分からないですよね。
色々と調べて、見つけてみても、自分では出来そうにない方法で、手を出せなかったり、cssとかよく分からないからつけれなかったりと、二の足を踏む事になりやすいものです。
アメブロの設定を見ても付け方が書いていない
それではと公式であるアメーバーブログの設定、デザイン関係を探してみても、グローバルメニューに関する項目が見つかりません、そこに書いてあるのであれば最初から苦労はしないですしね、でも頑張って調べてみると、公式でブログカスタマイズに付いてメニューバーをつけるやり方的な記載はあったのですが、cssカスタマイズ可能テンプレートでしか使えないタイプのようだったので初心者向きでは無いと感じました、難しいのも面倒くさいのも嫌い！
それでもメニューを入れたいって人はコピペで簡単にメニューバーをつける方法を紹介したいと思います。
コピペで解決！簡単設置
あれだけ苦労したグローバルメニューを簡単につけられる方法があるんです！
下に記載しているソースコードをコピペするだけで、あなたのサイトにメニューバーが付いちゃいます。
色を変更するのが面倒って方の為にカラーバリエーションを作りましたのでご利用してみてください。
このソースは横幅980pxのテンプレートに合わせています、最新型のテンプレート、旧型のテンプレートだとサイズが合わないと思いますので、自分のアメブロのテンプレート（横幅）を確認してからご利用ください。
メニューバーをつける方法にはこの他に、cssにソースを追加する方法もありますが、ここでは一番簡単に設置出来る方法を紹介しております。
メニューの数が５個固定バージョンですが、気に入ったら使ってみてください。
淡いピンクのメニューバー
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;font-size:12px !important;}#navi ul {margin:0;padding:1px 0;list-style:none;}#navi ul li {margin:0;padding:0 0 0 1px;display:inline;width:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a {display: block;text-align: center;font-weight: bold;background-color:#ffffff;color:#ffc6ff !important;text-decoration:none;border:1px solid #ffc6ff;}#navi ul li a:hover {background-color:#ffc6ff;color:#ffffff !important;border:1px solid #ffc6ff;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}/* OFF */#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul {margin:0;padding:0;display: block;position: absolute;z-index: 100;}</style><div id="navi"><ul><li class="left"><a href="#">めにゅー01</a></li><li><a href="#">めにゅー02</a></li><li><a href="#">めにゅー03</a></li><li><a href="#">めにゅー04</a></li><li><a href="#">めにゅー05</a></li></ul></div>
ペースト後に変更するのはこの部分<a href="#">めにゅー01</a>この"＃"の部分にリンク先のアドレスを入れます、めにゅーと書いてある場所にリンク先の名前を書きます、「トップ」や「home」「このサイトに付いて」など目的にあった文を入れましょう、この変更をメニューの数５個分変更しますめにゅー01から05までですね。
淡いブルーのメニューバー
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;font-size:12px !important;}#navi ul {margin:0;padding:1px 0;list-style:none;}#navi ul li {margin:0;padding:0 0 0 1px;display:inline;width:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a {display: block;text-align: center;font-weight: bold;background-color:#ffffff;color:#a3e4ff !important;text-decoration:none;border:1px solid #a3e4ff;}#navi ul li a:hover {background-color:#a3e4ff;color:#ffffff !important;border:1px solid #a3e4ff;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}/* OFF */#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul {margin:0;padding:0;display: block;position: absolute;z-index: 100;}</style><div id="navi"><ul><li class="left"><a href="#">めにゅー01</a></li><li><a href="#">めにゅー02</a></li><li><a href="#">めにゅー03</a></li><li><a href="#">めにゅー04</a></li><li><a href="#">めにゅー05</a></li></ul></div>
ペースト後に変更するのはこの部分<a href="#">めにゅー01</a>この"＃"の部分にリンク先のアドレスを入れます、めにゅーと書いてある場所にリンク先の名前を書きます、「トップ」や「home」「このサイトに付いて」など目的にあった文を入れましょう、この変更をメニューの数５個分変更しますめにゅー01から05までですね。
落ち着き目のグリーンのメニューバー
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;font-size:12px !important;}#navi ul {margin:0;padding:1px 0;list-style:none;}#navi ul li {margin:0;padding:0 0 0 1px;display:inline;width:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a {display: block;text-align: center;font-weight: bold;background-color:#ffffff;color:#6fc487 !important;text-decoration:none;border:1px solid #6fc487;}#navi ul li a:hover {background-color:#6fc487;color:#ffffff !important;border:1px solid #6fc487;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}/* OFF */#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul {margin:0;padding:0;display: block;position: absolute;z-index: 100;}</style><div id="navi"><ul><li class="left"><a href="#">めにゅー01</a></li><li><a href="#">めにゅー02</a></li><li><a href="#">めにゅー03</a></li><li><a href="#">めにゅー04</a></li><li><a href="#">めにゅー05</a></li></ul></div>
ペースト後に変更するのはこの部分<a href="#">めにゅー01</a>この"＃"の部分にリンク先のアドレスを入れます、めにゅーと書いてある場所にリンク先の名前を書きます、「トップ」や「home」「このサイトに付いて」など目的にあった文を入れましょう、この変更をメニューの数５個分変更しますめにゅー01から05までですね。
落ち着き目のレッドのメニューバー
<style type="text/css">.skinContentsFrame{width:980px;margin:0 auto;position:relative;}.skinContentsArea{padding-top:60px;}.skinContentsArea2{margin-top:20px;}#navi {position:absolute;top:0px;left:0;width:980px;font-size:12px !important;}#navi ul {margin:0;padding:1px 0;list-style:none;}#navi ul li {margin:0;padding:0 0 0 1px;display:inline;width:195px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li.left {margin:0;padding:0;display:inline;width:196px;line-height:3.6;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a {display: block;text-align: center;font-weight: bold;background-color:#ffffff;color:#a30000 !important;text-decoration:none;border:1px solid #a30000;}#navi ul li a:hover {background-color:#a30000;color:#ffffff !important;border:1px solid #a30000;}#navi ul li ul li {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:195px;}#navi ul li ul li.left {display: block;margin:0;padding:0;position:relative;border-top:1px solid #ffffff;float: none;width:196px;}/* OFF */#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul {margin:0;padding:0;display: block;position: absolute;z-index: 100;}</style><div id="navi"><ul><li class="left"><a href="#">めにゅー01</a></li><li><a href="#">めにゅー02</a></li><li><a href="#">めにゅー03</a></li><li><a href="#">めにゅー04</a></li><li><a href="#">めにゅー05</a></li></ul></div>
ペースト後に変更するのはこの部分<a href="#">めにゅー01</a>この"＃"の部分にリンク先のアドレスを入れます、めにゅーと書いてある場所にリンク先の名前を書きます、「トップ」や「home」「このサイトに付いて」など目的にあった文を入れましょう、この変更をメニューの数５個分変更しますめにゅー01から05までですね。
これで完成メニューバー設置方法
このやり方はとても簡単、テンプレートの種類に関係無く設置できます。
まず管理画面から設定・管理を選びます、次にサイドバーの配置設定を選びましょう。
左の使用しない機能の欄にフリースペースがあると思います、そのフリースペースを使用する機能に移動させます
移動させましたか？では一旦、設定・管理に戻ります、設定・管理からフリースペースの編集を選びます
編集画面が出たと思います、ここに先ほどのソースコードを貼り付けましょう、
任意の場所を書き換えてからプレビューで確認して、問題がなければ保存を押します、
テンプレートによっては崩れる事もありますので、必ずプレビューで確認してから保存して下さい。
まとめ
結構、簡単に出来たと思います、うまく表示出来ない、リンクが貼れないって場合は<a href="#">の「"」が「”」に変わっていないか確認してください、またソースが途中で改行されているとエラーが起きる可能性がありますので、そこも確認して下さい。
グローバルメニューがつく事でただのブログサイトからきちんとしたホームページっぽく変わりますよね、サイトの印象がぐんっと良くなりますので是非メニューつけにチャレンジして下さい。
-ブログカスタマイズ
