iPhone/ カメラ/ 自転車/ ブログ/ 食べ物 についてプログラマーやらしてもらっているtakoashiがぐちぐち言う日記系ブログです。
電化製品は機能重視。takoashiはtoshiba:RDを応援してます。
プログラマ系ブログ「takoashiの開発記録」も、よろしくお願いします。

ミニカスタマイズ 第2段「月別カテゴリーをコンボボックスにしよう」twitterでつぶやく

課題
月別カテゴリーをコンボボックスにしよう

残念ながら制限が・・・
・毎月投稿していない人は表示できないページがある
・JavaScriptが動かない環境では見れなくなる
・IE以外では動作確認してない


ライブドアブログでは、プラグインの標準の機能で同等の機能が現在はあります。そちらをご利用ください。(このコードは、なにかの参考にでもご利用ください)

方法
プラグインでメモスペースを利用します。
下記のコードを貼り付けて設定項目を変更し再構築で終わり。

簡単?どう?

どんな風に見えるかはトップページで確認しよう。
「あーかいぶ」が2個あるので違いはすぐにわかるぞ。

<script language="JavaScript" type="text/javascript"><!-- 
// 設定項目
var start_year = 2004; // ブログを開始した年
var start_month = 1; // ブログを開始した月
var siteurl = "http://www.takoashi.net/"

function MoveSelectPage(sel){
var index = sel.selectedIndex;
if( index != 0 )
location.href = sel.options[index].value;
}

// -->
</script>

<form action="">
<select name="MonthArchives" onChange="MoveSelectPage(this)">
<option value=''>select Month
<script language="JavaScript" type="text/javascript"><!--
var today = new Date();
var day = new Date();

day.setFullYear(start_year);
day.setMonth(start_month-1);

for( ; day<=today ; day.setMonth( day.getMonth()+1 ) ){
var y = day.getFullYear();
var m = day.getMonth() + 1;
if (m < 10) { m = "0" + m; }
var url = siteurl + "archives/" + y + "-" + m + ".html";
var text = y + "年" + m + "月";
document.writeln( "<option value='" + url + "'>" + text );
}
// -->
</script>
</select>
</form>

うまくできたら教えてほしいな〜〜。
ひみつでも構いませんけど(T-T)


お断り。
実装方法はひとつじゃない。これはあくまでひとつの方法であり
ベストであるかどうかは保証できませんm(_ _)m


追記 - 2004/08/27 14:53:55
ソースをすこし修正しました。
後半のscriptタグ内をコメントで囲っただけです。
Operaなどで横長のコンボボックスが表示されるのを防げます。

Operaの方すみません。
たぶん、MAC版IEなども同じ現状が発生していたと思います。
同じくすみません。

---
ミニカスタマイズメニュー
カスタマイズの注意点

参考になりました?応援だと思って お願いします。

