Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】グローバルナビゲーションを付ける

【Seesaaブログ新デザインシステム】グローバルナビゲーションを付ける

Seesaaブログにグローバルナビゲーションを付ける
■Seesaaブログにグローバルナビゲーションを付ける
■注意点あり(おかしな表示になる部分がある)
■CSSとHTMLを編集  

今回の記事では、Seesaaブログの上部に「グローバルナビゲーションメニュー」を付けます。
「グローバルナビゲーションメニュー」は呼び方が色々あって、「グローバルナビ」「ドロップダウンメニュー」「ナビメニュー」とか、正確な呼び名がわかりません。これらの呼び方で何が違うんだろう?
まあ、要するに「メニュー」を付けようと思います。



ナビメニューを付ける方法を説明しようと思うと、すごく細かいことを書かなければいけないような気がするので、私が実際に使っているナビメニューを紹介します。
完成後はこのような感じのナビメニューになります。


編集後のイメージ
グローバルナビゲーションメニュー


見た目は問題はなさそうですが、このナビメニューを使うにあたり注意すべき点があります。
どういうものかを理解した上で「それでもいいよ」という場合のみ、下記で紹介するコードをお使いください。



ちなみにこのナビメニューは、参考にさせて頂いたサイト様のコード記述を、私が混ぜ合わせてめちゃくちゃにしてしまいました。もはや私自身も何がなんだかわからないです(笑)
まともなナビメニューを設置したい場合は、下記のサイト様の仰る通りにカスタマイズしてください。私のように「色々やってみよう」という精神でコードを編集すると、痛い目に遭うかもしれません。


アフィリエイトで稼ぐ方法を全部話そうと思う」様
Seesaaブログにグローバルナビを設置する方法【新システム】






グローバルナビゲーションメニューの注意点


グローバルナビメニュー(ドロップダウンメニュー)のCSSやHTMLを説明する前に、注意点を書いておきます。
欠点を知った上で使ってもかまわないという場合のみ、私が編集したナビメニューをご利用ください。



私は上記「参考サイト2」で紹介させて頂いた『Webpark』様の2つの記事を合わせてナビメニューを作りました。
『Webpark』様のメニューと大きく違う点は、ドロップダウンの幅(子メニューの幅)を親メニューの2倍に設定したことです。(『Webpark』様の記事では、多階層メニューの幅は全部同じ幅です)
子メニューの幅を親メニューの2倍にしたことで、ひ孫メニューの横幅が凄いことになってしまいました。(下記参照)



もちろん『Webpark』様はこのような編集について御存知ありませんし、私が参考にさせて頂いたことも御存知ありません。何も連絡していませんから。(なんか、すみません)
しつこいですが、こんなナビメニューになっちゃったのは、私が勝手に編集したからであり『Webpark』様は無関係です。(というか、上記で紹介しているリンク先に飛んで、素直に『Webpark』様の記事の通りにナビメニューを設定してください。もの好きな方のみ下記の編集結果を読めばいいと思います)



確かに欠点はありますが、何とかなるかな?と思って、私自身はこのナビメニューを使っています。(今後も使い続けるかどうかはわかりませんけれども)
制約部分さえ把握していれば問題はないと思いますが、もしかしたらその制約部分が面倒かもしれません。
なので決しておススメはしません。きちんと表示できる各サイト様のナビメニューを参考にしてください。



以下、とりあえず先に結論を書いてから、各問題点について画像を使って説明します。
このグローバルメニューには、5つの親メニューが設定されています。
もちろん6つでも7つでも好きなように設定してかまいませんが、私自身は5つで使っていますので、どういう結果になるのかは関知しません。
親メニューには左から「ABCDE」と振っています。
子メニュー、孫メニューも同じです。



ナビメニューを使うための注意点(まとめ)


先に結論から書いておこうと思います。
どこが問題なのか先に列挙してから、それぞれどういう状況になるのか詳細を書きます。



問題点(1)
左から4つ目の「親メニューD」に「孫メニュー」を設定するとブログの横幅から飛び出る
→これぐらいなら別にかまわないという人も居そうです。というか、「親メニューD」に「孫メニュー」を設定しなければいいだけですね、ハイ。



