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

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」を編集した結果、現時点でのサイドバーの「タグクラウド」は、下の画像のようになっています。
（デモブログのタグクラウドだとタグの登録件数が少ないのでわかりにくいかな？と思って、「仮」という意味でタグ登録数が多い画像を準備しました）


現時点のテンプレート



現時点のタグクラウドは、前回の記事＜■サイドバー「タグクラウド」のタグ（単語）を線で囲んでボタンにする＞でタグ1つずつを線で囲んだので、ボタンのように表示されています。



タグクラウドに関しては、もちろんこのままの表示で問題はありません。
でも私は、どうしてもタグクラウドを「プルダウンメニュー」にしたいのです！
タグが増えれば増えるほど、サイドバーのタグクラウドが邪魔になる気がするので折りたたんでしまいたい。そうなると「プルダウンメニュー化」してしまう方が、色々と考えなくていいからラクです。


編集後のイメージ



このように、サイドバーでは「タグを選択してください」という1行分しか表示しないようにして、場所を取らないようにしたいと思います。
「タグを選択してください」の右側にある下向き矢印をクリックすると、登録しているタグがバーッと展開されるので、機能面での問題もありません。



ブログでタグを全部表示させておくと確かに何のタグがあるのかすぐにわかるけれども、そんなにタグを利用する人がいるか？って話なんですよね。
私自身はタグをカテゴリと同じように記事リストを作るために利用しているんですが、普通はあんまり使わないのではないでしょうか。
タグの数が多くなってしまった場合は、場所を取るような状態で表示させておくよりも、プルダウンメニューにしてスッキリさせた方がいいのではないでしょうかね。（個人の好みの問題ですけどね）



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




記事名でわかるように、元々こちらの記事は「過去ログ」をプルダウンメニュー化する内容です。これをどうにか「タグクラウド」に利用できないかと思って試行錯誤してみたら、意外と簡単にできました。
けっこう昔に書かれた記事ですが、今でもバッチリ利用できます。ありがとうございました。

サイドバーの「タグクラウド」をプルダウンメニューにする手順

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



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



枠線のスタイルを指定するために、新しくclass「side-pull」（サイドのプルダウンメニューの「プル」という意味でこのようなclass名にしました）を作って、CSSに記述します。
class「side-pull」はサイドバーの他のコンテンツにも使えるので、このclass名でいいのではないでしょうか。（「side-tag」とかにすると、タグクラウドにしか使えない気がしますからｗ）


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



ちなみに、今回の編集は、ここまでのカスタマイズ後のコード記述が前提となっています。
サイドバーのタグクラウドには枠線と背景色が設定されていて（class「side-waku」）、タグクラウドのタイトルの下余白も設定しているし（class「module__heading2」）、タグクラウドのタグには記事件数が表示され、タグのフォントサイズも設定されています。
もちろんタグクラウドのタグは線で囲まれてボタン風になっています。






これらの記事、特に上記のリンク案内を目にした方は、「えー、そんなにカスタマイズされてるなら自分のブログのテンプレートと違うんじゃないの？」とか不安になるかもしれませんが、たぶん大丈夫です。

確かに私が独自に作ったclassやタグ表記が入りまくっていて、デフォルトの記述と違いすぎて戸惑われるかもしれませんが、基本的なやり方は変わらないです。
私のカスタマイズのどこがデフォルトのテンプレートと違うのか、ちゃんと書きました。
なのでたぶん、フィーリングで処理できると思います。

サイドバーの「タグクラウド」に設定した「side-waku」を削除する

「side-waku」とは、私が勝手に作ったclassです。
サイドバーの各コンテンツを線で囲み、背景色を付けました。
タグクラウドをプルダウンメニュー化するためにはこの枠線はいらないので、削除します。








では、コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面を開いて「<% if:parts_name == 'tag_cloud' # START parts -%>」を探します。たぶん、360行目にあります。



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

