Webstyle #01の新ドロップダウンメニュー

Webstyle #01シリーズの更新版が公開されました。
今回の更新は拍手ボタンへの対応とともに、トップメニューの修正がされています。

更新以前のメニューは、IE8だとマウスをリンクに持っていっても色が変わらないバグがあるのですが、IE8は初期設定で忍者ブログを互換表示するように指定されているので、気がついていない人が結構いるかもしれませんね。しかしバグをそのままにもしておけないので、今回はメニューのスクリプトを完全に入れ替えることにしました。

使用したスクリプトはjQueryのDroppyです。
前のスクリプトではGoogle ChromeとSafariでプレビューが崩れていたのが、jqueryではまともに表示されるようになりました（喜）
やっぱりあの崩れはスクリプトのせいだったんだ・・・

そしてさらに、スクリプト入れ替えとともにメニューの内容も一新しました。
以前のメニューでは、最新記事は記事のタイトルだけしか出ませんでしたが、更新版では日付とカテゴリーも一緒に出ます。また、コメントリストにも記事タイトルと日付、コメント投稿者の名前が出るように変更。これで、だいぶ見やすくなったと思います。

リンクはリンク編集ページで編集されたリンクがリストに表示されます。
管理ページへのリンクをADMINに書き変えると、リストが出たときかっこよく見えますよ。
管理ページの左にある「リンクの編集」から編集ページに入れます。


さて、ここからはカスタマイズの話です。
ここからは非常に長くなるので、追記の中に入れています。
カスタマイズされたい方は、追記をクリックしてください。

注）カスタマイズにはHTMLの知識が必要です。
      ある程度勉強された方でないと難しいかもしれません。

まず、2カラムに使用されているメニューのHTMLとCSSを持ってきました。
メニュータイトルの全体幅は800px（3カラムは930px）、高さは30pxです。
メニューは下のようなHTMLでできています。

茶色がメニュータイトルで、緑と緑の独自タグに挟まれた部分がメニューリストになります。
最後のタイトルはHOMEで、タイトルをクリックするとブログのトップページへ移動するので、リストはありません。

<!-- ==========　トップメニュー ========= -->
<ul id="nav">
        <li><a class="MenuBox" href="#">新着記事</a>
          <ul class="First">
            <!--plugin_entry-->
            <li><a class="EntryList" href="<!--$plugin_entry_link-->"><span>&bull; <!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--> (<!--$entry_category-->)</span><br />
                 &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
            </li>
            <!--/plugin_entry-->
          </ul>
        </li>        
        <li><a class="MenuBox" href="#">カテゴリー</a>
          <ul>
            <!--plugin_category-->
            <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
            <!--/plugin_category-->
          </ul>
        </li>
        <li><a class="MenuBox" href="#">アーカイブ</a>
          <ul class="Archiv">
            <!--plugin_archive-->
            <li><a class="Arch" href="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</a></li>
            <!--/plugin_archive-->
          </ul>
        </li>
        <li><a class="MenuBox" href="#">コメント</a>
          <ul>
            <!--plugin_comment-->
            <li><a href="<!--$plugin_comment_link-->"><span>&bull; <!--$plugin_comment_year-->.<!--$plugin_comment_mon-->.<!--$plugin_comment_day--> / from:<!--$plugin_comment_name-->さん</span><br />
             &nbsp;&nbsp;<!--$plugin_comment_entry_title--> <!--if_comment_res--><img alt="返信あり" align="middle" src="http://bfile.shinobi.jp/emoji/V/88.gif" /><!--/if_comment_res--></a></li>
            <!--/plugin_comment-->
          </ul>
        </li>
        <li><a class="MenuBox" href="#">リンク</a>
          <ul>
            <!--plugin_link-->
            <li><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--if_link_img--><img src="<!--$plugin_link_img_link-->" border="0"><br><!--/if_link_img--><!--$plugin_link_title--></a></li>
            <!--/plugin_link-->            
          </ul>
        </li>
        <li><a class="MenuBoxEnd" href="/" title="ブログのトップページへ">HOME</a></li>
      </ul>
