« 『千年の(しじま)―異本源氏物語』 森谷明子 | トップページ | ドラマ「徳川の女たち」を観る »

2005.01.30

全ての月別バックナンバーをプルダウン表示

ココログベーシックでは、月別バックナンバーが10件(=10か月分)しか表示されません。
そこでfacet-diversさまの「月別バックナンバー プルダウンメニュー」を使い、全ての月別バックナンバーをプルダウン表示しました。

私の手順は、以下の通りです。

1.「monthlyArchiveSelector01a.js」をダウンロードし、アップロードしておきます。

2.「ウェブログ一覧」→「デザイン」→「コンテンツ」を開き、表示するコンテンツからココログ純正の「バックナンバー」を削除します。

3.マイリストに「バックナンバー」を作成し、「メモをテキスト表示」にしておきます。

4.メモ欄に、以下のソースを貼り付けます。

<script type="text/javascript" src="http://xxxx.cocolog-nifty.com/blog/files/monthlyArchiveSelector01a.js">
</script>
<script type="text/javascript">
<!--
MakeMonthlyArchiveSelectorHtml("http://koroppy.cocolog-nifty.com/blog/", "2003/12", "月別バックナンバー");
//-->
</script>

ファイルのURLは、自分でアップロードしたものに変更してください。
MakeMonthlyArchiveSelectorHtmlの引数は、("blogのトップページURL","blogを開始した西暦年(=YYYY)/月(=MM)","最初に表示するタイトル")です。

5.JavaScriptをOFFにしている人のために、バックナンバー一覧のリンクも追加します。

【2005.2.28 追記】
元記事にて、JavaScriptがOFFの時だけ、バックナンバー一覧を表記する方法が補足されていました。
以下の記述を、手順4の前に記述します。

<noscript>
<a href="http://koroppy.cocolog-nifty.com/blog/archives.html">バックナンバー一覧</a>
</noscript>

6.スタイルシートに以下の記述を追加し、サイドバーの他の文字とデザインを合わせます。

#monthly-archive-selector {
color: #666666;
font-size: x-small;
font-family: "ヒラギノ明朝 Pro W6", Osaka, "MS Pゴシック", "trebuchet MS", trebuchet, "verdana", arial, sans-serif;
}


内容が重複しているので、ココログ純正バックナンバーは削除しました。
ココログ純正バックナンバーを併用する場合、手順2と手順5は不要です。

【2005.5.18 追記】
「ブログを開始した年月」を2003/12より前に設定した場合に、2003/12より下の並び順がおかしくなるという不具合に対応した、新しいスクリプトが公開されています。
くわしくは「「月別バックナンバー プルダウンメニュー」のスクリプト本体を差し替えました」をご覧下さい。

【2005.9.1 追記】
2005年以降に開始年月を設定した場合、上手く動かないという不具合に対応した、新しいスクリプトが公開されています。
今問題なく動いている方は、差し替え不要です。
詳しくは、「「月別バックナンバー プルダウンメニュー」のスクリプト本体を差し替えました」をご覧下さい。

【2005.10.12 追記】
「カテゴリと月別バックナンバーをプルダウンメニュー化(タイトルと概要抽出機能つき)」へ移行しました。

|

ウェブログ・ココログ関連」カテゴリの記事

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/7313/2744186

この記事へのトラックバック一覧です: 全ての月別バックナンバーをプルダウン表示:

» カスタマイズ大好き [主水血笑録]
 私は自分の部屋の模様替えは全くやらないくせに、サイトの模様替えは結構好きで、ネ [続きを読む]

受信: 2005.02.02 00:57