しつこいですが、タグクラウドそのものをプルダウンメニュー化したいと思っているので、枠線で囲む必要がないわけです。プルダウンメニューの枠線を編集することで他のコンテンツのスタイルと合わせるつもりなので、ここで枠線「side-waku」を削除しても問題ありません。





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

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

コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面を開いて「<% if:parts_name == 'tag_cloud' # START parts -%>」を探します。たぶん、360行目にあります。（上記で「side-waku」を削除した時と同じ位置です）



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


＜追加するコード＞

コンテンツHTMLのタグを削除する

サイドバーのタグクラウドに関する記述のうち、以下のコード2行と、その下3行を飛ばしたところにある終了タグ「</div>」を削除します。
（「<% loop:list_tags -%>」〜「<% /loop -%>」の次にある「</div>」のことです）


削除したら、そのまま空行にしておきます。（この部分に別のコードを追加します）


＜削除するコード（1）2行＞


＜削除するコード（2）終了タグ＞

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

先ほど削除した2行分の空白に、プルダウンメニュー用の下記「追加するコード（1）」をコピペします。
同じように、終了タグ「</div>」を削除して空白になった箇所に、下記の「追加するコード（2）終了タグ」（「</select>」と「</form>」）をコピペします。





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


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



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

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

タグクラウドのタグ部分の編集です。
下記の元コードの「a」タグを「option」タグに変更します。
「編集後」のコードのように変更してから「保存」をクリックします。


＜元コード＞





画像内の赤い矢印部分、つまりコード内で赤色文字で表示している部分を、下記「編集後」のように「option value」と「option」に変更します。


＜編集後＞

コンテンツHTMLとCSSの細かな修正

上記のカスタマイズにより、以前の記事で設定していたものがいくつか無効化されていますので、少し修正したいと思います。
最初に「コンテンツHTML編集」画面を、その後で「スタイルシート編集」画面を編集します。
もちろん、デフォルトのテンプレートの場合は、以下の作業をする必要はありません。次の項目『プルダウンメニューのスタイルを記述する（「side-pull」）』に飛んでください。

タグを表示させるためのコード部分の修正

まずは「コンテンツHTML編集」画面で、サイドバーのタグクラウドのタグを表示させるためのコード部分を修正します。
修正するのは、先ほど編集した「form」「option」あたりのコードです。


＜元コード（以前の記事で編集済み）＞



＜元コード（抜き出した記述）＞


現時点ではこのようなコード記述です。
私はタグクラウドの記事件数のフォントサイズを「11px」に設定していました。ここまでの作業によりこのフォントサイズは無効になるので、フォントサイズの開始タグ「<span style="font-size:11px;">」と終了タグ「</span>」を削除します。（結果的には無効になるため、タグがあってもなくてもかまわないわけで、もちろん残しておいても大丈夫です）



ついでに、タグの後ろの「記事件数」ですが、現時点ではタグとくっついて表記されるようになっています。
タグを線で囲む場合は気にならなかったけれども、プルダウンメニューにすると、タグと記事件数がくっつきすぎていて私には少し違和感があります。
記事件数のタグ「(<% count >)」の前に「半角スペース」を入れます。


＜編集後＞

タグのフォントサイズを変更していたコード部分の修正

次に、タグのフォントサイズを変更していたコード部分を修正します。
先ほど編集した箇所の下にある「<script>」の部分です。


＜元コード（以前の記事で編集済み）＞



＜元コード（抜き出した記述）＞


現時点ではこのようなコード記述です。
デフォルトの状態にパラメーターを追加して、「レベル」と「最小文字サイズ」（赤色文字の部分）を指定していました。
タグクラウドをプルダウンメニューにすることで、この設定は無効化されます。（タグのフォントサイズが全部同じサイズになるため）



