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

「JavaScript」や「jQuery」を使わずにCSSだけで多階層のアコーディオンメニューを作る方法を知りたくてネットで検索しまくった結果、「CSS Multi-Level Accordion Menu | CodyHouse」というサイトを見つけました。



「CSS Multi-Level Accordion Menu | CodyHouse」のアコーディオンメニューは、「ul」「li」のリストタグと「label」と「input」を使ってコーディングされているので、好きなだけ多階層に編集できる便利なメニューです。


構造を理解できれば私のような素人でも簡単に多階層にできるし、アコーディオンではなくツリーメニューに変更することもできます。第1階層の左端のマークはクリックした時に動かすことができるので、CSSだけでアコーディオンメニューを設定したい場合は、このメニューを参考にすれば思い通りのメニューを作ることができると思います。



ちなみに「CSS Multi-Level Accordion Menu | CodyHouse」には、CSSだけで動くバージョンと「jQuery」を使ったバージョンの2つがあります。
私は「CSSだけで」アコーディオンメニューを実装したいので、この記事では「CSS Multi-Level Accordion Menu」をCSSだけでブログ等に実装する手順を説明します。


もしも「jQuery」を使いたい場合は、ネットで検索して実装の手順をご自分でお調べください。
私は「jQuery」を使っていないので、やり方がわかりません。
たぶん誰かがそういう内容の記事を書いているんじゃないかな？（検索すらしていないので記事があるかどうかもわかりませんが、たぶん、あると思います）



それと、今回はアコーディオンメニューのスタイルは変更はしないのでご注意ください。
例えば横幅やタイトルの行の高さ、背景色などの変更方法を説明するつもりはありません。ご自分でCSSをいじって調整してください。
（画像のパスの変更方法と、画像自体を変更する方法は書くつもりですが、この記事は単純に、アコーディオンメニューを設定する手順を書いているだけの記事です）



アコーディオンメニューに関してはいくつか記事を書いたので紹介しておきます。

CSSだけで作るアコーディオンメニュー「CSS Multi-Level Accordion Menu」をダウンロードする

まずは「CSS Multi-Level Accordion Menu | CodyHouse」をダウンロードします。
下記より『CodyHouse』様のページを開いてください。





紹介しているURLをクリックしてページを開くと、ヘッダー画像の下（右側）に「Demo」と「Download」のボタンがあります。
まずは「Demo」ボタンをクリックして、デモを動かしてみます。メニューを開いたり閉じたりして動きを確かめてください。



デモのページを開くと、アコーディオンメニューの上に「CSS ONLY」と「JQUERY」の2つのボタンがあります。このボタンをクリックすることで、デモを切り替えることができます。
実際に違いを確認してみると、「jQuery」を使った方が動きが滑らかです。
タイトルをクリックした時に、「CSS ONLY」だとズサッと出てくる感じで、「JQUERY」だとスルッと出てくる感じです。（なんという説明ｗ）



どちらのメニューがいいのかを改めて実感していただいて、「jQuery」を使いたいならばどうぞ、ご自分でお好きなように設定してください。しつこいですが、私は「jQuery」を使った設定方法を調べていないので知りません。
この記事で説明するのは「CSS」だけでアコーディオンメニューを設定する方法です。

ダウンロードのやり方

「CSS Multi-Level Accordion Menu | CodyHouse」を利用する場合は、上記URL先の、ヘッダー画像の右下にある「Download」ボタンをクリックして、メニューに関するファイル一式をダウンロードします。（デモサイトではなく、上記URL先のサイトです）
ダウンロードしたファイルを解凍して、そのまま使わせてもらえば大丈夫です。



編集するのはダウンロードしたファイルそのものではなくコピーしたファイルにします。
以降の手順の中では不必要なファイルやフォルダを削除するので、いわゆる原本を使ってしまうと元に戻せなくなってしまいます。