トラックバックURL
この記事へのトラックバック
1. 月別アーカイブをカスタマイズしてみる - なんだろね(´・ω・`) [2004年08月03日 02:57]
2. blogに月別カテゴリーをコンボボックス追加 - 「学ぶ」と「教える」 [2004年10月22日 00:17]
3. アーカイブ表示変更実験終了 - ミゲルの蒼い書物 [2005年02月28日 01:36]
4. カスタマイズが楽しい! - + Precious Time + [2005年03月01日 15:20]
5. 過去ログをコンボボックスに - ボボ日 [2005年08月24日 19:11]
この記事へのコメント
1. Posted by ヨポポ [2004年08月03日 03:01]
はじめまして。ルミさんの所からきました。ヨポポと申します。

■月別アーカイブの記事にもカテゴリーを表示する
■月別アーカイブをコンボボックスにしよう
を参考にさせて頂いてやってみました。
上手く出来ましたので報告いたします。

ありがとうございました。
2. Posted by takoashi [2004年08月03日 10:44]
はじめまして、ヨポポさん。

ご報告ありがとうございます。
書いてある説明じゃ動かないといわれないでよかったヾ(≧∇≦)〃
3. Posted by nico [2004年08月24日 13:58]
おっかしいなぁ
できないなぁ…
4. Posted by takoashi [2004年08月24日 14:03]
改行は大丈夫でしょうか?
スクリプト内に<br>タグなどが挿入されると動かなくなります。
5. Posted by nico [2004年08月24日 14:09]
えっ?!これはフリーメモに貼り付けるんですか?
てっきりHTMLに組み込むものだと思ってました。
6. Posted by takoashi [2004年08月24日 14:12]
HTMLテンプレートに組み込んでもかまいません。
出現位置には注意してください。

まあ、どこに記述しても動きますよ。
7. Posted by nico [2004年08月24日 14:17]
やっぱりだめです。コンボボックスになりません(泣
8. Posted by takoashi [2004年08月24日 14:20]
あれ?表示されてますよ。。。
使用されているブラウザはなんですか?

あと、設定項目だけはきちんと設定してくださいね。
そうしないと、みんなこのサイトに飛ばされちゃいます・・・
9. Posted by nico [2004年08月24日 14:25]
あはは そうですよねぇ 修正しました
takoashiさんのコンボボックスが見えるなら、自分のBlogでも観れないとおかしいですよね…
br/はずしたんだけど、だめです。OS2000です。
10. Posted by nico [2004年08月24日 14:58]
ブラウザはIE6.0です。
11. Posted by nico [2004年08月24日 16:06]
私の勘違いでした!
ちゃんと表示されてました♪

ありがとうございます〜(^=ω=^)
12. Posted by mizuki [2004年09月26日 03:46]
はじめまして
月間アーカイブをコンボボックスで表示させる事が出来ました。
同じメモスペースに カテゴリーを表示させ 
尚且つコンボボックスで表示させるように出来るのでしょうか?


13. Posted by takoashi [2004年09月26日 12:45]
> mizukiさんへ
地獄変さんがやっているようにやれば、
コンボボックスを設置することはできますよ。

ただ、追加や削除に自動で対応するようなコンボボックスは作れませんね。
すべてのURLを直接書いたコンボボックスを用意するだけです。

現状ではあんまりスマートな方法はありませんね。


<select name="CathegoryArchives" onChange="MoveSelectPage(this)">
<option value=''>カテゴリー別アーカイブ
<option value="http://blog.livedoor.jp/XXXX/archives/cat_XXXXX.html">カテゴリ名</option>
</select>


<option value="http://blog.livedoor.jp/XXXX/archives/cat_XXXXX.html">カテゴリ名</option>
を必要ぶんだけ全部用意してあげればOK。
14. Posted by mizuki [2004年09月26日 19:07]
わぁー
さっそくやってみます。
15. Posted by yammar [2004年10月16日 23:35]
 はじめまして,こんばんは。
DION LOVELOGユーザーですが,こちらの記事を参考にさせて頂いて
月別アーカイブをコンボボックス化いたしました。
ありがとうございました。
16. Posted by takoashi [2004年10月17日 12:16]
LOVELOGはライブドアとほとんど同じですから同じ技がいっぱい使えますね。
17. Posted by takoashi [2004年10月18日 00:19]
この記事は必要なし・・・・


プラグインの月別カテゴリーの設定で、
プルダウンが選択できるようになってます。
これで、このスクリプトは不要となります

(;o;)


ごくろさん・・・
18. Posted by はらけん@上海 [2004年12月15日 12:24]
カスタマイズさせて頂きました。
有難うございました。
19. Posted by ぢろ [2005年03月12日 18:48]
はじめまして。
ちょこっといじってseesaaで使わせていただきました。
ありがとうございます!

えっと、質問です。
上から下へ 過去→現在、に表示されるのですが
逆(現在→過去)にしたいのです。
livedoorの表示みたいにするにはどこをいじればいいのでしょうか?

お時間のある時で構いませんので、よろしくお願いいたします。
20. Posted by takoashi [2005年03月12日 20:51]
var day = new Date();
var startday = new Date();

startday.setFullYear(start_year);
startday.setMonth(start_month-1);

for( ; startday<=day ; day.setMonth( day.getMonth()-1 ) ){
var y = day.getFullYear();
var m = day.getMonth() + 1;
if (m < 10) { m = "0" + m; }
var url = siteurl + "archives/" + y + "-" + m + ".html";
var text = y + "年" + m + "月";
document.writeln( "<option value='" + url + "'>" + text );
}


こんな感じですかね?
ライブドアでは、現在プラグインとしてこの機能があるんですよ。だから、スクリプト要らず!
21. Posted by ぢろ [2005年03月13日 01:21]
takoashiさん、こんばんは。
うわ〜、早いです!!
早速こちらに差し替えさせていただきました。
新→旧になってます。
本当にありがとうございました!

背景のお持ち帰りもありがとうございました(^^)
22. Posted by ボボコフ [2005年08月24日 19:16]
また参考にさせていただきました。

。。。。。。

最新の月から表示するように
あれこれ試してようやく実現したんですが。。

↑のコメントに書いてあったとは。。orz

とにかくありがとうございました。

seesaaには実装されてない機能なので
まだまだ需要はありそうですね!
23. Posted by 仕事したくねぇ [2005年08月28日 13:53]
コピペさせて頂きました。
ありがとうございます。
英語表示にしたかったので多少弄りました。

Livedoorなんですが、これ同様のPlug IN見つからないです。
この記事にコメントする
名前:
URL:
  情報を記憶: 評価: 顔