このコード記述は、最初はあってもなくてもプルダウンメニューには関係ないので残しておこうと思っていましたが、Windowsのコンソールツールを使用して確認するとJavaScriptオブジェクトがエラーになります。
削除すると「問題ナシ」と評価されるので、削除しておいた方がいいと思います。
「あってもなくてもプルダウンメニューには関係ない」のは確かですが、コンソールでエラーが出てくる以上、残しておくのはやめた方がいいですね。思いきって削除しましょう。

2ヶ所編集した後の「コンテンツHTML」

CSSの編集（以前設定していたclassの修正）

ここで、CSS編集に移ります。
「コンテンツ編集」画面は「保存」をクリックして閉じて、「スタイルシート編集」画面を開いてください。



前回の記事＜■サイドバー「タグクラウド」のタグ（単語）を線で囲んでボタンにする＞では、サイドバーのタグクラウドのタグ（単語）を線で囲んでボタンのように表示させていましたが、タグクラウドをプルダウンメニューにするので、線は必要ありません。
CSSに追加していた「.module--tag-cloud ._tag」の記述を全部、削除します。


もしも「またいつかタグを線で囲むかもしれない」と思われる場合は、「コメントアウト」しておけばいいと思います。
私自身は削除するのではなくコメントアウトにしておきます。
もちろんタグを枠線で囲んでいない場合は、この作業をする必要はありません。


＜編集後＞




きちんとコメントアウトできていれば、文字色が茶色に変わります。

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

とりあえず、現時点でのサイドバーのタグクラウドです。
左側が通常の表示で、右側がプルダウンメニューを展開させた時の表示です。





コンテンツHTMLを編集したのでプルダウンメニュー化されていますが、見た目がちょっとおかしいです。
プルダウンメニューの横幅が、タイトル部分と比較すると短いですね。
しかも枠線も細いし。
なので、サイドバーの他のコンテンツと同じような枠線を表示させるために、新しくclass「side-pull」を作って、CSSに記述したいと思います。


つーかですね、実はね、class「side-pull」は既にコンテンツHTMLで記述しちゃってるんですよねｗ





この記事では最初からclass「side-pull」という名前でスタイルを決めると宣言していたので、コード編集の際に「side-pull」を記述しました。
もしも別の名前のclassにする場合は、コンテンツHTMLのこの「class="side-pull"」部分を別のclass名に変更してくださいね。



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



私は「サイドバー」関連はCSSにまとめて記述しているので、そこに追加しようと思います。
ここまでのカスタマイズ後ならば、CSSの679行目あたりに「サイドバー枠線」の記述があるのではないでしょうか。「side-waku」を記述している部分です。





この「side-waku」関連の下に、下記の「追加するコード」をコピペします。（もちろん、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と実際のページ

こんな感じになります。
サイドバーの他のコンテンツと比較しても、違和感はないと思います。

タグクラウドのタグの先頭に「●」を付ける

上記のままでもかまわないのですが、私は以前の記事でサイドバーの各コンテンツを編集した時に、リスト表示の先頭に「●」を付けるようにしたので＜■サイドバー「過去ログ」「カテゴリ」のリストの先頭に「●」を付ける＞、タグクラウドでも合わせてみたいと思います。



「コンテンツHTML編集」画面でサイドバーのタグクラウド部分を探します。（この記事で色々と説明している箇所です）
タグクラウドのタグを表示させるためのコード部分を、下記のように編集します。
まあ、「●」を足しただけですけども。


＜編集後＞

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

ちょっと画像キャプチャが雑になってしまいましたが、こんな感じで各タグ（単語）の前に「●」が付きます。







次の記事の紹介

以上、今回の編集ではサイドバーの「タグクラウド」をプルダウンメニューにしました。
ほぼ同じやり方をすると、サイドバーの「過去ログ」をプルダウンメニューにすることができます。プルダウンメニューではなくてリストボックスメニューにすることもできます。

「過去ログ」の月別リストの数が多くて、長々とサイドバーに表示されるのが気になるような場合は、次の記事で説明していますので、どうぞ。