<< サブカテゴリ風表示(ツリー化) | TOP | カテゴリ名を画像表示 >>

月別アーカイブのプルダウン化
月別アーカイブ当記事は過去のものです。
現在、月別アーカイブリストは載せていません。

アーカイブリストをリストで羅列すると恐ろしく長くなるので、希望は折りたたみ。
プルダウンメニュー化するのを前提でカレンダーの下に置きました。

これもスクリプトで制御。もちろん余所様から拝借ですたらーっ
JUGEMカスタマイズ講座さんの「リストのプルダウンメニュー化」をお借りしました。
(サーバーが不安定なご様子…)

ちなみに、このスクリプトだけで他のリストもプルダウン化可能(個々の設定は必要)ですが、必要ないので今回はアーカイブリストのみ設定しました。

以下、もしものリンク先消滅の保険のため、スクリプト保存。
(1)アーカイブリストタグ{archives_list}を修正
<div id="archivelist">{archives_list}</div>
(2)</body>直前にスクリプト挿入
<script type="text/javascript">
<!--
ListSelector('archivelist',1,'月別アーカイブ'); /* アーカイブリストをプルダウン化 */
function ListSelector(idName,checkNum,selText) {
if (!selText) selText = '移動先を選択';
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
var objLists = objFocus.getElementsByTagName('li');
if (objLists.length < checkNum) return;
var outText = new Array();
outText[outText.length] = '<form class="listselector" action="#">';
outText[outText.length] = '<select onchange="window.location.href = this.value">';
outText[outText.length] = '<option value="">';
outText[outText.length] = selText;
outText[outText.length] = '</option>';
for (i=0;i<objLists.length;i++) {
var oAnchor = objLists[i].getElementsByTagName('a');
var txtLink = oAnchor[0].getAttribute('href');
var txtElem = oAnchor[0].firstChild.nodeValue;
outText[outText.length] = '<option value="';
outText[outText.length] = txtLink;
outText[outText.length] = '">';
outText[outText.length] = txtElem;
outText[outText.length] = '</option>¥n';
}
outText[outText.length] = '</select></form>¥n';
objFocus.innerHTML = outText.join('');
}
// -->
</script>

月別アーカイブ2
この時点でこんな感じ。
あとはCSSにて飾り付けです。
ウチではこんな↓感じにしました。
結果が、今表示されてるヤツです。



form.listselector {/* フォームまわりのスタイル */
margin: 0px;
padding: 1px;
text-align: center;
color: #339966;
background-color: #F0EFE1;
width:200px;
border: 1px dotted #CCCCCC;
}
form.listselector select {/* メニュー内部のスタイル */
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 160%;
}
:: 雑記(カスタマイズ) | comments(0) | trackbacks(0) | posted by 二瀬古 
コメント




※文中にメルアドやURLがあると弾かれます。管理人への連絡は、こちらに記載のメルアド宛にお願いします。
トラックバック URL
http://blog.nisekobox.com/trackback/110