問題点(2)
「ひ孫メニュー」の横幅が短い
→横幅が短いのが嫌ならば「ひ孫メニュー」を設定しなければいいと思います。もしも設定するならば、短い言葉を表示すればいいです。



問題点(3)
「Internet Explorer 8」で見ると、5つ目のメニューがブログの横幅から飛び出る
→今どき、まだ「IE8」を使用している方が悪い、と責任転嫁すればいいと思います。


ん?そんなに問題ではなさそうですね(笑)



問題点(1)左から4つ目のメニューは孫メニューが飛び出る


ナビメニューでは、左から「親メニューABCDE」を設定していますが、「孫メニュー」を使いたいならば、左から4つ目「親メニューD」に注意してください。飛び出します。



とりあえず、各親メニューに対する「孫メニュー」の表示を画像で紹介します。
親メニュー「A」「B」「C」「E」の画像を掲載して、改めて「親メニューD」(問題があるメニュー)を説明します。


親メニュー「A」の孫メニュー
親メニューAの孫メニュー


親メニュー「B」の孫メニュー
親メニューBの孫メニュー


親メニュー「C」の孫メニュー
親メニューCの孫メニュー


親メニュー「E」の孫メニュー
親メニューEの孫メニュー


親メニューABCEの「孫メニュー」は普通に表示できていると思います。
で、これらの画像を見れば予想できると思いますが、左から4つ目の「親メニューD」の場合の「孫メニュー」は、こういうことになります。


親メニュー「D」の孫メニュー
親メニューDの孫メニュー


「孫メニュー」がブログの横幅から飛び出てしまいます。
これは、「子メニュー」や「孫メニュー」の横幅を、「親メニュー」の2倍サイズに設定したので、こういうことになります。
CSSで右端(つまり、親メニューの最後)には「折り返せ」という指示ができますが、「最後から2番目」に対する指示が出せません。出せるのかどうか知りません。調べるのも面倒です。



色々と考えたり調べたりするのは労力がいりますので、私はあきらめました。
「左から2番目(親メニューD)には孫メニューを設定しない」
と決めた上でナビメニューを利用すればいいと思います。


というか、別にブログの横幅から飛び出るのを気にしないのであれば、このままでもいいのではないでしょうか。(「孫メニュー」が見えなくなるわけではありませんので)



あ、この話は「孫メニューを設定するならば」のお話です。
「子メニュー」の話ではありません。



子メニューは問題なし


欠点ではないのですが、一応、書いておきます。
このナビメニューは「子メニュー」までは普通に使えます。おかしなことになるのは「孫メニュー」を左から4つ目に設置した時です。



もしも左から4つ目の「親メニューD」が「子メニュー」までしかなかったとしたら(つまり「孫メニュー」以下を設定していなかったら)、こういう感じです。何も問題はありません。


親メニューDの子メニュー



問題点(2)ひ孫メニューの横幅が短くなる


「ひ孫メニュー」を設定すると、こんなことになります。


ひ孫メニューを設定した場合

ひ孫メニューを設定した場合の画像


「ひ孫メニュー」の横幅が短くなってしまいました。
CSSで「孫メニュー」の横幅と「ひ孫メニュー」の横幅が同じ部分で指定されているためです。


と、私は思っていますが、本当にそうなのかは知りませんw
「孫メニュー」の横幅を「25%」に設定したので「ひ孫メニュー」の横幅が短くなってしまったと私は思っています。(調べるのが面倒くさいです)



この状況をどうにかしたいならば、「ひ孫メニュー」の表示文字数を少なくすればいいのではないでしょうか。(私自身は「ひ孫メニュー」を設定する予定がないので、どうでもいいですw)


あ、もしも「ひ孫メニュー」を設定するならば、「親メニューD」(左から4つ目のメニュー)には入れない方がいと思います。上記のように「親メニューD」はブログの横幅を飛び出した状態で「孫メニュー」が表示されるので、「ひ孫メニュー」を入れるともっと飛び出るかもしれません。(試していないのでわかりません)



問題点(3)「Internet Explorer 8」に対応していない


このメニューは「Internet Explorer 8」には対応していません。
使用しているタグ、コードが「IE8」に対応していないので仕方がありません。
(参考にさせて頂いた『Webpark』様も、同様の注意をされています)