「Download」ボタンをクリックしてパソコンにデータをダウンロードしたら、Windowsの場合は「ダウンロード」フォルダに「multi-level-accordion-menu.zip」フォルダが出来ます。
このZIPファイルを解凍すると2つのフォルダがありますので、この2つを、あらかじめ別の場所（例えば「ドキュメント」）に作ったフォルダ内にコピーして使います。

必要なファイルを選択する

解凍したフォルダを開くと2つのフォルダがあります。





このうち「__MACOSX」フォルダには「JavaScript」のデータが入っているみたいですが、よくわからないのでスルーします。（私は「CSSだけで」アコーディオンメニューを作りたいので、そもそも「JavaScript」は必要ありません）


まあ、ちょっと調べてみたら、「__MACOSX」フォルダはMac OSで圧縮したデータをWindowsでダウンロードして解凍すると自動的に作られてしまうフォルダのようですね。パソコンがWindowsの人には無関係のフォルダなので、削除してもかまわないみたいです。
そのままスルーしても削除しても、どちらでもかまいません。



ということで、私のパソコンはWindowsなので「__MACOSX」フォルダはスルーして、もう1つのフォルダ「multi-level-accordion-menu」を使用します。
フォルダを開くと5つのフォルダと3つのファイルがあります。





使いたいのは「CSS」フォルダと「img」フォルダと「index.html」ファイルです。他のフォルダやファイルはよくわからないので無視します。
しつこいですが、私は「CSSだけで」アコーディオンメニューを作りたいのです。「JavaScript」や「jQuery」が関係しそうなファイルは無視します。



とりあえず、必要なフォルダだけを残してあとは削除しました。

「CSS」フォルダ内の「reset.css」について

「CSS」フォルダを開くと「reset.css」と「style.css」の2つのファイルがあります。
この2つのファイルのうち「style.css」はメニューのスタイルを設定しているファイルなので当然必要なものです。
もう1つの「reset.css」は、ご自分のブログやサイトの仕様で異なります。

「reset.css」を適用するかどうかを考える

まずは、「reset.css」と「style.css」の2つのファイルを、両方とも使用した状態のアコーディオンメニュー（プレビュー画像）を紹介します。その次に、「style.css」だけを使用した状態のプレビュー画像を掲載しますので、見比べてみてください。


「reset.css」と「style.css」を使用



「style.css」だけを使用



違いはすぐにわかると思います。
下の画像の「style.css」だけの場合（つまり「reset.css」を適用していない場合）は、タイトルの先頭にリストマーク（この画像の場合は「●」とか「○」）が表示されています。


これは、「reset.css」の記述の中で、リストスタイルの「ol」と「ul」に対して「list-style: none;」（リスト先頭のマークなし）と指示されているからです。
「style.css」には「reset.css」のようなリストマークに関する記述がありません。
なので「style.css」だけを適用する場合（下の画像の場合）は、通常のリストマーク（「●」や「○」）が表示されるわけです。



「reset.css」とは、各ブラウザが持っているデフォルトのCSSを一度リセットしてしまうために設定するCSSです。ブラウザ間の表示差異を一度リセットしてしまって、改めてCSSを記述していこうぜー！って考えの元に記述されているスタイルシートです。だから「リセット」という名前を付けたCSS（スタイルシート）なわけです。


CSSをリセットするものなので、どのサイトやブログでもだいたい共通のコードが記述されています。（細かな違いは知りませんので「リセットCSS」という言葉で検索されてみたらいいと思います）



この「reset.css」を適用するかしないかは、使用中のブログやサイトの設定で個々に違います。
自分のブログ等で既に「reset.css」を適用しているのであれば、改めて適用する必要はありません。
また、CSSファイルとして独立した「reset.css」がなくても、CSSの記述の中に「reset.css」と同じ内容の記述があったりします。ご自分のブログ等のCSSを確認してみてください。

例としてSeesaaブログの場合の「reset.css」

例えばですが、私が使っているSeesaaブログの場合は、CSS上に「/* reset */」とコメントアウトで見出しが付けられた記述があります。これが「reset.css」の記述にあたります。





