アコーディオンメニューの使い方と背景色の変更【Snow Monkey Blocks】

こんにちは、WebデザイナーのKazumiです。

今回はWordPressのSnow Monkey Blocksを使った「アコーディオンメニュー」についての記事です。

アコーディオンメニューの疑問

・アコーディオンメニューって何?

・Snow Monkeyのアコーディオンメニュー作成方法が知りたい

・アコーディオンってどんな時に使うの?

・背景色をグレーから変更するには?

上記のお悩みを解決します!

簡単に動きが出せるとっても便利なブロックなので、この記事を読んでぜひ活用してください。

Snow Monkey Blocksのアコーディオンブロックとは

Snow Monkey Blocksのアコーディオンブロックは、ワンクリックで簡単にアコーディオンメニュー(折りたたみメニュー)が作成できる便利なブロックです。

アコーディオンメニューとは、項目をクリック、またはタップすることで、隠れている詳細情報を表示させることができるものです。

もう一度クリック、またはタップすると、詳細情報が隠れます。

▲サンプルアコーディオン:閉じているとき
▲サンプルアコーディオン:項目を開くとこのように表示されます

楽器のアコーディオンのように開いたり閉じたりできるので、アコーディオンメニューと呼ばれているのですね。

画面内の情報をユーザーが操作できるので、情報量が多いページや、PCと比べて縦長になりがちなスマホ表示で活用できるメニューです。

Snow Monkey Blocksのメニュータイトルの右端には標準で下矢印がついているので、「このメニューは折りたたまれている、開くことができる」ということを視覚的に認識してもらうことができます。

また、開いているときには上矢印が表示され、「閉じることができる」ことも視覚的に認識できます。

アコーディオンタイトルの背景色は標準で薄いグレーになっていますが、こちらはCSSカスタマイズで自由に色を変更できます。

カスタマイズ方法については後述します!

アコーディオンメニューはこんな用途に使える!

アコーディオンメニューってどんなときに使うんだろう?

Snow Monkeyでよく使われるのは、さきほどの参考画像のようなQ&Aかと思います。

Snow Monkey Blocksには「Q&A」専用のブロックもありますが、項目や文章量が多いときは「アコーディオン」ブロックを使った方がすっきりまとまりますね。

ページが長くなるとスクロールするのも大変なので、自分にとって必要な情報だけを開くことができるアコーディオンは、Q&Aと相性が良いです。

あとはサイトトップに置くお知らせや、何かを解説するときなどにも便利です。

Snow Monkey Blocksのアコーディオンブロックの詳細には、別のブロックを入れることができます。

これによって、アコーディオンの詳細に画像を入れたり、動画を入れたり、ステップブロックやパネルブロックを入れることもできます。

▲詳細部分に画像を入れたアコーディオン

色々な使い方ができそうですが、アコーディオンを使ったことで逆に見えにくくなってしまわないように、ユーザー目線で使いどころを見極めたいですね。

Snow Monkey Blocksアコーディオンブロックの設置方法

次に、Snow Monkey Blocksのアコーディオンブロックの設置方法について解説します。

アコーディオンブロックは、Snow Monkey Blocksのプラグインを有効化することで使用できます。

アコーディオンを設置したい場所でブロック一覧を開く

まず、アコーディオンを入れたいページの編集画面で、プラス「+」アイコンをクリックします。

▲プラスアイコンをクリック

青いプラスアイコンをクリックするとブロック一覧が表示されます。
もしくは黒いプラスアイコンをクリック⇒すべて表示を選択してもOKです。

▲黒いアイコンをクリックした場合は、「すべて表示」でブロック一覧が開く
アコーディオンブロックを選択する

ブロックの一覧から、Snow Monkey Blocksのアコーディオンブロックを選択します。

▲アコーディオンブロックを選択

検索窓に「アコーディオン」と入力して探すこともできます。

▲検索窓に「アコーディオン」と入力して選択
タイトルと詳細を入力する

これでアコーディオンブロックが設置されました。

▲アコーディオンブロック

「タイトルを入力」となっているグレー背景のところに項目のタイトルを入力し、「ブロックを選択するには~」となっているところには項目の詳細を入力します。

▲タイトルと詳細を入力

詳細にはそのまま文章を入力することもできますし、他のブロックを入れることもできます!

項目を増やす

項目を増やしたいときは、横長の+部分をクリックします。

▲横長の「+」をクリックすると項目が追加される

あとは項目の数だけステップ3を繰り返します。

下の例では詳細の中に「カラム」 ブロックで3カラムを選択し、それぞれに画像を入れています。

アコーディオンの中にさらにアコーディオンブロックを入れて、深い階層を作ることもできます。

背景色を変更するカスタマイズCSS

アコーディオンブロックのタイトル背景は、標準で薄いグレーになっています。

この色を変更したいときは、追加CSSにコードを入力することで簡単にカスタマイズできます!

追加CSSの入力欄を開く

ダッシュボード⇒外観⇒カスタマイズ⇒追加CSSに進んで、追加CSSの入力欄を開きます。

▲追加CSSの入力欄
アコーディオン背景色のカスタマイズCSSをコピペする

下記のCSSコードをコピーして、追加CSSに貼り付けます。

/* アコーディオンタイトルの背景色 */
.smb-accordion__item__title {
  background: #fffee7;
}
カラーコードを変更する

先ほどのCSSで使用しているカラーコード「#fffee7」は薄い黄色になります。

カラーコードを変更することで、任意の色にすることができます。
手軽にカラーコードを選ぶならこちらのサイトがおすすめです。 ⇒原色大辞典

アコーディオンメニューの使い方と背景色の変更 まとめ

まとめ

・アコーディオンメニューとは何か

・どんなときに使用するのか

・Snow Monkey Blocksのアコーディオン設置方法

・アコーディオンタイトルの背景色の変更方法

上記について解説しました。

Snow Monkey Blocksのアコーディオンは、コーディングの必要もなく簡単に設置できるので便利ですよね。

ぜひこの記事を参考に色々試して、アコーディオンを活用してみてください。
最後までお読みいただきありがとうございました!

この記事を書いた人

Kazumi

フリーランスWebデザイナーです。画像加工や動画編集、アニメ制作もしています。時間と場所に縛られない自由な生活を手に入れるためにスキルを磨いています!ブログでは学んだことのアウトプットをメインに役立つ知識を発信しています。