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

ブログのカスタマイズをしているうちに、サイドバーにメニューを表示させたくなりました。
ブログの上部に「グローバルナビゲーションメニュー」を置いていても、ページをスクロールするとナビメニューが見えなくなってしまうんです。（そりゃそうだｗ）
ナビメニューを常に表示させておく方法もあるんですが、私が設置しているナビは多階層なので、常に画面の上部にあるのは邪魔にしかならないんですよね。



「サイドバーの下の方にメニューを置くことができたら（私が）便利だろう」と思ってアコーディオンメニューを探しましたが、第2階層までのメニューが多いし、検索結果はほとんど「JavaScript」や「jQuery」を使っているものばかりです。
とにかく私は、多階層のメニューがほしいし「JavaScript」や「jQuery」みたいに私が勉強していないようなもので説明されても困るのです。（ヒドイｗ）



「CSSだけで」多階層のメニューを作れないかな？と探して、参考にしながら試行錯誤して、とりあえず何とかなったので記事にしました。（けっこう大変だったんだよね）
この記事ではCSSだけで多階層の「ツリーメニュー」をSeesaaブログに表示させる方法を書きます。


編集後のイメージ




ちなみに、「ツリーメニュー」と似たようなメニューに「アコーディオンメニュー」というものがあります。
「アコーディオンメニュー」はボタン表示、つまり背景色を付けて階層を分けているメニューで、「ツリーメニュー」は文字だけで表示させるメニューだ、というのが私の理解です。
この解釈が正解なのかどうかは関係なく、私はこういう認識で「ツリーメニュー」や「アコーディオンメニュー」という言葉を使い分けていますので、ご了承ください。




今回のカスタマイズですが、下記で紹介している『CodyHouse』様の記事を参考にさせていただきました。英語表記のサイトですが、書いてある内容はなんとなくわかると思います。


文字だけで表示させるメニュー「ツリーメニュー」ではなく「アコーディオンメニュー」を表示したい場合は、『CodyHouse』様のサイトを参考にしていただくと良いと思われます。（『CodyHouse』様のサイトでは「アコーディオンメニュー」の作り方を紹介されています）

ツリーメニューの注意点

ツリーメニューのCSSやHTMLを説明する前に、注意点を書いておきます。
欠点を知った上で使ってもかまわないという場合のみ、コピペして使ってください。


まあ、欠点と言っても「Internet Explorer 8」に対応していないことと、アイコン用の画像を4つ準備しなければいけないことだけなんで、欠点じゃないかもしれないですね。
面倒くさい点、ってことで。

「Internet Explorer 8」には対応していません

今から紹介するツリーメニューは「Internet Explorer 8」では動きません。
「Google Chrome」や「Firefox」などの他のブラウザや、「Internet Explorer 9」以上だと動きますが、「Internet Explorer 8」で閲覧するとアイコンの位置がリストタイトルよりも下にズレて表示されるし、リスト部分をクリックしても開きません。
使っているコードやタグが「Internet Explorer 8」では非対応だからです。



現時点の「Internet Explorer」の最新バージョンは「11」です。そして、「11」が最後のバージョンです。
マイクロソフトは、Windows10を配布した時点で標準ブラウザを「Microsoft Edge」に変更しました。（「Microsoft Edge」が「Internet Explorer」の後継ブラウザです）
最新バージョンが「11」なのに、2009年に配布された「8」を未だに使用している人の方が悪いのだ、という理屈で、私は「IE8」使用者を切り捨てたいと思いますｗ



「IE8」を未だに使っている人は、使いたくて使っている人たちだと思います。既に「11」なのにバージョンアップしていないのには、それなりの理由があるはずだからです。
「他のブラウザでは表示できるものが表示されない」という環境を理解して受け入れている人たちなのですから、「コードとかタグとかそういうものがIE8では使えないから、本当は設置したいけど、やっぱりツリーメニューを置くのはやめよう」とか、私が思う必要はないのです。きっと。
「IE8」の現状を知らずにバージョンアップしていない人は、あまりにも現状把握ができていない人だということで、さくっと切り捨てます。うん、知らんがなｗ



