【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」をプルダウンメニューにする|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。右カラム」を編集した結果、現時点でのサイドバーの「タグクラウド」は、下の画像のようになっています。(デモブログのタグクラウドだとタグの登録件数が少ないのでわかりにくいかな?と思って、「仮」という意味でタグ登録数が多い画像を準備しました)現時点のテンプレート現時点のタグクラウドは、前回の記事<■サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする>でタグ1つずつを線で囲んだので、ボタンのように表示されています。タグクラウドに関しては、もちろんこのままの表示で問題はありません。私は、どうしてもタグクラウドを「プルダウンメニュー」にしたいのです!タグが増えれば増えるほど、サイドバーのタグクラウドが邪魔になる気がするので折りたたんでしまいたい。なると「プルダウンメニュー化」してしまう方が、色々と考えなくていいからラクです。編集後のイメージこのように、サイドバーでは「タグを選択してください」という1行分しか表示しないようにして、場所を取らないようにしたいと思います。「タグを選択してください」の右側にある下向き矢印をクリックすると、登録しているタグがバーッと展開されるので、機能面での問題もありません。ブログでタグを全部表示させておくと確かに何のタグがあるのかすぐにわかるけれども、そんなにタグを利用する人がいるか?って話なんですよね。私自身はタグをカテゴリと同じように記事リストを作るために利用しているんですが、普通はあんまり使わないのではないでしょうか。タグの数が多くなってしまった場合は、場所を取るような状態で表示させておくよりも、プルダウンメニューにしてスッキリさせた方がいいのではないでしょうかね。(個人の好みの問題ですけどね)ちなみに今回のカスタマイズは、こちらのサイト様の記事を参考にしました。■Seesaaブログで過去ログ(月別ログ)部分をプルダウンにする記事名でわかるように、元々こちらの記事は「過去ログ」をプルダウンメニュー化する内容です。これをどうにか「タグクラウド」に利用できないかと思って試行錯誤してみたら、意外と簡単にできました。昔に書かれた記事ですが、今でもバッチリ利用できます。ありがとうございました。サイドバーの「タグクラウド」をプルダウンメニューにする手順まずは、「コンテンツHTML」を編集します。プルダウンメニューにする場合は、以前の記事で設定していたタグクラウドの枠線が不必要になりますので、これを削除します。「JavaScript(ジャバスクリプト)」を追加し、「form」や「option」タグを使ってプルダウンメニュー化します。次に、設定していた枠線の代わりに、プルダウンメニュー自体に他のコンテンツと同じような枠線を表示させます。サイドバーの他のコンテンツが線で囲まれていますので(そのように私自身がカスタマイズしました)、プルダウンメニューにしたタグクラウドも同じように線で囲まないと違和感がありますから。枠線のスタイルを指定するために、新しくclass「side-pull」(サイドのプルダウンメニューの「プル」という意味でこのようなclass名にしました)を作って、CSSに記述します。class「side-pull」はサイドバーの他のコンテンツにも使えるので、このclass名でいいのではないでしょうか。(「side-tag」とかにすると、タグクラウドにしか使えない気がしますからw)大まかには以上のような作業になります。ちなみに、今回の編集は、ここまでのカスタマイズ後のコード記述が前提となっています。サイドバーのタグクラウドには枠線と背景色が設定されていて(class「side-waku」)、タグクラウドのタイトルの下余白も設定しているし(class「module__heading2」)、タグクラウドのタグには記事件数が表示され、タグのフォントサイズも設定されています。タグクラウドのタグは線で囲まれてボタン風になっています。当記事の関連記事■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)■サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする■サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにするこれらの記事、特に上記のリンク案内を目にした方は、「えー、そんなにカスタマイズされてるなら自分のブログのテンプレートと違うんじゃないの?」とか不安になるかもしれませんが、たぶん大丈夫です。確かに私が独自に作ったclassやタグ表記が入りまくっていて、デフォルトの記述と違いすぎて戸惑われるかもしれませんが、基本的なやり方は変わらないです。私のカスタマイズのどこがデフォルトのテンプレートと違うのか、ちゃんと書きました。フィーリングで処理できると思います。サイドバーの「タグクラウド」に設定した「side-waku」を削除する「side-waku」とは、私が勝手に作ったclassです。サイドバーの各コンテンツを線で囲み、背景色を付けました。タグクラウドをプルダウンメニュー化するためにはこの枠線はいらないので、削除します。【注意】サイドバーを枠線で囲んで背景色を付けていない場合はこの作業をする必要はありません。いうか、そもそも「side-waku」というclassが無いと思いますので、この作業は飛ばして、どうぞ。コンテンツHTMLを編集します。360行目にあります。class="side-waku">」と「</div>」を削除します。しつこいですが、タグクラウドそのものをプルダウンメニュー化したいと思っているので、枠線で囲む必要がないわけです。プルダウンメニューの枠線を編集することで他のコンテンツのスタイルと合わせるつもりなので、ここで枠線「side-waku」を削除しても問題ありません。class="side-waku">」と「</div>」を削除したら、空白のままにしておいてください。以下の編集で、この部分に別のコードを記述します。「JavaScript(ジャバスクリプト)」を追加するコンテンツHTMLを編集します。360行目にあります。class="side-waku">」があった場所に以下の「追加するコード」をコピペします。class="side-waku">」を記述していなかった場合(枠線や背景色を設定していなかった場合)は、タグクラウドの「タイトル部分」のコード下に追加します。sel.options[sel.selectedIndex].value;}}--></script>コンテンツHTMLのタグを削除するサイドバーのタグクラウドに関する記述のうち、以下のコード2行と、その下3行を飛ばしたところにある終了タグ「</div>」を削除します。-%>」の次にある「</div>」のことです)削除したら、そのまま空行にしておきます。先ほど削除した2行分の空白に、プルダウンメニュー用の下記「追加するコード(1)」をコピペします。同じように、終了タグ「</div>」を削除して空白になった箇所に、下記の「追加するコード(2)終了タグ」(「</select>」と「</form>」)をコピペします。value="">「タグ」を選択して下さい</option>」の部分は、プルダウンメニュー内に表示される案内文です。私は『「タグ」を選択して下さい』という言葉にしましたが、お好きな言葉を入れてください。<追加するコード(2)終了タグ></select></form>「a」タグを「option」に変更するタグクラウドのタグ部分の編集です。下記の元コードの「a」タグを「option」タグに変更します。「編集後」のコードのように変更してから「保存」をクリックします。value」と「option」に変更します。上記のカスタマイズにより、以前の記事で設定していたものがいくつか無効化されていますので、少し修正したいと思います。最初に「コンテンツHTML編集」画面を、その後で「スタイルシート編集」画面を編集します。デフォルトのテンプレートの場合は、以下の作業をする必要はありません。次の項目『プルダウンメニューのスタイルを記述する(「side-pull」)』に飛んでください。タグを表示させるためのコード部分の修正まずは「コンテンツHTML編集」画面で、サイドバーのタグクラウドのタグを表示させるためのコード部分を修正します。修正するのは、先ほど編集した「form」「option」あたりのコードです。-%>現時点ではこのようなコード記述です。私はタグクラウドの記事件数のフォントサイズを「11px」に設定していました。style="font-size:11px;">」と終了タグ「</span>」を削除します。(結果的には無効になるため、タグがあってもなくてもかまわないわけで、もちろん残しておいても大丈夫です)ついでに、タグの後ろの「記事件数」ですが、現時点ではタグとくっついて表記されるようになっています。タグを線で囲む場合は気にならなかったけれども、プルダウンメニューにすると、タグと記事件数がくっつきすぎていて私には少し違和感があります。>)」の前に「半角スペース」を入れます。次に、タグのフォントサイズを変更していたコード部分を修正します。先ほど編集した箇所の下にある「<script>」の部分です。</script>現時点ではこのようなコード記述です。デフォルトの状態にパラメーターを追加して、「レベル」と「最小文字サイズ」(赤色文字の部分)を指定していました。タグクラウドをプルダウンメニューにすることで、この設定は無効化されます。(タグのフォントサイズが全部同じサイズになるため)このコード記述は、最初はあってもなくてもプルダウンメニューには関係ないので残しておこうと思っていましたが、Windowsのコンソールツールを使用して確認するとJavaScriptオブジェクトがエラーになります。削除すると「問題ナシ」と評価されるので、削除しておいた方がいいと思います。「あってもなくてもプルダウンメニューには関係ない」のは確かですが、コンソールでエラーが出てくる以上、残しておくのはやめた方がいいですね。思いきって削除しましょう。2ヶ所編集した後の「コンテンツHTML」CSSの編集(以前設定していたclassの修正)ここで、CSS編集に移ります。「コンテンツ編集」画面は「保存」をクリックして閉じて、「スタイルシート編集」画面を開いてください。前回の記事<■サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする>では、サイドバーのタグクラウドのタグ(単語)を線で囲んでボタンのように表示させていましたが、タグクラウドをプルダウンメニューにするので、線は必要ありません。._tag」の記述を全部、削除します。「またいつかタグを線で囲むかもしれない」と思われる場合は、「コメントアウト」しておけばいいと思います。私自身は削除するのではなくコメントアウトにしておきます。タグを枠線で囲んでいない場合は、この作業をする必要はありません。3px;}*/きちんとコメントアウトできていれば、文字色が茶色に変わります。プルダウンメニューのスタイルを記述する(「side-pull」)とりあえず、現時点でのサイドバーのタグクラウドです。左側が通常の表示で、右側がプルダウンメニューを展開させた時の表示です。コンテンツHTMLを編集したのでプルダウンメニュー化されていますが、見た目がちょっとおかしいです。プルダウンメニューの横幅が、タイトル部分と比較すると短いですね。サイドバーの他のコンテンツと同じような枠線を表示させるために、新しくclass「side-pull」を作って、CSSに記述したいと思います。実はね、class「side-pull」は既にコンテンツHTMLで記述しちゃってるんですよねwこの記事では最初からclass「side-pull」という名前でスタイルを決めると宣言していたので、コード編集の際に「side-pull」を記述しました。別の名前のclassにする場合は、コンテンツHTMLのこの「class="side-pull"」部分を別のclass名に変更してくださいね。いうことで、CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述をコピペします。CSSの一番下でいいと思います。私は「サイドバー」関連はCSSにまとめて記述しているので、そこに追加しようと思います。ここまでのカスタマイズ後ならば、CSSの679行目あたりに「サイドバー枠線」の記述があるのではないでしょうか。「side-waku」を記述している部分です。この「side-waku」関連の下に、下記の「追加するコード」をコピペします。100%;}●プルダウンメニューの枠線を、他のコンテンツの枠線と同じにしました。#A7B3BE;)●他のコンテンツと同じように背景色を設定しました。100%;」を記述して、プルダウンメニューの横幅を広げました。100%」を「side-pull」に記述してください。100%にすることで、プルダウンメニューの横幅を長くできます。その他「padding」や「color」を設定するかどうかは、お好きなようにどうぞ。●コンテンツHTML編集の際に「side-pull」というclass名ではなく別のclass名を設定した方は、ここでのclass名をご自分で設定したclass名に変更してください。コード編集後のCSSと実際のページこんな感じになります。サイドバーの他のコンテンツと比較しても、違和感はないと思います。タグクラウドのタグの先頭に「●」を付ける上記のままでもかまわないのですが、私は以前の記事でサイドバーの各コンテンツを編集した時に、リスト表示の先頭に「●」を付けるようにしたので<■サイドバー「過去ログ」「カテゴリ」のリストの先頭に「●」を付ける>、タグクラウドでも合わせてみたいと思います。「コンテンツHTML編集」画面でサイドバーのタグクラウド部分を探します。(この記事で色々と説明している箇所です)タグクラウドのタグを表示させるためのコード部分を、下記のように編集します。「●」を足しただけですけども。-%>コード編集後の実際のページちょっと画像キャプチャが雑になってしまいましたが、こんな感じで各タグ(単語)の前に「●」が付きます。以上、今回の編集ではサイドバーの「タグクラウド」をプルダウンメニューにしました。同じやり方をすると、サイドバーの「過去ログ」をプルダウンメニューにすることができます。プルダウンメニューではなくてリストボックスメニューにすることもできます。「過去ログ」の月別リストの数が多くて、長々とサイドバーに表示されるのが気になるような場合は、次の記事で説明していますので、どうぞ。■【Seesaaブログ新デザインシステム】サイドバー「過去ログ」をプルダウンメニューにする前回の記事では、サイドバーの「タグクラウド」をプルダウンメニュー化しました。今回は同じように「過去ログ」(月別アーカイブ)もプルダウンメニューにしたいと思います。[必須入力]※画像の中の文字を半角で入力してください。