てんぽ: スクリプト無しで月別アーカイブをドロップダウン化

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

スクリプト無しで月別アーカイブをドロップダウン化

2005年12月05日(月)

前回の続き。

  • ドロップダウン(プルダウン)メニューの長所・短所を考えると、月別アーカイブをドロップダウンメニューにするのはいいアイデアかもしれない。
  • ただし、ページ移動をJavaScriptに依存するのはよくない。

以上2点を踏まえて、月別アーカイブをJavaScriptを使わないドロップダウンメニューにするカスタマイズです。

CGIを使いましょう
プルダウンメニューの隣に[GO]や[JUMP]や[移動]などといったボタンを置いておき、ボタンがクリックされると、選択項目に該当するURLがCGIに渡るようにしておきます。そうすれば、JavaScriptをOFFにしているユーザでも、プルダウンメニューを使って移動することができます。

しかし、FC2ブログではCGIをアップロードできません。ではどうするかというと……。ヒントはブログ内検索にありました。

ブログ内検索のHTML
<form action="./" method="get">
<p>
<input name="q" size="15" value="検索語を入力して下さい" type="text" />
<input value="検索" type="submit" />
</p>
</form>

name属性の値がqであるinput要素のvalueの値を送信すると、「?q=検索語」というクエリー文字列のついたURLの検索画面になります。

われわれ(誰?)は、かつて、月別アーカイブ画面のURLが現在の「blog-date-YYYYMM.html」ではなく、「?date=YYYYMM」だったことを知っています。そしてこのURLは現在でも有効です。

つまり、name属性にdateを、value属性にYYYYMMを使えば、月別アーカイブ画面に移行できるのでは?というわけです。

月別アーカイブのドロップダウンメニュー
<form action="./" method="get">
<p>
<select name="date">
<!--archive-->
<option value="<%archive_year><%archive_month>"><%archive_year>-<%archive_month>(<%archive_count>)</option>
<!--/archive-->
</select>
<input type="submit" value="Go" />
</p>
</form>

このように、name属性の値を「date」にして、「年月」とともに送信してやれば、その月の月別アーカイブ画面を返してくれるようです。 ただし、当然、URLはblog-date-YYYYMM.htmlではなく、?date=YYYYMM形式になります。

ページ移動するにはボタンを押さなければなりませんが、それが嫌なら JavaScriptが有効な環境ではボタンが必要でなくなるように、JavaScriptを使って書き換えてやればいいでしょう(誰かが作ってくれそうです)。

同様に、name属性を「cat」にしてカテゴリ番号を送信すれば、カテゴリ別アーカイブのドロップダウンメニュー化もできると思いますが、 残念ながらカテゴリ番号を取得する変数は今のところ用意されていません。まぁ、ドロップダウンメニューとの相性を考えれば、月別アーカイブだけで充分でしょう。

改題。

#57
カテゴリ:FC2ブログ
タグ[ FC2ブログ カスタマイズ ]

(-6件)

BNJ:Re: 月別アーカイブのドロップダウンメニュー化

はじめまして。すばらしいアイディアだと思います。
早速パクらせていただきましたm(_ _)m

JavaScriptで選択後即ジャンプは「勝手に飛ぶのが、かえって使いにくい」と言っていた人を見たことがあるので、今のところ導入する予定はないですね。
面白そうだとは思いますけど。

  • 2005年12月05日(月)19:34:01
  • URL
  • 編集
daniel:うは

おそれいりました。 「素晴らしい」 の一言です。
確かに行けますね。 ボタンは簡単に隠せました。

「件数」を蹴れば カテゴリリストは自作できますね
( ナビリストにカテゴリ番号や記事番号の変数があれば・・ )

  • 2005年12月06日(火)19:25:12
  • URL
  • 編集
みりばーる:

BNJさん、はじめまして。
>JavaScriptで選択後即ジャンプは「勝手に飛ぶのが、かえって使いにくい」
自分もかえって使いにくい派だったりします。「CSS切り替え」なら選択後即切り替えでもいいんですけど。なんとなく。

danielさん
>ボタンは簡単に隠せました。
ボタンはやはりnoscriptを使うのが簡単ですね。noscriptの効果的な使い方だと思います。
カテゴリや最近の記事はドロップダウン化するとかえって使い勝手が悪くなりそうですが、カテゴリ番号の変数はあるといろいろと便利だと思います。

  • 2005年12月06日(火)22:10:59
  • URL
  • 編集
あめんぼさん:Re: 月別アーカイブのドロップダウンメニュー化

はじめまして。
FCafeさん経由で知り、早速勝手に実装させていただいております。
JavaScriptオフでの動作も問題無いことを確認し、ちょびっと感動しております。

  • 2005年12月13日(火)16:53:20
  • URL
  • 編集
みりばーる:>あめんぼさん

解説ではあっさりと書いていますが、実際に動作させるまでにいろいろと試行錯誤していたので、成功したときには自分でもちょびっと感動しました。

  • 2005年12月18日(日)16:30:49
  • URL
  • 編集
MITSURU:Re: スクリプト無しで月別アーカイブをドロップダウン化

スゴイです。
それにしても二年前の記事なんですね。俺にはタイムリーな記事でした。

  • 2007年11月10日(土)01:26:50
  • URL
コメントの投稿

トラックバック(-1件)

http://mb.blog7.fc2.com/tb.php/57-bae60765

ページのめくり方

新しくデザインしたスキン「ophelia」に関しては、まとまれば改めて記事にするつもりです。今回は視覚デザイン面での刷新・強化(…できていません)が主題だったので、機能・仕様は「

  • 2006年01月17日(火)01:43:15
  • from ポエツ | poets

<<ドロップダウンメニューの使いどころ | Xpander、The Technology、あとfloat>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。