ということで、私が言いたいのは、もういい加減に「IE8」のことまで考えてコーディングしたりタグやコードを記述する必要は無いのではないか？ってことです。
でもって、「IE8」で表示させて「何コレ？」と思う人がいたとしても、それは閲覧者側にそうなるだけの理由があるのだからヤイヤイ言わないでね！ってことで、なんつーかやっぱりもう、「知らんがなｗ」

4つのアイコン用画像が必要になる

とりあえず、完成イメージをもう一度掲載しておきます。





この画像を見たらわかるように、リストの左横に「丸矢印」「フォルダアイコン（プラス）」「フォルダアイコン（マイナス）」「オレンジ矢印」の4つのアイコン画像を表示させるようになっています。
この画像4つはご自分で準備してブログにアップロードしておいてください。



「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方たちが無料でアイコン用画像をダウンロードさせてくれます。私自身も使用しているのはダウンロードして集めた画像です。
例えば、記事＜■【CSS Multi-Level Accordion Menu | CodyHouse】のアイコン画像を変更する＞でも同じようにアイコン画像を使用していますが、こんな感じの画像がネット上にはたくさん準備されています。
検索すれば簡単に見つけることができますので、ご自分で探してみてください。好きな画像にすればいいと思います。



ちなみに、「丸矢印」アイコンは「下向きの矢印」が必要です。
そもそも参考にしたアコーディオンメニューで下向きの矢印が使われていたので、それを踏襲しただけですが、CSSの記述で「90度傾ける」という指示があり、その指示を前提にカスタマイズされているので、必ず下向きの矢印画像を準備してください。



画像のサイズは4つとも「16px × 16px」です。
CSSに「サイズは16px」という記述があるので、必ず「16px」の画像を準備してください。


もしもアイコンのサイズを変更する場合は、下記で掲載しているCSSの記述の中から該当部分探して変更してください。私自身が実行していないカスタマイズなので説明はしません。でも、アイコンのサイズに関する記述はすぐにわかると思います。

「コンテンツ」にツリーメニューのHTMLコードを追加する

Seesaaブログのサイドバーにツリーメニューを表示させたいので、「コンテンツ」の「自由形式」を使います。まずは「管理画面＞デザイン」から「コンテンツ」を開きます。






「コンテンツ」画面を開いたら、左側の「ブログパーツ」から「自由形式」を選び、「サイドバー」にドラッグ＆ドロップします。
（私が使っているテンプレートは「シンプルA. ホワイト 右カラム」なので、ドラッグ＆ドロップするサイドバーは「右サイドバー」になります）






移動させた「自由形式」の歯車マークをクリックします。






「自由形式」の歯車マークをクリックすると、「パーツ設定 - 自由形式」というウィンドウが開きます。
まずは「名前欄」が「自由形式」になっているので「メニュー」とか「メニューリスト」とか、わかりやすいように名前を変更します。






「自由形式」の欄には何も記入されていない状態です。
ここに下記掲載のHTMLコードをコピペし、「保存」ボタンをクリックします。





右上の「コンテンツHTML編集」（青色の線で囲んでいる部分）を開いてHTMLコードを記述するわけではないので注意してください。
ここまでのカスタマイズの中で、各コンテンツのスタイルについては全体のコンテンツHTMLで編集済です。自由形式のスタイルも編集済なので、コンテンツHTML自体の編集をここでする必要はないのです。ツリーメニューを表示させるためのHTMLコードをコピペするだけですから、「自由形式」の欄を使います。



「保存」ボタンをクリックして「自由形式」のウィンドウを閉じたら、コンテンツ全体の「保存」ボタンをクリックするのを忘れないでください。

ツリーメニューのHTMLコード

「ツリーメニュー」のHTMLコードを掲載します。
かなり長いコードになりますが、とりあえずそのままをコピペして、あとはご自分のブログに合うように変更してください。
コピペ後に変更内容を「保存」するのを忘れないでください。


