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

前回の記事＜■【CSS Multi-Level Accordion Menu | CodyHouse】を使ってCSSだけでアコーディオンメニューを設定＞では、CSSだけでアコーディオンメニューを設定できる「CSS Multi-Level Accordion Menu | CodyHouse」の紹介をしました。



上記でリンク案内している『CodyHouse』様のサイトからファイルをダウンロードし、必要なファイルを選択して自分のブログやサイトにアップロードします。そのままアップロードすると、自分のブログやサイトのスタイルとは合わない場合があるので、CSSやHTMLの記述を編集する方法を説明しました。
説明というか、実装するための手順を書いただけなんですけどねｗ


あくまでも「CSSだけで」というのが私がやりたいことだったので、「jQuery」を使ったやり方は全くわかりません。「jQuery」に関しては、これから勉強していきたいなぁと思っています。



今回の記事では、「CSS Multi-Level Accordion Menu」を編集して、アコーディオンメニューのタイトルリストの先頭に表示されるアイコン画像を変更したいと思います。

いきなり説明を始めますので、ちらっとでもいいので前回の記事＜■【CSS Multi-Level Accordion Menu | CodyHouse】を使ってCSSだけでアコーディオンメニューを設定＞に目を通しておいてください。（前回説明したことは端折りますので）



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

「CSS Multi-Level Accordion Menu」のアイコン画像

そもそも、ダウンロードした「CSS Multi-Level Accordion Menu」で使われているアイコン画像は、「img」フォルダに入っている「cd-icons.svg」だけです。
「cd-icons.svg」は、4つのアイコンを並べた状態を1つの画像にしています。
（左から矢印マーク、フォルダマーク、開いたフォルダマーク、画像マーク）





4つのアイコンが並んでいるけれども、これで1枚の画像です。
画像が1枚で済むので便利なような気がしますが、例えば、もしもフォルダマークだけを赤色に変えたいと思ったとしても、1枚の画像になっているので簡単には変更できません。フォルダマークを使いたくない場合や自分の好きなアイコン画像を準備していたとしても、このままでは簡単に変更できません。



しかも、アコーディオンメニューのリストに画像ではないコンテンツ（例えば記事タイトル）を表示させた時も、その先頭には画像マークが表示されてしまいます。
このような状態を解消するために、自分で作ったアイコン画像をそれぞれの位置に表示するようにCSSを編集したいと思います。

「CSS Multi-Level Accordion Menu」のCSSを編集してアイコンを変更する

「CSS Multi-Level Accordion Menu」のアイコン画像を変更するために、CSSを編集します。
以下の説明では、ダウンロードしたファイルの「CSS」フォルダに入っている「style.css」を使います。（ブログのCSSにコピペした記述ではなく、デフォルトの「style.css」です）



CSSの行数はデフォルトの状態での行数です。（初期設定のスタイルを記述した「Primary style」以下の記述も含めた行数を指示します）
もちろん、画像フォルダ「img」もデフォルトのままの状態です。
データの階層は下の画像のような状態で説明しますので、ご自分のブログやサイトに合わせたパス（URL先）に変更して使ってください。

アイコン用の画像を準備する

まずは、使用したいアイコン用の画像を準備します。
「アイコン」「マーク」「フリー」等の単語でネット検索をすると、無料で画像を提供してくださるサイトがたくさんありますので、好きな画像をダウンロードすればいいと思います。


お好きな画像を準備してもらっていいんですが、画像サイズだけは注意してください。
デフォルトの画像のサイズは「16px × 64px」です。
4つの画像を並べて1つの画像になっているので、1つ1つのアイコンのサイズは「16px × 16x」になります。
このサイズを守ってください。（サイズを変更するとどうなるのか、私は関知しません）



準備するアイコン用の画像は4つです。（16px × 16x）
デフォルトには「矢印マーク」「フォルダマーク」「開いたフォルダマーク」「画像マーク」があるので、同じような画像を準備すればいいと思います。
とりあえず私が準備したマークを紹介しておきます。








準備した画像4つは、「img」フォルダの中に入れておきます。
「img」フォルダに入っていた画像「cd-icons.svg」は、削除してもしなくてもどちらでもいいです。
とりあえず私は「cd-icons.svg」を残しておきます。（最後に削除してしまえば問題ないです）





アイコン4つを「img」フォルダに入れたので、画像を指定する際のパスは『「img」フォルダの中の○○』になります。
正確には、「CSS」フォルダの中の「style.css」を編集するので、画像のパスは『url(../img/○○)』です。ここでは相対パスを使っていますが、もちろん絶対パスでもかまいません。ご自分のブログやサイトに画像をアップロードしたら、そのURLを書けばいいだけです。
（パスの記述に関して意味がわからない方は、「絶対パスと相対パス」等の言葉でネット検索すると親切な方が説明しておられますので、お勉強してみてください）

CSSの記述から「cd-icons.svg」を削除する

新しくアイコン画像4つを準備して「img」フォルダに入れたので、次はCSSに記述されている『画像「cd-icons.svg」を使ってアイコンを表示しろ』という指示部分を削除します。
今から、CSSに「この部分の先頭にはこのアイコンを表示させる」という指示を1つ1つ、計4ヶ所に記述していくので、元々の画像に対する指示が邪魔になるわけです。



