CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
プルダウンメニュー
プラグインにプルダウンメニューが付いていないテンプレートにも、簡単にプルダウンメニューを付けられます。
このスクリプトはCustomize in Ninja Blog様からお借りしています。
他にもいろいろと使えるスクリプトを分かりやすく説明してくださっていますので、興味のある方は覗かれてみてください。
「月の華」以外はカスタマイズしやすいように、HTML の中に見出しを入れているのですが、初めてのテンプレートであった「月の華」にはそんな気配りなんて微塵もございません(汗)
比較的上のほうにプラグインのブロックがありますので、下のソースを参考にして探してください。
追記 : 「月の華」にもHTMLの中に見出しを入れました。これで見やすくなったと思います。
このスクリプトはCustomize in Ninja Blog様からお借りしています。
他にもいろいろと使えるスクリプトを分かりやすく説明してくださっていますので、興味のある方は覗かれてみてください。
「月の華」以外はカスタマイズしやすいように、HTML の中に見出しを入れているのですが、初めてのテンプレートであった「月の華」にはそんな気配りなんて微塵もございません(汗)
比較的上のほうにプラグインのブロックがありますので、下のソースを参考にして探してください。
追記 : 「月の華」にもHTMLの中に見出しを入れました。これで見やすくなったと思います。
プルダウンメニューの付け方
まずテンプレート編集ページ右上のHTML で
<!-- ==========プラグインブロック ========== -->
を探します。
他の作者のテンプレートにはこの記載はありませんので、直接プラグインを探します。
プラグインの各ブロックは下のように記述されています。
プラグインのブロックとブロックの間、お好きな場所に次のソースを貼り付けます。
クラスを class="PluginInnerBlockPull に変えているので、CSSでプルダウンメニュー用にデザインできます。
カテゴリーの場合
その場合は
オレンジ色の所が変更箇所です。
上のCSSはA・K・I のもので、テンプレートによって指定は変わってきます。
それならコメントフォームの枠の色も気になるという方は、コメントブロックのフォーム指定の部分を変えてください。下のはA・K・I のものです。
まずテンプレート編集ページ右上の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-->これがplugin5 まで続きます。
<!--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-->
プラグインのブロックとブロックの間、お好きな場所に次のソースを貼り付けます。
クラスを 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;
}
オレンジ部分が変更部分です。TRACKBACK
TrackbackURL


COMMENT