私のナビメニューを「Internet Explorer 8」で見るとこうなります。


IE8で見た場合のナビメニュー


「Internet Explorer 8」の場合、CSSで記述している「last-child」が効かないので、5つ目のメニューがはみ出てしまいます。
「Internet Explorer 9」以上だと大丈夫です。意図したようになります。(「IE9」では動きがカクカクしますが、見た目は大丈夫です)
まだ「IE8」で見ている人もいると思いますので、どうしたいのかはご自分でお考えください。


私は、このご時世にまだ「IE8」を使っているような人のことは、切り捨てます(笑)
仕方がないですね。



ということで、問題だと思われる部分の説明をしました。
まあ、あんまり問題じゃないと思うんですけど、制約があることは確かなので、私が設定しているナビメニューを使用してもしなくても、どちらでもいいです。
とりあえず以下で、コード等の紹介をします。



Seesaaブログにグローバルナビゲーションを付ける


では、Seesaaブログにグローバルナビメニュー(ドロップダウンメニュー)を設置したいと思います。
始めにCSSを記述し、その後でHTMLにコードを追加します。
どちらも長文になりますが、そのままコピペすればいいので簡単だと思います。



CSS(スタイルシート)にコードを追加する


CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述を追加します。CSSの一番下でいいと思います。
(CSSの空いている部分に追加するだけなので、今回はコード画像は掲載しません)


<追加するコード>
/*** ナビ(ドロップダウンメニュー)
*****************************************************/

#navi-bar {
margin-top:0px;
padding:0px 15px;
}

/*** ドロップダウンメニュー全体 ***/
#dropmenu{
list-style-type: none;
width: 100%;
height: 40px;
margin: 15px auto 60px;
padding: 0px 0px;
background: #BDCDCD; /* タブの背景色 */
border-bottom: 5px solid #A1AEAE; /* タブ下の濃い線 */
border-radius: 3px 3px 0 0;
}

/*** 親メニュー(5つに分ける)***/
#dropmenu li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}

/*** 親メニューのリンク ***/
#dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #5C6976; /*親メニューの文字色*/
font-size: 14px;
line-height: 1;
text-decoration: none;
}

/*** 親メニューにマウスをあてた時の親メニューの背景色 ***/
#dropmenu li:hover > a{
background: #7e8888;
color: #B6BCC3;
}

/*** 子メニューにマウスをあてた時の子メニューの背景色 ***/
#dropmenu > li:hover li:hover > a {
background: #707070;
}

/*** 親メニューの上を角丸に ***/
#dropmenu > li:hover > a{
border-radius: 3px 3px 0 0;
}

/*** 親メニューを開いた時の右端の折り返し ***/
#dropmenu li:last-child ul{
left: -100%;
width: 100%
}

/*** 子メニュー全体 ***/
#dropmenu li ul {
list-style: none;
position: absolute;
z-index: 100;
top: 100%; /* メインメニューの真下に表示 */
left: 0;
width: 100%;
margin: 0;
padding: 0;
}

/*** 子メニューの幅 ***/
#dropmenu li ul li{
overflow: hidden;
width: 200%; /* 親メニューの2倍の横幅 */
height: 0;
color: #fff;
-moz-transition: .3s; /* メニューが出てくる速度 */
-webkit-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}

/*** 子メニューのリンク ***/
#dropmenu li ul li a{
padding: 13px 15px;
background: #7e8888; /* 子メニューの背景色(親と同じ) */
text-align: left;
font-size: 12px;
font-weight: normal;
color: #fff;
}

/*** 親メニューにマウスを乗せた時の子メニュー。不等号が抜けると孫もひ孫も一気に開く。***/
#dropmenu li:hover > ul > li{
overflow: visible;
height: 38px;
border-top: 1px solid #A2A5A8; /* 子メニューの間の線 */
}

/*** 子メニュー間の線の一番上の線削除 ***/
#dropmenu li:hover ul li:first-child{
border-top: 0;
}

/*** 子メニュー間の線の一番下の線削除 ***/
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}

/*** 一番下の子メニューの下の角を丸く ***/
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}

