忍者ブログ

CriCri

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

   

[PR]

×

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

デモランキングバナー

プルダウンメニュー

プラグインにプルダウンメニューが付いていないテンプレートにも、簡単にプルダウンメニューを付けられます。
このスクリプトはCustomize in Ninja Blog様からお借りしています。
他にもいろいろと使えるスクリプトを分かりやすく説明してくださっていますので、興味のある方は覗かれてみてください。

「月の華」以外はカスタマイズしやすいように、HTML の中に見出しを入れているのですが、初めてのテンプレートであった「月の華」にはそんな気配りなんて微塵もございません(汗)
比較的上のほうにプラグインのブロックがありますので、下のソースを参考にして探してください。

追記 : 「月の華」にもHTMLの中に見出しを入れました。これで見やすくなったと思います。

拍手[1回]


プルダウンメニューの付け方
まずテンプレート編集ページ右上のHTML で
<!-- ==========プラグインブロック ========== -->
を探します。
他の作者のテンプレートにはこの記載はありませんので、直接プラグインを探します。
プラグインの各ブロックは下のように記述されています。
<!--plugin1-->
        <div class="PluginInnerBlock">
            <div class="PluginTitle <!--$plugin_title_align-->">
            <!--$plugin_title-->
            </div>
            <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
            </div>
            <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
            </div>
            <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_footer_explanation-->
            </div>
        </div>
<!--/plugin1-->

<!--plugin2-->         <div class="PluginInnerBlock">             <div class="PluginTitle <!--$plugin_title_align-->">             <!--$plugin_title-->             </div>             <div class="PluginExplanation <!--$plugin_explanation_align-->">             <!--$plugin_header_explanation-->             </div>             <div class="PluginContents <!--$plugin_contents_align-->">             <!--$plugin_data-->             </div>             <div class="PluginExplanation <!--$plugin_explanation_align-->">             <!--$plugin_footer_explanation-->             </div>         </div> <!--/plugin2-->
これがplugin5 まで続きます。
プラグインのブロックとブロックの間、お好きな場所に次のソースを貼り付けます。
クラスを class="PluginInnerBlockPull に変えているので、CSSでプルダウンメニュー用にデザインできます。

カテゴリーの場合
    <!-- カテゴリー-->
        <div class="PluginInnerBlockPull">
            <div class="PluginTitle <!--$plugin_title_align-->">
            カテゴリー
            </div>
            <div class="Plugin_data_Pull">
            <script type="text/javascript">
            function change(myURI){
            if(myURI !="default"){
            window.document.location.href=myURI;
            }
            }
            </script>
            <form name="categoryMenu" id="categoryMenu">                
                <select name="selectcategoryMenu" id="selectcategoryMenu"
                onchange="change(this.form.selectcategoryMenu.value);">
                <option value="default">カテゴリー</option>
                <!--plugin_category-->
                <option value="<!--$plugin_category_link-->"><!--$plugin_category_title-->
(<!--$plugin_category_num-->)</option>
                <!--/plugin_category-->
                </select>                
            </form>
            </div>
        </div>
    <!-- /カテゴリー -->
月別アーカイブの場合
    <!-- アーカイブ -->   
        <div class="PluginInnerBlockPull">
            <div class="PluginTitle <!--$plugin_title_align-->">
            アーカイブ
            </div>
            <div class="Plugin_data_Pull">
            <script type="text/javascript">
            function change(myURI){
            if(myURI !="default"){
            window.document.location.href=myURI;
            }
            }
            </script>
            <form name="archiveMenu" id="archiveMenu">                
                <select name="selectarchiveMenu" id="selectarchiveMenu"
                onchange="change(this.form.selectarchiveMenu.value);">
                <option value="default">月別アーカイブ</option>
                <!--plugin_archive-->
                <option value="<!--$plugin_archive_link-->"><!--$plugin_archive_year-->年<!--$plugin_archive_mon-->月(<!--$plugin_archive_num-->)</option>
                <!--/plugin_archive-->
                </select>                
            </form>
            </div>
        </div>
    <!-- /アーカイブ -->
大体どのブラウザもフォームの枠は目立たない灰色になるのですが、IE6は枠の色が青くなるのでテンプレートによっては色が気になるかもしれません。
その場合は
#selectcategoryMenu{
    border:solid 1px #CCCCCC; (枠の色、薄い灰色)
    color:#447700;          (文字の色)
    font-size:12px;          (文字の大きさ)
}

#selectarchiveMenu{     border:solid 1px #CCCCCC;     color:#447700;     font-size:12px; }
をCSS(テンプレート編集ページ右下)のプラグインブロックの中に入れてください。
オレンジ色の所が変更箇所です。
上のCSSはA・K・I のもので、テンプレートによって指定は変わってきます。
それならコメントフォームの枠の色も気になるという方は、コメントブロックのフォーム指定の部分を変えてください。下のはA・K・I のものです。
.CommentForms{
    font-size:12px;
    border:solid 1px #CCCCCC;
    padding:0px 2px;
}
オレンジ部分が変更部分です。
デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

02 2017/03 04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]