<!-- ==========　トップメニュー　エンド　========== -->

今度はメニューのCSSです。
参考としてskyの2カラムのCSSを持ってきました。
Mechanicsも同じCSSです。

/* メニューの基本指定 */
#nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:140%; 
}

/* メニュータイトル部分の基本指定 */
#nav {
    margin-top: -24px;
    width: 800px;
    height: 30px;
    border-top:solid 1px #D3D3D3;
    border-bottom:solid 1px #D3D3D3;
}

#nav a { display:block; }

#nav li {
    float:left;
    position:relative;
}

/* 各メニュータイトル部分の指定 */
#nav .MenuBox {
    width:123px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://bfile.shinobi.jp/5598/menu-01.gif);
    background-repeat:repeat-x;
    font-weight:bold;
    color:#777;
    border-right:solid 1px #CCC;    
}

/* 最後のメニュータイトル部分の指定 */
#nav .MenuBoxEnd {
    width:120px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://bfile.shinobi.jp/5598/menu-01.gif);
    background-repeat:repeat-x;
    font-weight:bold;
    color:#777;    
}

/* メニューにマウスを乗せたときの指定 */
#nav .MenuBox:hover,
#nav .MenuBoxEnd:hover {
    background-image: url(http://bfile.shinobi.jp/5284/menu_pushed-06.gif);
    color:#777;
}

/* リスト部分の基本指定 */
#nav ul {
    position:absolute;
    display:none;
    width: 220px;
    top:30px;
    left: -1px;
    border-top: solid 1px #CCC;
    border-right: solid 1px #CCC;
    border-left: solid 1px #CCC;
    background-color:#E3E3E3;
}

/* EarthとMechanicsのみに指定(両端にラインが来ない場合) */
#nav ul.First {
    left:0;
}

/* アーカイブのリスト幅（メニュー幅と同じ） */
#nav ul.Archiv { width: 133px; }

/*  各リストの指定 */
#nav li ul a{
    width:210px;
    height:auto;
    float:left;
    padding:3px 5px 2px;
    border-bottom: solid 1px #CCC;
    text-align: left;
    color: #555;
}

/* アーカイブのリスト幅 * /
#nav li ul .Arch{ width: 123px; }

/* リストにマウスが乗ったときの指定 */
#nav li ul a:hover {
    background-color: #AAA;
    color: #FFF;
}

/* 各記事リストの指定（別になくても誰も気がつかない）（＾＾；） */
#nav li ul a.EntryList { padding: 1px 5px 2px; }

/* リストの記事タイトルの上に来る日付等の部分  */
#nav ul a span {
    color: #888;
    font-size: 92%;
}

/* リストにマウスが乗ったときの日付等の部分の指定 */
#nav ul a:hover span { color: #F9FFFF; }

/* リンクリストに画像が使われているときの指定 */
#nav ul li img {
    margin: 0;
    vertical-align: top;
}

1. メニュータイトルの順番を変える
メニューの順番を変えるだけなら、下のHTMLを参考にして希望の部分を貼り替えるだけですが、変更するときは下記の2箇所に注意してください。

• Sky以外のテンプレートでは、一番左に来るリストにオレンジ色の部分（class="First"）を加えるのを忘れない でください。これは横にラインの入っているSkyと、入っていないEarthやMechanicsでのリストの見栄えを調整するための指定です。
• リストの幅が右横に広がって出てくるので、最後のメニュータイトルをリストの出ないHOMEにしています。もしも右端に他のメニュータイトルを入れる場合は、赤字部分のMenuBoxをMenuBoxEndに変更してください。そのまま使うと、メニュータイトルの右横にラインが出ます。

        <li><a class="MenuBox" href="#">新着記事</a>
          <ul class="First">
            <!--plugin_entry-->
            <li><a class="EntryList"  href="<!--$plugin_entry_link-->"><span>&bull;   <!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day-->  (<!--$entry_category-->)</span><br />
                  &nbsp;&nbsp;<!--$plugin_entry_title--></a>     
            </li>
            <!--/plugin_entry-->
          </ul>
        </li>     