削除してもいいですし、削除してしまうのが不安ならば「/*」と「*/」で該当部分を挟んでコメントアウトすればいいと思います。
私はとりあえずコメントアウトしておいて、後から削除したいと思います。



「style.css」の記述の中で「cd-icons.svg」という単語で検索をかけます。
2ヶ所がヒットしますが、まずは1つ目の「cd-icons.svg」の一連の記述をコメントアウトします。デフォルトの「style.css」の103行目です。


＜コメントアウトする記述＞


＜編集後＞



実際に表示してみた画像です。
私は「img」フォルダの中に「cd-icons.svg」を残しているので、画像マークだけが表示されています。

CSSで画像マークを変更する

「style.css」の記述の中で「cd-icons.svg」という単語で検索をかけると2ヶ所がヒットしました。
1つ目は上記でコメントアウトしてしまったので、次に2つ目の記述を変更します。
デフォルトの「style.css」の122行目です。


＜元コード＞


これは、画像マークを指定している記述です。
どの画像のどの部分を表示させるのかを指示している「background: url(../img/cd-icons.svg) no-repeat -48px 0;」という記述を変更します。



私の場合は、元々の画像マーク部分にオレンジ色の矢印マーク「arrow_orange.gif」を置くつもりですので、ファイル名をそのように変更します。そして、その画像を繰り返さないという意味の「background-repeat: no-repeat;」を記述します。


＜編集後＞



画像マークがオレンジ色の矢印マークに変わりました。

CSSで矢印マークを表示させる

アコーディオンメニューのタイトル（第一階層）の左端に、矢印マークを表示させます。
先ほどアイコン画像「cd-icons.svg」部分をコメントアウトしたので、現時点では上記の画像のように、オレンジ色の矢印マークしか見えていません。



「style.css」で「.cd-accordion-menu label::before」という記述を探します。
デフォルトの「style.css」の107行目です。


＜元コード＞


この記述には、何の画像を表示させるのかの指示がありません。
元々指定されていた画像は、先ほどコメントアウトして表示させないようにしてしまいました。
改めて何の画像を表示させるのかの指示を記述します。
使いたい画像は「arrow_maru.png」です。


＜編集後＞



リストタイトルの先頭に矢印マークが表示されます。
アコーディオンを開いている場合、その先頭の矢印が下向きになっています。まだ開いていないタイトル部分は右向きの矢印です。（画像を準備する時に説明した通りです）

CSSでフォルダマークを表示させる

アコーディオンメニューのタイトルの左端には矢印マークを表示させました。その隣にフォルダマークを表示させたいと思います。
アコーディオンを閉じている状態の時は「プラス」のフォルダマークを、アコーディオンを開いた状態の時は「マイナス」のフォルダマークを表示させます。


準備している画像はこちらです。





「プラス」のフォルダマークを使うのは、「ここをクリックすると何かがありますよ。このタイトルだけで終わりではありませんよ」と閲覧者に気付いてもらいたいからです。逆にフォルダマークが「マイナス」なのは、「既にここは開いているので、クリックすると閉じますよ」と知らせるためです。
とかまあ、勝手に意味を付けましたが、お好きなマークにすればいいと思います。



まずはアコーディオンメニューを閉じている状態の時に表示させたい「プラス」のフォルダマークを設定します。
「style.css」で「.cd-accordion-menu label::after」という記述を探します。
デフォルトの「style.css」の124行目です。


＜元コード＞


この記述には、どの画像を表示させるのか指示がありませんが、表示させる画像の位置は指定されています。
「background-position: -16px 0;」という記述です。
これは、元々の画像は4つのアイコンが並んで1つの画像なので、ピンポイントでフォルダアイコンを指定して表示させるためには、画像の「この部分」というような指示が必要だったわけです。
でも今回のように画像を1つ1つ切り離して使う場合、このような指定は必要ないので「background-position: -16px 0;」という記述は削除します。



プラスのフォルダマークを表示させたいので、表示させる画像を指定します。画像を繰り返す必要はありませんので「background-repeat: no-repeat;」も記述します。
使いたい画像は「folder_plus.png」です。


＜編集後＞



実際に表示してみた画像です。






次に、アコーディオンメニューを開いている状態の時に表示させたい「マイナス」のフォルダマークを設定します。
「style.css」で「.cd-accordion-menu input[type=checkbox]:checked + label::after」という記述を探します。
デフォルトの「style.css」の139行目です。


＜元コード＞


プラスのフォルダマークの時と同じように、「background-position: -32px 0;」という記述で表示させる画像の位置が指定されているので、この記述を削除します。
そして、表示させるマイナスのフォルダマーク画像を指定します。画像を繰り返す必要はありませんので「background-repeat: no-repeat;」も記述します。
使いたい画像は「folder_minus.png」です。


＜編集後＞



実際に表示してみると、このような感じになります。
開いているリストタイトルの横にはマイナスのフォルダアイコンが表示されています。





以上で画像アイコンの変更が終わりました。
その他のカスタマイズについては、CSSを編集してお好きなように変更してください。
色々といじり始めると楽しくなってきますね。




次の記事の紹介

『CodyHouse』様のアコーディオンメニューを参考にして、自分なりのアコーディオンメニュー（ツリーメニュー）を作ってみました。
『CodyHouse』様のメニューとは似ても似つかないものが出来上がりましたが、利用してみようかな？と思われる場合は、次の記事をお読みください。