» プルダウン化、大成功!! [まるこ姫の独り言]
また私のないものねだりが、頭をもたげる。。 今回はバックナンバーのプルダウン化です。 私のブログ友達(勝手にお [続きを読む]

受信: 2005.02.05 17:48

» 月別バックナンバーをプルダウン表示 [Born to Skip]
月別バックナンバーが少しずつ増えてきて、そろそろプルダウン表示 [続きを読む]

受信: 2005.10.05 15:52

» 月別バックナンバーをプルダウン表示を導入 [Curiosity Episode]
ここのブログを 初めてだいぶ経ちましたので導入してみたかった「月別バックナンバー [続きを読む]

受信: 2006.04.06 11:56

コメント

KOROPPYさん、こんにちは。

KOROPPYさんのカスタマイズを見て唸りました。JavaScriptをOFFにしている人のためにバックナンバー 一覧は残さなきゃな、とは思い至りましたが、その設置位置がKOROPPYさんは絶妙です。
うちは、トピックスのいちばん上というワケのわからないところに付けてしまったのですが、KOROPPYさんの記事を読んで「ここだ!」と、マネさせていただきました。m(__)m スタイルシートもいじろうと思います。m(__)m
こういうのって、思いつくのが才能だとつくづく思います。(close、openのときも、そう思いました)

先日、TBPはツリー化できないのかな?と思いまして、いろいろ検索したおりも KOROPPYさんちにたどり着きました。^^

いつもありがとうございます。
これからも、よろしくお願いいたします。

投稿 kuu | 2005.01.30 18:49

★kuuさん
何よりこのスクリプトを発表された、
facetさまの発想[ひらめき]と技術に脱帽ですね。
私はいつもお借りするばかりでして[汗]

バックナンバー一覧はココログデフォルトのように、
マイリストタイトルに入れたかったのです。
でも、文字数制限であえなく挫折しました[がーん]

私の覚書が参考になったのでしたら、幸いです[ハート]
こちらこそ、よろしくお願いします。

投稿 KOROPPY | 2005.01.30 21:39

ご配慮、痛み入ります>5.

書き忘れてたので私も記事に追記したんですが、今回のはTypepad系専用というわけでもないので、うまく書けませんでした。orz

ところで、記事タイトルですけど、50文字制限でしたっけ。href="/archives.html"でいけるかもですね。

ただ、OFFの時に中身がなくて妙に感じる人もいるかもしれませんから、結局今の方が良いかも。

考えて見れば、Typepad系では、純正のバックナンバーのリスト部分を置き換えるスクリプトの方がよいかもしれませんね。リストに追加してもいいし、プルダウンに置き換えてもいいし...。新HTMLだと簡単に作れそうですし。

投稿 facet | 2005.01.30 22:36

KOROPPYさん、深夜にお邪魔します。

facetさんとKOROPPYさん、おふたりの発想力に感謝いたしております。
おふたりとも、ネットの読者のことをよく考えていらっしゃるからこそ、出来るのですよね。
考えて、その結果をどう見せるか、ですもの。

見習いたくても自力で出来ないところをいつもマネさせていただいております。
ありがとうございます。頼りにしています。

投稿 kuu | 2005.01.31 03:33

★facetさん
毎回便利なスクリプトをありがとうございます。

<a href="archives.html">バックナンバー</a>

にすると、トップページからは上手く表示できるのですが、
個別ページやバックナンバーでは駄目でした[涙]
とりあえず現状維持でいくことにします。

元々あるものを置き換えるスクリプトだと、
手順2と5が不要になって、設置が楽になりそうですね。
リストに追加していく場合は長くなるので、
スクロールバーをつけたいですね。

★kuuさん
私は口を挟むばっかりで_(^^;)ゞ
実現してくださるfacetさまに、いつも頼りっぱなしです。

投稿 KOROPPY | 2005.01.31 08:56

href="archives.html"
じゃなくて
href="/archives.html"
ですよ〜。「/」が大事。
あ。。。間違ってる。orz
ここだと、
href="/blog/archives.html"
ですね。ブログのフォルダ名が必要でした。

投稿 facet | 2005.01.31 17:57

★facetさん
最初/を入れたらうまくいかなくて、
いろいろやっているうちに外してました<(_ _)>

マイリストの名前に以下の記述を入れましたが、

<a href="blog/archives.html">バックナンバー</a>

「http://koroppy.cocolog-nifty.com/blog/2005/01/」+「blog/archives.html」
というURLを探しにいっているような感じで、
「ページが存在しません」と言われてしまいます[汗]
ページによって階層が違うから、
相対パスは難しいのでしょうか[涙]

投稿 KOROPPY | 2005.01.31 19:44

頭に「/」がないとそうなりますね。

>最初/を入れたらうまくいかなくて、

そういえば以前もそんなことをおっしゃってましたね。おかしいな。

今、私のサイトの左サイド下部で実験しているのですが、IE6でも問題なく飛べてるんですよね...。

そもそも、ソースを見てもらうと分かりますが、純正の「バックナンバー」のリンク自体がhref="/[blog folder name]/archives.html"(「絶対パス」)になっているんですよ。

で、それを発見して以来、自分のサイトへアップしたファイルへのリンクを絶対パス表記にしてたりして、ずっと問題なかったんですけどね。
(HTMLソースをローカルにダウンロードして調査したりするときに絶対パス表記だと不便なことがあるので、最近はできるだけhttp://から始まる「絶対URI」表記にしていますが)

普通、「/」がないと表示中のページからの「相対パス」で、「/」から始まっていると(base)ドメイン基準の「絶対パス」だと解釈されるはずだと思うんですけどねえ...。

投稿 facet | 2005.02.01 06:01

★facetさん
>頭に「/」がないとそうなりますね。
あれ、またスラッシュが抜けてる[がーん]
すみません、コピペも満足に出来ないやつで[・・・]
スラッシュを足したら動きました。
お騒がせしましたっ<(_ _)>

投稿 KOROPPY | 2005.02.01 07:59

KOROPPYさん、おはようございます。

バックナンバーのプルダウン化を目指して
いましたが、なかなか上手くいかなくて
悩んでいたんですが、KOROPPYさんの指示通りにやってみたらできました♪

嬉しいです、ありがとうございました。

投稿 まるこ姫 | 2005.02.05 08:47

★まるこ姫さん
トラバありがとうございました。
無事成功したようでよかったですね[♪]

プルダウンだからすっきりするし、
純正バックナンバーでは表示できない記事も入るし、
素晴らしいスクリプトですよね[ハート]

投稿 KOROPPY | 2005.02.05 18:08

KOROPPYさんこんにちわ!
私もさっそく月別バックナンバーをプルダウン表示をしてみました。
今度は一人でも上手く出来ましたよ[ミニハート]
いつもながらfacetさんのスクリプトには感激しちゃいますね!

投稿 さゆみ | 2005.10.05 15:50

★さゆみさん
1回で設置できると嬉しいですよね[ハート]
facetさんの着眼点には、毎回驚かされます。

投稿 KOROPPY | 2005.10.05 17:10

コメントを書く