/*** 孫メニュースタートの位置(横に開かせる)***/
#dropmenu li ul li ul {
top: 0;
left: 100%; /* 右側に開かせる */
width: 25%; /* 孫メニューの幅 */
}

/*** 一番下の孫メニューの折り返し(横に開かせる)***/
#dropmenu li ul li:last-child ul {
left: 100%; /* 右側に開かせる */
width: 25%; /* 孫メニューの幅 */
}

/*** 孫メニュー右端折り返し ***/
#dropmenu li:last-child ul li ul {
left: -50%;
width: 25%;
}

/*** 孫メニューの背景色 ***/
#dropmenu li ul li ul li a {
background: #5F5F5F;
}

/*** 孫メニューにマウスをあてた時 ***/
#dropmenu li:hover ul li ul li:hover > a {
background: #5C6976;
}

/*** 孫メニューがあることを示す三角マーク ***/
#dropmenu li ul li ul:before {
position: absolute;
content: "";
top: 10px;
left: -30px;
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #D0D0D0;
}

/***メニューの三角マーク(折り返し。右端用)***/
#dropmenu li:last-child ul li ul:before {
position: absolute;
content: "";
top: 10px;
left: 600%;
margin-left: -40px;
border: 8px solid transparent;
border-right-color: #D0D0D0;
}


●id「navi-bar」がナビ全体、「dropmenu」がドロップダウンメニューです。
●ブログの幅を変更するかもしれないのでドロップダウンメニュー全体の「width」は「100%」にしました。
●このメニューは「親メニュー5つ用」です。なので親メニューの幅(dropmenu li)は5つに分けて「width」は「20%」です。(4つにするなら「25%」です)
●背景色などのカラーコードは好きな色に変更してください。
●孫メニューとひ孫メニューは同時に設定されているので、同じ表示(背景色など)になると思います。
●その他、どこの部分に対する指示なのかはコメントアウトしている「見出し」で判断してください。



HTMLにコードを追加する


HTMLを編集します。
管理画面の「HTML編集」画面を開き、「</header>」というタグを探します。
この「</header>」の下に、下記の追加するコードを全部、コピペします。


コードを追加する位置


