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

seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」を編集した結果、現時点でのサイドバーの「過去ログ」は、この画像のようになっています。


現時点のテンプレート



前回の記事＜■サイドバー「タグクラウド」をプルダウンメニューにする＞では、サイドバーの「タグクラウド」をプルダウンメニュー化しました。今回は同じように「過去ログ」（月別アーカイブ）もプルダウンメニューにしたいと思います。



うん、プルダウンメニューにしたいんですけどね。
実は私は、ブログのサイドメニューでは「過去ログ」と「タグクラウド」を上下に続けて表示させたいと思っているんですよ。
で、そうすると、「過去ログ」も「タグクラウド」もプルダウンメニューになってしまって、プルダウンメニューを展開する前の状態が、なんか1行表示ばっかりな気がして気に入らないんですよ。（もはや私だけの感覚でしかないｗ）



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


編集後の「プルダウンメニュー」



もちろん機能面では何の問題もありません。
ただやっぱり、「過去ログ」と「タグクラウド」が続けて表示されていると、1行表示が続いているのでちょっと変な感じがします。


なので、私は「過去ログ」をリストボックスメニューで表示させたいと思います。
「リストボックスメニュー」は、最初から指定した行数のリストを表示させておくメニューです。


編集後の「リストボックスメニュー」



「リストボックスメニュー」にするためには、「プルダウンメニュー」を作って、そこに少しだけ編集を加えます。つまり、最初に「プルダウンメニュー」を作らなければいけません。



ということで、この記事では「過去ログ」を「プルダウンメニュー」にする方法を書きます。
その上で次の記事＜■サイドバー「過去ログ」をリストボックスメニューにする＞で、「プルダウンメニュー」を「リストボックスメニュー」に変更します。
どちらのやり方をしても機能面では問題ありません。お好きなやり方でどうぞ。



ちなみに今回のカスタマイズも、前回の記事と同じくこちらのサイト様を参考にしました。




前回の記事ではサイドバーの「タグクラウド」に利用させて頂いきましたが、元々こちらの記事は「過去ログ」をプルダウンメニュー化する内容です。私のようにごちゃごちゃ書かずにスッキリとわかりやすい記事ですので、こちらの記事を読んでプルダウンメニューにすればいいのではないでしょうか。
もの好きな方だけ、私が書くごちゃごちゃの記事をお読みくださいｗ

サイドバーの「過去ログ」をプルダウンメニューにする手順

まずは、「コンテンツHTML」を編集します。
プルダウンメニューにする場合は、以前の記事で設定していたコンテンツの枠線が不必要になりますので、これを削除します。
そして「JavaScript（ジャバスクリプト）」を追加し、「form」や「option」タグを使ってプルダウンメニュー化します。



次に、設定していた枠線の代わりに、プルダウンメニュー自体に他のコンテンツと同じような枠線を表示させます。サイドバーの他のコンテンツが線で囲まれていますので（そのように私自身がカスタマイズしました）、プルダウンメニューにした「過去ログ」も同じように線で囲まないと違和感があります。



枠線のスタイルを指定するためには、サイドバーの「タグクラウド」をプルダウンメニュー化する時に作ったclass「side-pull」を使います。
既にCSSには「side-pull」を記述しているので、classを指定するだけで大丈夫です。
（前回の記事のようにタグクラウドを編集していない方のCSSには、「side-pull」はありません。設定していないのですから当然です。後ほど設定方法を説明します）


大まかには以上のような作業になります。



ちなみにこの記事は、ここまでのカスタマイズ後のコード記述が前提となっています。
サイドバーの過去ログには枠線と背景色が設定されていて（class「side-waku」）、過去ログのタイトルの下余白も設定しているし（class「module__heading2」）、リスト表示の先頭には「●」が付いています。リンク部分と記事件数の間に余白を作るために半角スペースも入れています。






「自分のブログではそんなカスタマイズ、やってないんですけどー」という方もいらっしゃると思いますが、基本的なやり方は同じなので大丈夫だと思います。
確かに私が独自に作ったclassやタグ表記が入っていますが、私のやってきたカスタマイズとデフォルトのテンプレートとの違いを、ちゃんと書きました。うん、たぶん書いてます。
ま、フィーリングで処理できると思います。

サイドバーの「過去ログ」に設定した「side-waku」を削除する

「side-waku」は、私が勝手に作ったclassです。
サイドバーの各コンテンツを線で囲み、背景色を付けました。
過去ログをプルダウンメニュー化するためには、この枠線は必要ありません。削除します。








それでは、コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面で「<% if:parts_name == 'archives' # START parts -%>」を探します。1行目にあります。



以前の記事＜■サイドバーのコンテンツを線で囲む（過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事）＞で新しく作っていた、コンテンツを囲む枠線のタグ「<div class="side-waku">」と「</div>」を削除します。

過去ログのプルダウンメニューの枠線そのものを編集することで、他のコンテンツの枠線スタイルと合わせるつもりなので、ここで「side-waku」を削除しても問題ありません。





「<div class="side-waku">」を削除したら、空白のままにしておいてください。この部分に別のコードを記述します。

「JavaScript（ジャバスクリプト）」を追加する

コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面で「<% if:parts_name == 'archives' # START parts -%>」を探します。1行目にあります。



