月別アーカイブリストをプルダウンメニューにする
月別アーカイブリストは月日がたつにしたがって縦に無駄に長くなってとって見にくいの。月別の必要性なんかないんじゃない？
出来上がってみると、とってもすっきり♪
今回も [ 小粋空間 さま ] のお世話になりました。
参考サイト
プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する [ 小粋空間 さま ]
以下自分用メモ
出来上がってみると、とってもすっきり♪
今回も [ 小粋空間 さま ] のお世話になりました。
参考サイト
プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する [ 小粋空間 さま ]
以下自分用メモ
1.JavaScriptを外部ファイルにする場合のカスタマイズ
下記のスクリプトを[ selectbox.js ] というファイル名で保存し、FTPにてブログファイル内にアップする。
ファイルはブログで用いている文字コード（shift_jis）で保存。
外部ファイルは日別アーカイブ/カテゴリー・アーカイブ共通に使用します。
[ selectbox.js ]
2.テンプレートの設定①
下記スクリプトをテンプレート [ メインページ/アーカイブページ/エントリー・アーカイブ/カテゴリー・アーカイブ/日付アーカイブ ] の<head>～</head>内に挿入する。
2.テンプレートの設定②
月別アーカイブを表示したいところに挿入。
[ エントリー・アーカイブ /カテゴリー・アーカイブ/日付アーカイブ ]
[ メインページ ]
[ アーカイブページ ]
≪ 続きを隠す
下記のスクリプトを[ selectbox.js ] というファイル名で保存し、FTPにてブログファイル内にアップする。
ファイルはブログで用いている文字コード（shift_jis）で保存。
外部ファイルは日別アーカイブ/カテゴリー・アーカイブ共通に使用します。
[ selectbox.js ]
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
function addSelectForMonthly(data){
var year = data.substring(0,4);
var month = data.substring(12,14);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
var selectYear = nodes[i].innerHTML.substring(0,4);
var selectMonth = nodes[i].innerHTML.substring(5,7);
if(year == selectYear && month == selectMonth){
nodes[i].selected = true;
}
}
}
function addSelectForCategory(data){
var nodes = document.getElementById('categorylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML.indexOf(data) == 0){
nodes[i].selected = true;
}
}
}
2.テンプレートの設定①
下記スクリプトをテンプレート [ メインページ/アーカイブページ/エントリー・アーカイブ/カテゴリー・アーカイブ/日付アーカイブ ] の<head>～</head>内に挿入する。
<script type="text/javascript" src="<$MTBlogURL$>selectbox.js"></script>
2.テンプレートの設定②
月別アーカイブを表示したいところに挿入。
[ エントリー・アーカイブ /カテゴリー・アーカイブ/日付アーカイブ ]
<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header"><a href="<$MTBlogURL$>archives.php">アーカイブ</a></h2>
<div class="module-content" id="monthlylist">
<form><select name="select" onChange="selectUrl(this.form.select)">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$>[<$MTArchiveCount$>]</option>
</MTArchiveList>
</select></form>
</div>
</div>
</MTIfArchiveTypeEnabled><script type="text/javascript" language="javascript">
<!--
addSelectForMonthly("<$MTArchiveTitle$>");
//-->
</script>
[ メインページ ]
<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header"><a href="<$MTBlogURL$>archives.php">アーカイブ</a></h2>
<div class="module-content" id="monthlylist">
<form><select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$>[<$MTArchiveCount$>]</option>
</MTArchiveList>
</select></form>
</div>
</div>
</MTIfArchiveTypeEnabled>
[ アーカイブページ ]
<MTIfArchiveTypeEnabled archive_type="Monthly">以上
<div class="module-archives module">
<h2 class="module-header"><a href="<$MTBlogURL$>archives.php">アーカイブ</a></h2>
<div class="module-content" id="monthlylist">
<form><select name="select" onChange="selectUrl(this.form.select)">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$>[<$MTArchiveCount$>]</option>
</MTArchiveList>
</select></form>
</div>
</div>
</MTIfArchiveTypeEnabled>
≪ 続きを隠す
posted by : ciao | 12:54 AM | Permalink | Comments (0) | Trackback (0)
を貼って先生に抱っこされていた。
