これ以前から気になってたのでようやくカスタマイズすることにしました。
ブログを続ければ続けるほどこの月別アーカイブの表示は長くなってしまうのでもう少し見栄えをよくしたいと思ってたんです。
そこで見つけたのがこの方法。
を参考にさせてもらいました。
りぃさん、いつもわかりやすい説明ありがとうございます。
この方法を使って、今まで表示されていた長い表示を短くしちゃいます。
（今回は月別アーカイブのみをプルダウン化します。）
やり方はいたって簡単。
1. プルダウン化するテンプレートに設置
最初に、月別アーカイブがあるテンプレートの<head>～</head>タグの間に以下を挿入します。
function MM_jumpMenu(targ,selObj,
restore){ //v3.0 eval(targ+".location='"+selObj.options
[selObj.selectedIndex].value+"'"); if (restore)
selObj.selectedIndex=0; }
<!-- プルダウンメニュー終了 -->
2. 月別アーカイブタグの修正
次に月別アーカイブのタグをプルダウン用に修正します。
<form name="pulldown_monthlyarchives">
<select name="menu" onChange="MM_jumpMenu('parent',this,
0)">
<option selected>月別過去ログ</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$> (<$MTArchiveCount$>)</option>
</MTArchiveList>
</select>
</form>
<!-- 月別アーカイブ終了 -->
「月別過去ログ」の部分は好きな文字に変えていいみたいですね。
3. スタイルシートを設定する
スタイルシートなしでももちろん表示されるのですが、やはり使った方が見栄えが良くなりますよね。(^^)
スタイルシート
width: 150px;
color: #000;
background: #fff;
padding: 1px;
font: normal 10px/140% tahoma;
}
うちのブログの場合、このままだとちょっとデザインが崩れてしまうので最終的にこんな感じに修正してみました。
みなさんもご自分のブログに合うように微調整してみてくださいね。(^^)
プルダウンメニュー
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex]
.value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
<!-- プルダウンメニュー終了 -->
月別アーカイブ
<form action="" name="pulldown_monthlyarchives" id="pull
down_monthlyarchives">
<select tabindex="30" name="menu" onchange="MM_jump
Menu('parent',this,0)">
<option selected="selected">月別過去ログ</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>">
<$MTArchiveTitle$> (<$MTArchiveCount$>)</option></MT
ArchiveList>
</select>
</form>
<!-- 月別アーカイブ終了 -->
スタイルシート
width: 120px;
color: #000000;
background: #ffffff;
padding: 1px;
margin: 5px;
font-size: 12px;
line-height: 180%;
}
これで保存、再構築すれば完成です！！
ちなみにこのカスタマイズの場合、問題点があって・・・。
1番目にhead内にjavascriptを設置してますが、これは文法上は良くないんですよね。
ある程度タグの修正はしたのですが、formタグのaction属性のURIが設定できなかったりします。
あともうひとつは月別アーカイブを表示しているすべてのテンプレートのhead内にプルダウンメニューのスクリプトを挿入しなくてはいけないというデメリットもあります。
たとえばうちのブログの場合ですとすべてのテンプレートで表示しているため
・メインページ
・アーカイブページ
・エントリーアーカイブ
・カテゴリーアーカイブ
・日付（月別）アーカイブ
のすべてにタグを挿入しないと動作しないんですね。
これだと動作が遅くなる可能性もありますよね。
というわけで、次回はこの方法を進化させてjavascriptを外付けする方法を紹介します。
+++ 関連記事 +++
|
コメント
ご紹介ありがとうございます(〃￣ー￣〃)
実は私はもうこの方法使ってなくて、Widgetの月別ドロップダウンってのに入ってたソースでやってます。
ご指摘の通り、テンプレート全部にスクリプトを書かないといけないのがネックで。
Widgetのやつだとプルダウンの下にスクリプトが書かれていたので
これをモジュール化したサイドバーに書けば修正箇所はひとつでいい！
と思い、そちらにしちゃいました。
あまりSEO頑張ってないからこれでいいやーって感じで(笑)
スクリプト外付けも良さそうですね(ﾟ∀ﾟ)！
★ りぃさん
りぃさん、こんにちは。(^^)
こちらからコメントしに行く前にコメントもらっちゃいましたね。(^^;)
ウィジェットは使い勝手良さそうですよね、導入してしまえば。
ただ、導入するまでのカスタマイズが大変そうだったのでちょっと後回ししてしまいました。（笑）
少しずつ手を入れてその間に3カラムのWidget Managerの使い方をマスターして、それからですかね〜。
テンプレートの軽量化にもなりそうなので頑張ってそこまで辿り着こうかと思ってます。
Widget、導入された時に便利そうだと思って使ってみたのですが
Widgetのテンプレートの内容変えて保存しても、再構築しないと反映されなくて・・・。
しかもすべてのページに関係する所だから、すべて再構築しないといけなくて大変でした。
それが嫌で、phpのモジュールに戻しちゃいました。
Widgetのみ再構築ができたら便利なんですけどね･･･(´・ω・｀)
★ りぃさん
りぃさん、お返事遅くなってごめんなさい！！(^^;)
いやいや、あの後もずっとWidgetManaerと格闘してましたよ。（笑）
ようやく設置してみたのでとりあえず他のカスタマイズをしながら様子みようと思ってます。
あとはカスタマイズ法をアップして・・・。
りぃさんが言うようにカスタマイズするのが面倒、再構築するのが大変っていうことになったらはずします。
そのときは・・・あとはPHP化するしかないですかね〜。（苦笑）