＜コンテンツHTMLに追加するコード＞


●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー（Tabキー）」でタグを1つずつ移動させ、体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。


●リンク先URLは「<a href="#0">」の部分に記述します。「" "」は消さないように注意して「#0」とリンク先URLを入れ替えてください。（入れ替える時は「#0」を削除します）


●ツリーメニューには第4階層までを表示させています。関係がわかるように「第○階層」や「グループ○」「コンテンツ○」等の言葉をそのまま使っています。メニューに表示させる内容が決まったら、書き換えてください。


●クリックで開閉させる場合は、「<li>」の直下に「input」と「label」が必要になります。上記のコード内容を確認して記述してください。

「input」と「label」の名前について

例えば第1階層の「input」と「label」です。



●同じ名前を付けること
「input」と「label」には「group-1」という名前があります。「name」「id」「for」の3ヶ所の名前は統一してください。
細かいことは説明しませんが、統一しないとおかしなことになります。（なんてざっくりとした説明ｗ）


●名前は1つずつ
同じ名前を別の「label」グループに付けることはできません。
第1階層のグループAに対する名前は「group-1」ですが、これをグループBにも「group-1」と付けることは許されません。
同じ名前にしてしまうと、『グループAもBも同じものだ』とブラウザに思われてしまいます。


例えば「第1階層 グループA」と「第1階層 グループC」に同じ名前を付けた場合、「第1階層 グループC」をクリックすると、「第1階層 グループA」が開いてしまいます。
ということは、「第1階層 グループC」は開けない、つまり展開することができないということです。（常に「第1階層 グループA」が開くので当然です）
同じ名前にしてしまうとこういう弊害が出ますので、必ず違う名前を付けてください。


特に、階層を増やすために入れ子をする場合は、リスト表示のコード記述をコピペして使うことが多いと思いますので、「input」と「label」の名前の付け方には注意してください。（コピペしたままのコードを使ってしまうと、同じ名前を付けてしまうことになります）

最初からリストを開いておく場合

「input」の記述のうち、最後に「checked」がありますが、これは「最初から開いておく」という意味です。
「checked」を付けると初めからそのリストは展開済ということになりますので、最初にリストを閉じた状態（第1階層のタイトルだけを表示させた状態）で表示させたいならば「checked」を削除してください。

ツリーメニューのCSSコードを追加する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述を追加します。CSSの一番下でいいと思います。
コピペ後に変更内容を「保存」するのを忘れないでください。


＜CSSに追加するコード＞


●CSSの記述の中で、何についてのスタイルなのかわかるようにコメントアウトで見出しを付けています。（青色の部分です）
それ以外の細かいことは私にはわからないので、ご自分でお調べいただきたいと思います。
このツリーメニューは、ページ最初に紹介した『CodyHous』様の記述を改編して作ったものです。私が勝手に改編した記述内容なので、詳しいことを知りたい場合は『CodyHous』様のサイトを参考にご自分でお調べください。


●上記の項目「ツリーメニューの注意点」で書いた通り、このツリーメニューではアイコン画像を4つ使います。
上記のCSSに赤色で表示しているURLは、私のデモ用のブログURLです。このままこのURLを使うと、私が画像を削除した時や画像の名前を変更した時に表示できなくなります。そのまま使うのはやめてください。
ご自分でアイコン画像を準備して、アップロードしてください。そして、赤色の部分4ヶ所を、必ずご自分のブログのURLに変更してください。


●リストを展開する時には「丸矢印」が回転します。展開済のリストをクリックすると、反対に回転してリストが閉じます。
色々といじっているうちにこんな状態になったのですが、面白いのでそのまま使うことにしました。


●余白（padding-left）や位置（left）の数値で、アイコンの位置を指定しています。
ご自分のブログにHTMLコードを記述後、実際に動かしながらCSSの余白の数値を調整して、適当な位置を見つけてください。

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

次の記事の紹介

次の記事では、カテゴリページの記事リスト先頭にマークを付ける方法を説明します。