2. 全く別のメニュータイトルを持ってくる
標準実装されているメニューとは別のメニューを持って来たい場合、メニュータイトルの下に出るリスト部分も一緒に変更しなければなりません。
上のHTMLの茶色がタイトル部分です。タイトルの「新着記事」のところを新しいタイトルに変更した後は、緑から緑までのリスト部分を変更します。、「プラグイン設定」ページのプラグインのHTML編集ページに各プラグインのHTMLが書いてあるので、これを貼り付けます。
どのプラグインにも緑部分のような独自タグがついています。
これはプラグイン内容を繰り返して表示するスクリプト呼び出しタグなので、これがなかったり貼り付け る場所を間違えるとプラグインが表示されなくなるので気をつけてください。

「最古記事」の場合
下は「最古記事」のプラグインHTMLです。
最古記事の場合は緑の部分だけコピーして張り付けるだけなので簡単です。

<!--plugin_entry_old-->
<div class="plugin_data">
<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>
</div>
<div class="plugin_data_date">(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</div>
<!--/plugin_entry_old-->  

上の緑の部分をメニューのHTMLに貼り付けると下のようになります。
最古記事をメニューに持って来たい方は、このままコピペして使えます。

        <li><a class="MenuBox" href="#">最古記事</a>
          <ul>
            <!--plugin_entry_old--> 
            <li><a href="<!--$plugin_entry_link-->"><span>&bull;   <!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day-->  (<!--$entry_category-->)</span><br />
                  &nbsp;&nbsp;<!--$plugin_entry_title--></a>     
            </li>
            <!--/plugin_entry_old-->
          </ul>
        </li>  

「最新トラックバック」の場合
トラックバックの場合は一仕事必要なので、直接変更後のHTMLを持ってきました。
下のHTMLをコピペして、希望するメニューの位置に貼り付けてください。

        <li><a class="MenuBox" href="#">トラックバック</a>
          <ul>
            <!--plugin_trackback-->
            <li><a href="<!--$plugin_trackback_link-->"><span>&bull; <!--$plugin_trackback_year-->.<!--$plugin_trackback_mon-->.<!--$plugin_trackback_day--> by <!--$plugin_trackback_blog_title--></span><br />
                  &nbsp;&nbsp;<!--$plugin_trackback_entry_title--></a>     
            </li>
            <!--/plugin_trackback-->
          </ul>
        </li>

3. リスト部分の幅を変える
メニューの下に出てくるリストの幅は、記事やカテゴリー、リストのタイトルが少し長くても1行になるように幅広にしてあります。タイトルの長さはそのときによって変わってくると思うので、少し幅広めにしておくのをお勧めしますが、もう少し幅を広くしたかったり狭くしたいときは、下のCSSを変更してください。
「リスト部分の基本指定」では、リストの容器の指定を、「各リストの指定」ではその中身を指定します。
ピンク色が幅の指定ですが、padding指定がある場合はその横幅も計算に入れてwidthに幅を指定します。（下のpaddingは両幅を指定しています）
中身の部分にmargin指定してborder指定をすると、各リストがボックスになります。

/* リスト部分の基本指定 */
#nav ul {
    position:absolute;
    display:none;
    width: 220px;
    top:30px;
    left: -1px;
    border-top: solid 1px #CCC;
    border-right: solid 1px #CCC;
    border-left: solid 1px #CCC;
    background-color:#E3E3E3;
}

/* 各リストの指定 */
#nav li ul a{
    width:210px;
    height:auto;
    float:left;
    padding:3px 5px 2px;
    border-bottom: solid 1px #CCC;
    text-align: left;
    color: #555;
}

4. ひとつのメニューだけリスト幅を変える
メニューと同じ幅にするなら、アーカイブの指定をそのままそのメニュータイトルのHTMLに付け加えるだけで済みます。下のピンク色の部分を、希望するメニューの部分に貼り付けてください。

        <li><a class="MenuBox" href="#">アーカイブ</a>
          <ul class="Archiv">
            <!--plugin_archive-->
            <li><a class="Arch" href="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</a></li>
            <!--/plugin_archive-->
          </ul>
        </li>

