CriCri

クリエイティブになりたいクリクリ工房

カテゴリー「カスタマイズ　JavaScript」の記事一覧

« PREV
| HOME |
NEXT »

2025.01.22 [PR]
2010.09.25 Webstyle #02のドロップダウンメニュー　
2010.06.28 Webstyle #01の新ドロップダウンメニュー
2009.04.17 ドロップダウンメニュー
2009.03.07 メニューをボタンで切り替える
2009.02.02 画像のループ文

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

今回はWebstule #02の「blue light」「a tree」「カスタマイズ」「butterfly」に実装されているドロップダウンメニューです。
使用したのはMultilebel Droppdown Menu です。
このメニューのスクリプトは、上のサイトからダウンロードするといいです。
説明も書いてありますが、英語なのであしからず。

「Webstyle #1」シリーズに使用されているドロップダウンメニューのdroppyとよく似ていますが、ちょっと違うのはマウスをメニューの上に持ってきたときのリストの出方です。
droppyはピロンと下にでてくるけど、こちらのメニューは左上から右下へ向かって出てきます。
この出方が気に入って、「Webstyle #1」シリーズで使おうかと思ったけど、あれにはリストの出方が合わない。しかし今回のテンプレではしっくり馴染んでます。

HTMLの構成はどのメニューも同じです。
HTMLもCSSも「Webstyle #01」シリーズと基本は同じなのですが、向こうは幅指定のためのクラスがついていてややこしいので、あらためてこちらのテンプレート用にもう一度書きます。

例によってカスタマイズは長くなるので、メニューのカスタマイズをされたい方は追記からどうぞ。
注）HTMLやCSSはコピーして使えますが、説明のために色文字になっているので、念のために一度メモ帳にコピーしたものをもう一度コピーして貼り付けてください。

[4回]

・・・カスタマイズはこちら

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

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

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

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

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

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

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

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

[1回]

・・・カスタマイズはこちら

ドロップダウンメニュー

今回はWebstyle #01 シリーズに実装されている、ドロップダウンメニューのカスタマイズです。
このスクリプトはJavaScript Dropdown Menu With Multi Levelsを使用しました。
オリジナルはメニューの下のリストに、次のドロップダウンメニューが横に出てくる優れものなので、カテゴリーのツリー化をする時に最適です。
今回のテンプレートではその部分を削除してあるので、マルチレベルにしたい方はオリジナルをダウンロードするといいです（テンプレート使用スクリプトは一部変更してあります）

注）このスクリプトはIE8でマウスオーバー時にリンクの色が変化しないバグがあるのが発見されたため、2010年6月25日にjQueryのDroppyに変更しました。更新後のメニューのカスタマイズはドロップダウンメニュー #2を参照してください。

メニューは「最新記事」「カテゴリー」「アーカイブ」「コメント」「リンク」が標準装備されていますが、他のメニューにしたい方やメニューの数を変更したい方もいると思うので、ここで説明をします。
全部を表示すると滅茶苦茶長くなるので、追記に入れてあります。
唖然とする長さです（°_°；）

追記：３カラムを出したので、カッコの中に３カラムの数値を入れました。参考にしてください。

[0回]

・・・ソースを見る

メニューをボタンで切り替える

今回はメニューの切り替えのスクリプトをご紹介します。
これはプラグインの折りたたみの応用で、ボタンで二つのメニューが入れ替わる、一番簡単なやり方です。

ページが読み込まれた時には一番目のメニューがいつも表示されています。ボタンを押すと二番目のメニューに切り替わりますが、その時にボタンもMenu2 を表示するように設定しています。ボタンをもう一度押して一番目のメニューに戻れば、ボタンはMenu1を表示します。こうしておけば、今どのメニューを見ているのか一目瞭然です。

まずスクリプトのほうですが、<head></head> の中に入れます。
プラグインの折りたたみが基礎になっているので、よく似ています。

function hideshow(){
    divmenu1 = document.getElementById("menu-1");
    divmenu2 = document.getElementById("menu-2");
    changebtn = document.getElementById("btnHideShow");
    if(divmenu1.style.display == "block") {
            divmenu1.style.display = "none";
            divmenu2.style.display = "block";
            changebtn.value = "Menu 2";
        }
        else{
            divmenu1.style.display = "block";
            divmenu2.style.display = "none";
            changebtn.value = "Menu 1";
        }
    }

ここではボタンを押すと呼び出されるように、イベントハンドラをonclick にしています。
説明用に「南の島の仲間たち」のHTMLを持ってきました。ボタンはプラグインブロックの上に設置しています。
プラグインはメニューブロックを作って中に入れてやります。初期値として、スタイルでメニュー1をdisplay:block （可視）に、メニュー2をdisplay:none （不可視）に設定してあります。ここをスクリプトで書き換えるわけです。

<!--　========== プラグインブロック　========== -->
    <div class="PluginBlock">
      <div class="Menubtn">                     
        <input id="btnHideShow" type="button" value="Menu 1" onclick="hideshow()" />
      </div>

<!--　========== メニュー1 ========= -->
      <div id="menu-1" class="Menublock" style="display:block">           
(ここにプラグイン1とプラグイン2を入れる)
      </div>
<!--　========== メニュー1　エンド ========= -->

<!--　========== メニュー2 ========= -->
      <div id="menu-2" class="Menublock" style="display:none">
(ここにプラグイン3からプラグイン5までを入れる)
     </div>
<!--　========== メニュー2 エンド ========= -->

    </div>
<!--　========== プラグインブロック　エンド　========== -->

緑色がイベントハンドラ部分、赤色がスクリプトで変更されるところです。
保障はしませんが、使用は自由にされて結構です。

[0回]

画像のループ文

今回は猫テンプレで使用している、画像のループ文です。
数種類あるタイトルの画像が繰り返して表示されます。
完成品を探したけどそのまま使用できるものがなくて、改変や切り張りをしました。

このスクリプトは<head>と</head>の間、<title></title>の次に入れます。

    <head>
    ・
    ・
    ・
    <script type="text/javascript">
    <!--
    function changeBack(){
            j=0;
            divObj = document.getElementsByTagName("div");
            if(!divObj)return;
            for(i=0;i<divObj.length;i++){
                if(divObj[i].className=="EntryTitle"){
                    if (j%3) {
                        divObj[i].className = "EntryTitle" + (j%3)
                    }
                    j++;
                }
            }
        }
    -->
    </script>
    </head>
    <body onload="javascript:changeBack();">

これは記事のタイトル用に作ったものです。
プラグインの場合は"EntryTitle"のところを"PluginTitle"に変えてください。
ピンク色の箇所は画像の数です。画像の数をここに入れてください。
これで、クラスのEntryTitleがEntryTitle1、EntryTitle2というように変化していきます。
そしてJava Script をページの読み込み時に行使させるために、<body>に上記の緑色の部分を加えます。

あとCSSに画像を入れますが、0から数字が始まるので、EntryTitle {}、EntryTitle1 {}、EntryTitle2 {} というように番号を付けて、画像の数だけ指定をしください。
JavaScript が効かないブラウザは、最初のEntryTitle だけを表示します。
プラグインのタイトルの場合はPluginTitle {}、PluginTitle1 {}、PluginTitle2 {}といように番号を付けてください。

詳しい使用例は猫テンプレのソースを見ていただくとはっきり分かると思います。
機能の保障はしませんので、自己責任でお願いしますね。

[1回]