<追加するコード>
<!-- ********** ナビ(ドロップダウンメニュー) 開始 *********** -->
<div id="navi-bar">
<ul id="dropmenu">
<li><a href="#">親メニューA</a>
<ul>
<li><a href="#">子メニューA1</a>
<ul>
<li><a href="#">孫メニューA1の1</a></li>
<li><a href="#">孫メニューA1の2</a></li>
</ul>
</li>
<li><a href="#">子メニューA2</a>
<ul>
<li><a href="#">孫メニューA2の1</a></li>
<li><a href="#">孫メニューA2の2</a></li>
</ul>
</li>
<li><a href="#">子メニューA3</a>
<ul>
<li><a href="#">孫メニューA3の1</a></li>
<li><a href="#">孫メニューA3の2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">親メニューB</a>
<ul>
<li><a href="#">子メニューB1</a>
<ul>
<li><a href="#">孫メニューB1の1</a></li>
<li><a href="#">孫メニューB1の2</a></li>
</ul>
</li>
<li><a href="#">子メニュ−B2</a>
<ul>
<li><a href="#">孫メニューB2の1</a></li>
<li><a href="#">孫メニューB2の2</a></li>
<li><a href="#">孫メニューB2の3</a></li>
</ul>
</li>
<li><a href="#">子メニュ−B3</a>
<ul>
<li><a href="#">孫メニューB3の1</a></li>
<li><a href="#">孫メニューB3の2</a></li>
<li><a href="#">孫メニューB3の3</a></li>
<li><a href="#">孫メニューB3の4</a></li>
</ul>
</li>
<li><a href="#">子メニュ−B4</a></li>
<li><a href="#">子メニュ−B5</a>
<ul>
<li><a href="#">孫メニューB5の1</a></li>
<li><a href="#">孫メニューB5の2</a></li>
<li><a href="#">孫メニューB5の3</a>
<ul>
<li><a href="#">ひ孫メニューB5の1</a></li>
<li><a href="#">ひ孫メニューB5の2</a></li>
<li><a href="#">ひ孫メニューB5の3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">親メニューC</a>
<ul>
<li><a href="#">子メニュ−C1</a>
<ul>
<li><a href="#">孫メニューC1の1</a></li>
<li><a href="#">孫メニューC1の2</a></li>
<li><a href="#">孫メニューC1の3</a></li>
</ul>
</li>
<li><a href="#">子メニュ−C2</a></li>
<li><a href="#">子メニュ−C3</a>
<ul>
<li><a href="#">孫メニューC3の1</a></li>
<li><a href="#">孫メニューC3の2</a></li>
<li><a href="#">孫メニューC3の3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">親メニューD</a>
<ul>
<li><a href="#">子メニュ−D1</a>
<ul>
<li><a href="#">孫メニューD1の1</a></li>
<li><a href="#">孫メニューD1の2</a></li>
<li><a href="#">孫メニューD1の3</a></li>
</ul>
</li>
<li><a href="#">子メニュ−D2</a></li>
<li><a href="#">子メニュ−D3</a>
<ul>
<li><a href="#">孫メニューD3の1</a></li>
<li><a href="#">孫メニューD3の2</a></li>
<li><a href="#">孫メニューD3の3</a></li>
</ul>
</li>
<li><a href="#">子メニュ−D4</a></li>
</ul>
</li>
<li><a>親メニューE</a>
<ul>
<li><a href="#">子メニュ−E1</a>
<ul>
<li><a href="#">孫メニューE1の1</a></li>
<li><a href="#">孫メニューE1の2</a></li>
<li><a href="#">孫メニューE1の3</a></li>
</ul>
</li>
<li><a href="#">子メニュ−E2</a></li>
<li><a href="#">子メニュ−E3</a>
<ul>
<li><a href="#">孫メニューE3の1</a></li>
<li><a href="#">孫メニューE3の2</a></li>
<li><a href="#">孫メニューE3の3</a>
<ul>
<li><a href="#">ひ孫メニューE3の1</a></li>
<li><a href="#">ひ孫メニューE3の2</a></li>
<li><a href="#">ひ孫メニューE3の3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- ********** /ナビ(ドロップダウンメニュー) 終わり *********** -->


●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。

●関係がわかるように「親メニュー」や「子メニュー」等の言葉をそのまま使っています。メニューの言葉が決まったら書き換えてください。

●「親メニューD」にも一応、孫メニューを入れています。実際に孫メニューを表示させた場合はブログの幅から飛び出してしまうことは注意点で書いていますので考慮してください。

●リンク先URLは「<a href="#">」の部分に記述します。「" "」は消さないように注意して「#」とリンク先URLを入れ替えてください。(その際「#」の文字は削除してください)

●これは例として掲載しているコードです。
もちろんこのままの構成でナビメニューを作成することはないはずなので(「親メニュー」や「子メニュー」等の言葉が入っていますから)、お好きなようにコードを編集してください。
コードの編集方法について、次の記事<■グローバルナビゲーションの編集方法>で少しだけ説明していますので参考にどうぞ。



コード編集後のHTMLと実際のページ


編集後のナビメニューのHTMLコード

実際のナビメニュー




次の記事の紹介

CSSとHTMLのコードを掲載しましたが、このままご自分のSeesaaブログにコピペすると、とりあえずグローバルナビゲーションメニューを設定できます。
でも、メニューの表示は「親メニューA」とか「孫メニューA1の1」などの単語になってしまうし、ご自分のブログの設定(カテゴリの数など)に合ったようなメニューにはなりません。HTMLを編集しないと使えないわけです。


グローバルナビゲーションメニューは、リストタグ「ul」や「li」を使います。ルールを知らないと「お好きなようにコードを編集してください」と言われてもよくわからないと思います。
次の記事でHTMLコードの編集方法を少しだけ説明していますので、とりあえずお読みください。説明が下手くそなのでよくわからないかもしれません。その時は、ごめんなさい。


【Seesaaブログ新デザインシステム】グローバルナビゲーションの編集方法
前回の記事で掲載したグローバルナビは、あくまでも「例」です。例えば、の話なので、ご自分のブログに合うように構成を変更して使ってください。コードには親メニューや子メニュー、孫メニューを設定していますので‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。