ボタンなしのプルダウンをつくりたい！
【参考記事】 「はじめてのFC2ブログカスタマイズ」様：月別・カテゴリ別アーカイブのドロップダウンリスト化
今回は">カテゴリー・月別アーカイブ・最近のコメント・最近のエントリー・最近のトラックバック・リンクをプルダウンする方法を紹介します。まずどれをプルダウンするにも、必要な作業をします。
最初にテンプレートの設定からHTMLの編集を開きます。そして上の方にある</head>を探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
このブログの場合は・・・
title="<%nextentry_title>" /><!--/nextentry-->
</head>
<body>
この様になっていました。見つかったらこの</head>のすぐ上に下記のものをコピーして張りつけます。
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
このブログを例にすると、
title="<%nextentry_title>" /><!--/nextentry-->
<script type="text/javascript">
<!--
～～～～～～
//-->
</script>
</head>
<body>
この様に張りつけます。
ここまでが共通する作業です。できましたら更新をおして保存して下さい。
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定からカテゴリーの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="categories_archives" name="categories_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■カテゴリ別</option>
<!--category-->
<option value="<%category_link>">■<%category_name> : <%category_count></option>
<!--/category-->
</select>
</form>
書き換えたら変更を押して保存をします。これでカテゴリーがプルダウンになっていますので、自分のブログを見て確認して下さい。
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定から月別アーカイブの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="monthly_archives" name="monthly_archives" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■月別</option>
<!--archive-->
<option value="<%archive_link>">■<%archive_year>-<%archive_month> : <%archive_count></option>
<!--/archive-->
</select>
</form>
書き換えたら変更を押して保存をします。これで月別アーカイブがプルダウンになっていますので、自分のブログを見て確認して下さい。
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定から最近のコメントの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="rcomment" name="rcomment" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■コメント別</option>
<!--rcomment-->
<option value="<%rcomment_link>#comment<%rcomment_no>">■<%rcomment_name> - <%rcomment_month>/<%rcomment_day></option>
<!--/rcomment-->
</select>
</form>
書き換えたら変更を押して保存をします。これで最近のコメントがプルダウンになっていますので、自分のブログを見て確認して下さい。
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定から最新の記事の設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="recent" name="recent" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■エントリー別</option>
<!--recent-->
<option value="<%recent_link>">■<%recent_title> - <%recent_month>/<%recent_day></option>
<!--/recent-->
</select>
</form>
書き換えたら変更を押して保存をします。これで最新の記事がプルダウンになっていますので、自分のブログを見て確認して下さい。
※記事のタイトルが長すぎると、プルダウンも長くなってしまうので、そんな時はonchange="jumpmenu('parent',this,0)">の)"と>の間にstyle="width:150px;"と入れてみてください。（数字は自分の好きな大きさに変えて下さい）
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定から最近のトラックバックの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="rtrackback" name="rtrackback" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■トラックバック別</option>
<!--rtrackback-->
<option value="<%rtrackback_link>#trackback<%rtrackback_no>">■<%rtrackback_blog_name> - <%rtrackback_month>/<%rtrackback_day></option>
<!--/rtrackback-->
</select>
</form>
書き換えたら変更を押して保存をします。これで最近のトラックバックがプルダウンになっていますので、自分のブログを見て確認して下さい。
共通編の作業が終わってからこの作業をして下さい。
プラグインの設定からリンクの設定の変更を選んで下さい。そして上の方にあるHTMLを編集するを選択します。
そして開くとタグが書いてあると思いますが、それを全部削除して下記のものをコピーして張りつけてください。
<form id="link" name="link" action="">
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">■リンク</option>
<!--link-->
<option value="<%link_url>">■<%link_name></option>
<!--/link-->
</select>
</form>
書き換えたら変更を押して保存をします。これでリンクがプルダウンになっていますので、自分のブログを見て確認して下さい。
※リンクを新しい窓で開きたい人は、onchange="jumpmenu('parent',this,0)">の部分をonchange="window.open(this.options[selectedIndex].value)">と書き換えて下さい。
プルダウンの長さを変えるには、onchange="jumpmenu('parent',this,0)">の"と>の間にstyle="width:150px;"と入れてみてください。（数字は自分の好きな大きさに変えて下さい）
|
｜
｜- カスタマイズをしよう！ |
- Comment (0) |
- Trackback (0) |
- ▲
http://rgrg.blog61.fc2.com/tb.php/309-c6a9d58b
』をクリックするとメニューが開きます。