CSSには「reset.css」の内容が既に記述されているわけですから、Seesaaブログの場合は「reset.css」というファイルそのものは必要はありません。「style.css」の記述内容だけが必要になります。（つまり「reset.css」をアップロードする必要が無いということです）



今回ダウンロードしたファイルを使用する場合は、ご自分の環境に合ったファイルだけを使ってください。
「reset.css」が必要なのかどうかはご自分でお決めください。
まあ、余計なファイルまでアップロードすると、悪さはしないけれども、邪魔です。

画像ファイルをアップロードし、HTMLとCSSの記述を変更する

CSSだけでアコーディオンメニューを実装するためには、ダウンロードしたファイルのうち、「index.html」ファイルと「img」フォルダと、「CSS」フォルダの中の「style.css」を使います。（「reset.css」については上記の通り、ご自分で判断してください）



ご自分のブログやサイトにこれらのファイルをアップロードします。
そして、HTMLとCSSを変更することになります。

「img」フォルダをアップロードする

まずは「img」フォルダをご自分のブログやサイトにアップロードします。


ブログやサイトの仕様によりフォルダごとアップロードができるかどうかの違いがありますが、必要なのは「img」フォルダの中の「cd-icons.svg」です。


Seesaaブログのように画像はアップロードできるけれどもフォルダそのものをアップロードできない場合は、中身の「cd-icons.svg」ファイルをアップロードしてください。

「index.html」の記述をHTMLにコピペする

ダウンロードした「index.html」の記述のうち、必要なのはアコーディオン部分だけです。
ブログやサイトのどの部分にアコーディオンメニューを表示させたいのかを決めて、その部分のHTMLに「index.html」のアコーディオン部分のHTML記述をコピーします。



「index.html」を開くと18行目にアコーディオンの開始タグ「<ul class="cd-accordion-menu animated">」があるので、このタグ以下をご自分のブログやサイトのHTMLにコピーします。
コピーするのは94行目の終了タグ「</ul> <!-- cd-accordion-menu -->」までです。
終了タグ「</ul>」以下の数行は必要ありません。（「<script>」タグがありますが、jQueryは使わずに実装したいので、このタグ以下は不必要です）

「style.css」の記述をCSSにコピペする

ダウンロードした「CSS」フォルダの中の「style.css」を開きます。
最初にコメントアウトされた見出し「Primary style」があり、その下にスタイル記述があります。
47行目に同じくコメントアウトされた見出し「Main Components」があって、その下にアコーディオンメニューに関するスタイル記述があります。



最初の「Primary style」以下の記述は、いわゆる初期設定部分です。
フォントサイズやページの背景色等が指示されているので、厳密に言えばアコーディオンメニューのスタイルとは無関係です。



わかりやすいように画像を載せておきます。
上が「Primary style」（初期設定部分）アリの場合、下がナシの場合です。
メニューのフォントサイズやページの背景色、リンク部分の下線等が異なりますが、アコーディオンメニューの機能に関する違いはありません。


「Primary style」の記述あり



「Primary style」の記述なし



必要なのはあくまでもアコーディオンメニューに関する記述なので、初期設定が記述されている「Primary style」以下のコードは無視します。（例えばリンク部分に下線を入れるとかフォントサイズとか、そういうものは各ブログやサイトの仕様で異なるし、通常は既にCSSで設定済みだと思います）


実際にアコーディオンメニューを設定した後で何かおかしな感じになった場合に、「Primary style」以下の記述を参考にしてご自分のブログやサイトを調整すればいいと思います。



ということで、「style.css」の記述のうち、コメントアウトされた見出し「Main Components」以下の記述を全部、ご自分のブログやサイトのCSSにコピペします。CSSの空いている場所（一番下など）にそのままコピーして貼り付ければ大丈夫です。
「Main Components」という見出しはコピーしてもしなくても構いません。必要なのは52行目以下の記述です。

ファイルのパスを変更する