先ほど削除した開始タグ「<div class="side-waku">」があった場所に以下の「追加するコード」をコピペします。
もしも「<div class="side-waku">」を記述していなかった場合（枠線や背景色を設定していなかった場合）は、「過去ログ」のタイトル部分のコード下に追加します。


＜追加するコード＞

「form」「option」の追加と編集

上記の通りに「JavaScript（ジャバスクリプト）」を追加したら、その下にある「<div class="module__body">」の下に、下記のプルダウンメニュー用の「追加するコード（1）」をコピペします。
終了タグ「</div>」の上には、下記の「追加するコード（2）終了タグ」（「</select>」と「</form>」です）をコピペします。　





＜追加するコード（1）＞


●「<option value="">「月」を選択して下さい</option>」の部分は、プルダウンメニュー内に表示される案内文です。
私は『「月」を選択して下さい』という言葉にしましたが、お好きな言葉を入れてください。



＜追加するコード（2）終了タグ＞

「a」タグを「option」に変更する

「過去ログ」の月部分の編集です。
元コードの「a」タグを「option」タグに変更します。
サイドメニューの「タグクラウド」をプルダウンメニュー化した際は、「a」タグをそのまま「option」タグに変更しましたが、「過去ログ」の場合は少し注意が必要です。





＜編集手順＞



(3)ですが、終了タグ「</option>」の位置に気を付けてください。
元コードでは終了タグ「</a>」の後ろに記事件数を表示させていますが、記事件数をプルダウンメニューでも表示させたいならば、終了タグ「</option>」は、記事件数のタグ「(<% archives.count -%>)」の後ろに入れなければいけません。
元コードには最後に改行するというタグ「<br />」があるので、この部分に「</option>」を入れます。（もちろん結果的には(2)でやった処理、つまり「</a>」は存在しないことになります）


(4)ですが、私は以前の記事＜■サイドバー「過去ログ」「カテゴリ」のリストの先頭に「●」を付ける＞で、リストの先頭に「●」を付けるように設定していました。プルダウンメニューの中でも同じように付けたいならば、(4)で説明しているように「●」の位置を変更してください。


＜元コード＞


＜編集後＞

プルダウンメニューのスタイルを記述する（「side-pull」）

サイドバーの他のコンテンツと同じような枠線を表示させるために、前回の記事＜■サイドバー「タグクラウド」をプルダウンメニューにする＞では、独自で新しいclass「side-pull」を作りました。
サイドバーのプルダウンだから「side-pull（プル）」という名前のclassです。
私が付けた名前がお気に召さない場合は、お好きな名前に変更してください。



もしも私が付けたclass名から変更する場合は、既に「コンテンツHTML」で「side-pull」を記述している箇所がありますので、ご自分の好きなclass名に変えてください。





前回の記事の通りにサイドバーの「タグクラウド」をプルダウンメニュー化している場合は、CSSで既にclass「side-pull」のスタイルを記述しているので、何もする必要はありません。
何もしなくても、「過去ログ」のプルダウンメニューは完成しているはずです。


編集後のイメージ

CSSに「side-pull」を記述する

CSSで既に「side-pull」を記述していれば、上記のようにコンテンツHTMLで「過去ログ」部分の編集をするだけで、プルダウンメニューが完成します。
でもまだ「side-pull」を設定していない場合もあるでしょうから、念のために編集方法を書いておきます。記述内容は前回の記事で説明したものと同じ内容です。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述をコピペします。
CSSの一番下でいいと思います。


＜追加するコード＞


●私は「サイドバー」関連はCSSにまとめて記述しているので、CSSの一番下ではなく「サイドバー」関連の下に記述しましたが、CSSの空いている場所のどこに記述してもかまいません。
●プルダウンメニューの枠線を、他のコンテンツの枠線と同じにしました。（border: 2px solid #A7B3BE;）
●他のコンテンツと同じように背景色を設定しました。（background-color: #FBFBFB;）
●「width: 100%;」を記述して、プルダウンメニューの横幅を広げました。
私のブログのように、サイドバーの各コンテンツを線で囲んだり背景色を付けたりしていない方は、まずはこの「width: 100%」を「side-pull」に記述してください。100%にすることで、プルダウンメニューの横幅を長くできます。その他「padding」や「color」を設定するかどうかは、お好きなようにどうぞ。
●コンテンツHTML編集の際に「side-pull」というclass名ではなく別のclass名を設定した方は、ここでのclass名をご自分で設定したclass名に変更してください。

コード編集後のCSSと「過去ログ」（再掲）

次の記事の紹介

ということで、サイドバーの「過去ログ」をプルダウンメニューにすることができました。
上記の完成イメージを見てみると、この記事のはじめに書いた通り、通常時（左側）が「過去ログ」も「タグクラウド」もプルダウンメニューになっているので、ちょっと変な気がしてしまいます。（もちろん私だけの感覚でしょうから、気にならない方は何もしなくても大丈夫です）
ただ私は、プルダウンメニューを展開する前の状態（通常時）に、1行表示が続くことが気になるわけです。


なので次の記事で、「過去ログ」を「リストボックスメニュー」に変更したいと思います。
ちょっとやってみようかな？と思われる方は、次の記事をお読みください。