ブログカスタマイズの雑談BLOG

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」でのサイドバー「過去ログ」のスタイルを編集しています。


前回の記事＜■サイドバー「過去ログ」をプルダウンメニューにする＞では、「過去ログ」をプルダウンメニュー化しました。



現時点のテンプレート



画像の左側が通常時です。右側が「過去ログ」を展開させた時の表示です。
プルダウンメニューなので、「月を選択してください」の右側にある下向き矢印をクリックすると、過去ログの月別リンクがバーッと展開されます。



現時点での状態でも、もちろん何の問題もありません。
通常時、ブログのどこのページを見ていたとしても、サイドバーにはプルダウンメニュー化された「過去ログ」が表示されているので、邪魔にはなりませんね。
下向き矢印をクリックしたら月別リンクが展開されるし、選択したら「過去ログページ」に飛ぶわけで、機能的にも何の問題もないです。


でも私は、サイドバーの「過去ログ」をプルダウンメニューで表示するのをやめました。
理由は2つあります。



展開したら邪魔になる
現時点の「過去ログ」ですが、上の画像にはまだ4つ分しか月別リストがありません。だから、プルダウンメニューを展開しても、何の違和感もないのです。
でも、ブログって4ヶ月しか記事を書かないわけじゃないですよね。ブログを長く続けていると、「過去ログ」で表示されるリストが何年分にもなってしまう、ってことは珍しいことじゃないです。


ちなみに、プルダウンメニューはブラウザによって表示される行数が異なるそうです。例えばIE（Internet Explorer）の場合は、30行ぐらい表示されるみたいです。
30行‥‥ちょっと長くない？


以前の記事＜■サイドバー「タグクラウド」をプルダウンメニューにする＞で、同じようにプルダウンメニュー化してしまった「タグクラウド」の場合は、自分でタグの数を調整できるんですよね。だって記事に設定するタグの数を調整すればいいんだし。
でも「過去ログ」の場合は自分でどうにかできるわけじゃないし、とりあえず記事を書いたら書いただけ、過去ログに表示されるわけで、それこそ10年間毎月記事を書いたら、ものすごく長いリストになってしまうわけです。



プルダウンメニューにした「タグクラウド」と並べるとヘン？
私がヘンだと思うだけです（笑）
以前の記事で私はサイドバーの「タグクラウド」をプルダウンメニューにしました。
もしも「タグクラウド」の上とか下に、プルダウンメニューにした「過去ログ」を配置すると、同じような1行表示のコンテンツが続くことになって、なんだかおかしくないですか？


あとは、私のように記事本文が長くなってしまう場合は、色んなコンテンツを1行表示にしてしまうと、サイドバーがすぐに終わってしまうんですよね。
メインコンテンツだけがダラダラと長く伸びているような状態は、ちょっと避けたい気もします。




ということで、（なんか2つ目の理由はこじつけたみたいになってしまいましたが）「過去ログ」をプルダウンメニューにすると、何かちょっとヘンな感じなので、プルダウンメニューを利用して「リストボックスメニュー」に変えてしまいます！



あ、しつこいですが、このままプルダウンメニューにしていても問題は無いですからね！
上記で「プルダウンメニューは展開したら邪魔になる」と書きましたが、プルダウンメニューはリスト数が多くなると勝手に「縦スクロールバー」が表示されるので、リスト数を気にする必要はありません。
じゃあなんでわざわざ「邪魔だ」とか書いたのかというと、それぐらいしか「リストボックスメニュー」にした方がいい理由を思いつかなかったからです。はははー。


編集後のイメージ

サイドバーの「過去ログ」をリストボックスメニューにする

まずは、前回の記事＜■サイドバー「過去ログ」をプルダウンメニューにする＞の通りに作業をして、サイドバーの「過去ログ」をプルダウンメニューにしてください。
プルダウンメニュー化していないと、次の作業ができません。
必ず、やってください。



では、コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面で「<% if:parts_name == 'archives' # START parts -%>」を探します。1行目にあります。
前回の記事で、この記述の下に「JavaScript（ジャバスクリプト）」を追加したり、「form」「option」を追加しました。





「select」で始まるタグがあります。
このタグの中に「size="○"」を追加します。


「size="○"」（size属性）はメニューの表示行数を指定する属性です。
「○」の部分に数字を入れると、その数字の分の行数が表示されます。
「size="3"」ならば3行、「size="10"」ならば10行表示されます。
指定した行数以上のリスト数がある場合は、メニューを開いた時にスクロールバーが表示されます。


ちなみに「size="○"」を記述していなければ、勝手に「size="1"」だと判断されます。
「size="1"」はプルダウンメニューになり、「size="2"」以上ではリスト形式のメニューになります。
「size="○"」を指定していなかったので、これまではプルダウンメニューとして表示されていたわけです。「size="○"」を指定してあげれば、勝手にリスト形式のメニューになってくれます。



では、「select」で始まるタグの中にsize属性を追加しましょう。
タグの最後に追加すればいいです。
必ず「半角スペース」を入れてから「size="○"」を追加します。


＜元コード＞


＜編集後＞


●キャプチャ画像を取りたかったので、とりあえず「size="4"」を設定しています。私のブログでは10行ぐらい表示させようかな？と思っています。
●リストボックスメニューでは案内文『「月」を選択して下さい』を含めた4行が表示されます。（下記「実際のページ」画像で確認してください）

コード編集後の実際のページ

次の記事の紹介

次の記事では、Seesaaブログのタグ一覧ページ「タグクラウド」を編集します。