その他の場合は、新しくセレクタ名をつけて独自に指定することになります。
下に例として160px幅のセレクタを新しく作ってみました。セレクタの名前はどんな名前にしてもかまいません。
基本指定はそのままなので、変更する幅指定だけをします。
この指定をCSSに貼り付け、上のHTMLを参考にして、幅を変更するメニューのHTMLに貼り付けます。

#nav ul.short { width: 160px; }

#nav li ul .shrt{ width: 150px; }

5. メニューの数を変更する
下のHTMLのピンク色部分を見るとわかりますが、メニュータイトルから次のメニュータイトルまでがひとつのブロックです。
メニューを減らす場合は必要ないブロックを削除し、メニューを増やす場合はブロックを付け加えます。
新しいブロックの作り方は2番を参考にしてください。
EarthとMechanicsでは、一番左に来るリストにオレンジ色の部分を加えるのを忘れないでください。1番で説明しましたが、これは横にラインの入っているSkyと、入っていないEarthやMechanicsでのリストの見栄えを調整するための指定です。

       <ul id="nav">
        <li><a class="MenuBox" href="#">新着記事</a>
           <ul>
             <!--plugin_entry-->
             <li><a  href="<!--$plugin_entry_link-->">&bull; <span><!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--> (<!--$entry_category-->)</span><br />
                 &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
             </li>
             <!--/plugin_entry-->
           </ul>
         </li>        
        <li><a class="MenuBox" href="#">カテゴリー</a>
          <ul>
            <!--plugin_category-->
            <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
            <!--/plugin_category-->
          </ul>
        </li>

       /* sky以外の一番左のリスト */
        <li><a class="MenuBox" href="#">新着記事</a>
          <ul class="First">
            <!--plugin_entry-->
            <li><a class="EntryList" href="<!--$plugin_entry_link-->"><span>&bull; <!--$plugin_entry_year-->.<!--$plugin_entry_mon-->.<!--$plugin_entry_day--> (<!--$entry_category-->)</span><br />
                &nbsp;&nbsp;<!--$plugin_entry_title--></a>    
            </li>
            <!--/plugin_entry-->
          </ul>
        </li>  

HTMLのブロックを増やしたり減らしたあとは、CSSでメニュータイトルの幅とともにメニュータイトルと同じ幅のリストの幅も変更することになります。

全体の幅は800pxです。メニュータイトルが6個なら800÷6で133.333・・・になるので、メニュー幅を134pxにします。そこからpaddingの幅5px×2=10pxを引き、右側に来るラインの1pxを引いた数字（123px）がwidthの値になります。
一番右側のメニューの計算は800px-(5×134px)=130pxとなるので、paddingの幅（2×5px）を引いた120pxがwidthの値になります。

/* メニュータイトル部分 */
#nav .MenuBox {
    width:123px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://bfile.shinobi.jp/5598/menu-01.gif);
    background-repeat:repeat-x;
    font-weight:bold;
    color:#777;
    border-right:solid 1px #CCC;    
}

/* 一番右側のメニュータイトル */
#nav .MenuBoxEnd {
    width:120px;
    height:20px;
    padding:7px 5px 3px;
    background-image: url(http://bfile.shinobi.jp/5598/menu-01.gif);
    background-repeat:repeat-x;
    font-weight:bold;
    color:#777;    
}

リスト部分の幅を変更したメニュータイトルの幅に合わせる場合、幅広リストの指定には手を入れずに別個に幅だけを指定をします。アーカイブは短いので、メニュータイトルの幅と一緒に変更することになると思います。他のタイトルでもメニュータイトルとリストの幅を同じにする場合は、このセレクトをHTMLに入れてやればいいです。