アコーディオンメニューには画像ファイル「cd-icons.svg」が使われています。
先ほどこの画像をアップロードしましたが、ブログやサイトの仕様により、ダウンロードしたままの状態（デフォルトの状態）とは異なった場所に画像ファイルが存在することになります。
（デフォルトの状態と同じ場所にすべてのファイルをアップロードできた場合は、ファイルのパスの変更をする必要はないので、以下の説明は飛ばして、どうぞ。）



例えばSeesaaブログでは、CSSとHTMLを編集することができます。画像もアップロードできます。
でもフォルダそのものをアップロードすることはできないし、「index.html」もアップロードできません。（画像として処理されてしまいます）
他のブログやサイトでも同じように、アップロードできるファイルの種類が指定されているはずです。（ご自分でサーバーを借りてサイトを作っておられる場合は、無関係です）



フォルダそのものをアップロードできない場合は「img」の中の「cd-icons.svg」ファイルだけをアップロードすることになります。そうすると、デフォルトの画像ファイルがあった場所、つまり『「img」フォルダの中の画像ファイル』という構成から『「img」フォルダの中の』という部分がなくなるわけです。（「img」フォルダをアップロードできないのですから当然です）
画像ファイルは、『単体の画像ファイル』としてブログにアップロードされている状態になります。



アップロードした画像をブログ等で表示させるためには、「style.css」の記述の中で「ここの画像を使う」と指示を出しているはずです。
デフォルトの状態だと、それは『「img」フォルダの中の画像ファイル』という指示でした。でも、『単体の画像ファイル』としてアップロードしたことで、画像ファイルの場所が変わってしまいました。
なので改めて「ここにある画像を使う」と指示を出し直さなければいけません。
「ファイルのパスを変更する」というのは、この作業を言います。

ファイルのパスを変更するための大まかな手順

とりあえず、私が使っているSeesaaブログの場合の手順を説明します。
他のブログやサイトにアコーディオンメニューを設定する場合も同じようなやり方をすることになると思いますが、ご自分のブログの仕様に合わせて調整してください。



既に「img」フォルダの中の画像「cd-icons.svg」をSeesaaブログにアップロードしていると思いますので、アップロード後の画像を開いて、画像のURLをパソコンのメモ帳ソフト等にコピペしておきます。
ここでは、取得したURLを仮に「http://□□□.up.seesaa.net/image/cd-icons.svg」としておきます。


Seesaaブログの「CSS編集画面」を開き、先ほどコピペした「style.css」の記述を確認します。
手っ取り早く変更する場所を特定するために、「cd-icons.svg」という単語で検索をかけます。
ファイルのパスを変更しなければいけないのは次の2ヶ所です。





「url(../img/cd-icons.svg)」という記述のパスを変更します。
画像ファイルをアップロードして取得した画像のURLは「http://□□□.up.seesaa.net/image/cd-icons.svg」なので、以下のように変更します。




URL部分を入れ替えるだけなので簡単です。
この作業をすると、どのブログやサイトでもアコーディオンメニューを表示できると思います。
あとは、CSSで背景色やフォント等のスタイルを好きなように変更し、HTMLで表示させたい言葉やリンク先を設定すれば大丈夫です。




次の記事の紹介

アコーディオンメニューのボタンの色や文字の色をデフォルトの状態から変更する場合、使われている画像（アイコン）がメニューに合わないことがあると思います。
自分が作ったアイコンや好きなアイコンを使いたい場合もあるかもしれません。


「CSS Multi-Level Accordion Menu」で使われている画像（アイコン）は1種類だけで、しかも4つのアイコンをつなげて使用しています。
（左から矢印マーク、フォルダマーク、開いたフォルダマーク、画像マーク）



この並びを変更することはできないし、デフォルトのままだとコンテンツ部分には必ず画像マークが表示されてしまうわけです。（例えば「記事タイトル」を表示させていても「画像マーク」がタイトルの先頭に付くことになって、メニュータイトルの表示とアイコンが合いません）


もしも「4つのアイコンをバラバラにして使いたい」とか「自分が使いたい画像に変更したい」場合は、色々と作業が必要になります。
画像の変更方法は、次の記事で説明します。