上の計算でタイトル幅が134pxになった場合、タイトルの右横に1pxのラインがあるのでこれを引いた値の133pxをリストの容器に指定します。
次にリストの中身ですが、これは基本指定のpaddingに左右幅5pxが指定されているので、133pxから10pxを引いた値の123pxを指定します。
これで、メニューの下に出てくるリストが同じ幅になります。

/* リストの容器部分の基本指定（幅広） */
#nav ul {
    position:absolute;
    display:none;
    width: 220px;
    top:30px;
    left: -1px;
    border-top: solid 1px #CCC;
    border-right: solid 1px #CCC;
    border-left: solid 1px #CCC;
    background-color:#E3E3E3;
}

/* メニュータイトルと同じ幅 */
#nav ul.Archiv { width: 133px; }

/* リストの中身の基本指定（幅広） */
#nav li ul a{
    width:210px;
    height:auto;
    float:left;
    padding:3px 5px 2px;
    border-bottom: solid 1px #CCC;
    text-align: left;
    color: #555;
}

/* メニュータイトルと同じリスト幅 */
#nav li ul .Arch{ width: 123px; }

6. リストを出さずにタイトルにリンクをつける
メニュー右端のHOMEは、メニュークリックでブログのトップページに行きます。
「初めに」や「about」など、ブログや管理人を紹介、説明する特定の記事にリンクをつけたい場合はこの部分のHTMLをコピーして、一部を変更すれば簡単です。

赤字のMenuBoxEndは右端のメニュー用。他の場所はMenuBoxにしてください。
緑色がメニューに表示されるタイトルです。
青地はマウスをタイトルに持っていくと出てくる説明です。必要なければ削除してください。
このHTMLを、リストブロックが入る場所に貼り付けてください。

       /* HOME部分のHTML */
        <li><a class="MenuBoxEnd" href="/" title="ブログのトップページへ">HOME</a></li>

       /* 一番最初の記事にリンクする場合 */
        <li><a class="MenuBox"  href="/Entry/01/" title="初めに読んでください">はじめに</a></li>

7. マウスを乗せたときのEarthのリストの文字色を変える
新メニューでは、Earth以外はリスト部分の背景色が変わるようになっています。
Earthでも同じ効果を出したいときは、下記のCSSを変更してください。
ピンク色の部分が変更箇所です。一番下の指定はErthには入っていないので、コピーして貼り付けてください。
もしも、効果はこのままでリンク文字の色だけ変えたい場合は、緑色の部分の値を変えれば他の色になります。

/* Earthの指定 */
#nav li ul a:hover {
    color: #39F;
}

/* SkyとMechanicsの指定 */
#nav li ul a:hover {
    background-color: #AAA;
     color: #F9FFFF;
}

#nav ul a:hover span { color: #F9FFFF; }

8. 特定のカテゴリーに直接リンクをつける
カテゴリーは標準でリストになって出てきますが、小説やイラストなど、ある特定のカテゴリーをメニュータイトルに直接リンクしたい場合は、まずそのカテゴリーのID番号を調べなければなりません。

1. プラグイン、またはメニューからリンクしたいカテゴリーを選んでクリックします。
2. そのカテゴリーのページが出てきたら、そのページのURLを見ます。
3. http://*****.blog.shinobi.jp/Category/5/ というようなURLになっていますが、この一番最後の番号がそのカテゴリーのID番号です。

カテゴリー番号が5なら、HTMLのリンク部分を href=" /Category/5/ " とし、タイトルにはそのカテゴリーのタイトルを書き込みます。

基本
        <li><a class="MenuBox" href="/Category/1/" title="カテゴリー1へ">カテゴリー1</a></li>

カテゴリー5がイラストなら
        <li><a class="MenuBox" href="/Category/5/" title="イラストページへ">イラスト</a></li>

以上、思いつくカスタマイズを書き出しました。
ここにはないカスタマイズをしたい場合、私でわかることでしたら協力いたします。
なお、一応気をつけて書いたつもりですが、どこかに誤りがありましたらご連絡ください。
いつもながら、すっごく長くて書くのも疲れました。
でも懲りずに、またメニュー付きをそのうち出すつもりです（＾＾；）