ブログ運営

アコーディオンメニューでブログの見た目をすっきり!サンプルコード付

アコーディオンメニューアイキャッチ
  • ブログの見た目をキレイに整えたい
  • HTMLコードに慣れてきたのでレベルアップしたい
  • 使う上でメリット・デメリットは?

クリックするとにゅーんと出てくるアコーディオンメニューをブログに取り入れてみませんか?

アコーディオンを使えば多くの情報をコンパクトにできて見た目もUPしますよ!

という事で、LPはアコーディオンメニューを15個使ってる近所です(´・ω・`)

 

そんなに使って見た目や動作は大丈夫?と怖くなるかもしれませんが、しっかりコード管理すれば全く問題なく動作してくれます。

大変便利なコードなので興味がある方はぜひ使ってみてほしいと思います。

デザインカスタマイズは自己責任にてお願い致します。

心配な方は記事を複製して試してみる、バックアップを取っておくなどしてからチャレンジしてください。

うまく機能せずデザインが崩れた場合当方では責任を負いかねますのでご了承ください。

 

この記事は下記のブログを参考に作成させていただきました。

サンプルコードもたくさん載っているので是非ご覧ください。


アコーディオンメニューのメリット

アコーディオンイメージ

アコーディオンメニューにすることで得られるメリットを挙げてみましょう!

取り入れるかどうするかの判断にご活用ください。

 

多数の情報をスッキリ見せられる

アコーディオメニューは初期状態では中身を隠した状態で表示できます。

記事ページで言う続きを見るのような感じですね。

 

私はLP(トップページ)にアコーディオンメニューをたくさん使用して情報量を増やしつつスッキリさせています。

トップページの例

ブログのLP画像数増やし放題

私のブログのLPでは実に15個ものアコーディオンメニューを採用。

6個のカテゴリーで使い分けてそれぞれ独立した動きになるようコードを書いてます。

 

メニューを増やしたいと思えばコードをちょこっと変えるだけで半無限に個別で増殖できます。

デザインも多数

参考サイト様で紹介されていますが、私のLPの形以外にも多数のデザインがあります。

これもコードが分かれば自分オリジナルにもできますし、そういうのが分からないという場合は検索すると色々出てきます。

下記のサイトなどをご覧ください。

 

スポンサーリンク

アコーディオンメニューのデメリット

デメリットイメージ

まぁ・・・どんなカスタマイズにも得手不得手がありますね。

もちろんこのアコーディオンメニューにもやることによるデメリットも考えないといけません。

目的にたどり着くまで手間が増える

アコーディオンメニューを使わず見せればワンクリックで済むところを一度メニューを開いてもらう必要が出てきます。

Q&A方式でしたら自分に必要な回答だけ見れるのでユーザービリティがあがるのですが、トップページに採用した場合は諸刃の剣でもあります。

 

  1. アコーディオンメニューを開いて(1手間)
  2. その中のリンクを開く(2手間)

アコーディオンメニューがあることで一手間増えてしまいます。

 

私はその手間のデメリットよりもスッキリ見せつつ文字リンクを増やせるほうにメリットを感じたので導入しました。

メニュータイトルがより重要になる

みなさんも興味のないタイトルの記事を開いてみようとは思いませんよね?

アコーディオンメニューでもそれと同じで興味を惹かれない文言だと開いてもらえない可能性が出てきます。

 

もしかするとアコーディオンメニューの中にある記事タイトルは逸品なのに、アコーディオンで隠してしまったことで見てもらえない可能性も出てきます。

 

さらに普通の記事タイトルとは違い見た目的に文字数が超重要になります。

と言うのもアコーディオンメニュー幅は使う場所で変わるので、私のように3カラムで使うとかなり文字数に制限がありました。

コード設定がちょっとややこしい

ネット検索すると「初心者でも簡単!」みたいな謳い文句もありますよね?

で、やってみたけどよくわからない・・・ってパターン多くないですか?

 

HTMLコードとか無知だった私もそうですが、単純に1個のアコーディオンメニューを作るならコピペ+αなので確かにまだ簡単な方ですが・・・

  • どこに何が入るのか?
  • CSSはどこを弄ればいいのか?

 

などちょっと知識がいります。

 

さらに自分の首を絞めたのがアコーディオンメニューでやりたい形があって

  • 複数設置して独立させる
  • その中にリンクを貼る

ということ。

 

これをやろうと思うと

  • どこからどこまでがアコーディオンメニューの中なのか?
  • この<div>構文はどこにかかっているのか?

などちょっと知識が必要でした。

 

と、言うことで私のブログのアコーディオンメニューコードを置いておきます。

同じ形で良ければコピペしてアレンジて欲しいと思います。

アコーディオンメニューサンプルコード

サンプルコード
これから紹介するコードは・・・

タイトル

  • リンク
  • リンク

タイトル

  • リンク
  • リンク

という構成になっています。

アコーディオンメニューCSS

まずはCSSをコピペしてください。

後から色の変え方なども載せてますので最初は何も弄る必要ありません。

 

これをWPの管理画面→外観→CSS編集を開いて貼り付けて下さい。

貼り付けたらいよいよ記事にアコーディオンメニューを導入します。

アコーディオンメニュー見本

まずはどんなアコーディオンメニューなのか?から。

実際に動くのでクリックしてみてね。

 

アコーディオンメニューHTML

アコーディオンメニューを使いたいところに以下のコードを貼り付けて下さい。

 

もちろん場所を変えて貼り付ければアコーディオンメニューを2個3個・・・と増やすことも簡単です。

ここに注意!

HTMLタブ から ビジュアルタブに戻すとアコーディオンメニューがうまく働かないことがあります。

そこでもう一度HTMLを覗くと・・・

こんな感じで“cp actab”の次が改行されてしまっていませんか?

こうなるとアコーディオンメニューは開きませんので、HTMLタブで改行を削除してビジュアルタブに戻さずにそのまま保存してください。

動作が気になる場合はHTMLタブのままプレビュー画面に行ってもらうと改行されません。

 

どうやらビジュアルタブに戻ると勝手に改行が入るみたいです・・・。

スポンサーリンク

コードの解説とQ&A

Q&A

コードの簡単な解説と、実際に私が直面したこういう時どうしたら?と言うQ&Aを載せておきます。

コードの解説

先ほどの見本でも分かるように書きましたが一応補足までに。

ここがポイント!
  • 【アコーディオンタイトル】→ご自身で好きなタイトルを付けて下さい
  • 【記事URL】→ご自身のブログからコピペしてください
  • 【記事タイトル】→ご自身のブログからコピペか新しくつけて下さい

私のブログの例で行くとこんな感じのコードとなります。

 

Q.2個じゃ足りない!増やしたい!

A.下記の【ここに入れる】と言う部分に以下のアコーディオンメニューコードを入れて下さい。

入れる部分はココ!
入れるコードはコレ!
 

その際<input id=”tab-1″ name=”tabs” type=”checkbox” /><label for=”tab-1″>と書いてある部分の数字を他のアコーディオンメニューと重ならないように書き換えて下さい。

 

今回の例で言えば「3」とか「4」とか・・・。

無難に数字を大きくしていく方が管理しやすいと思います。

Q.色を変えたいんだけど

A.CSSを弄れば色が変えられます。知識のある人ならデザインも弄れますが・・・しなくても十分整ってます。

上で登場したCSSのコードをちょこっと弄りましょう

色を変える時はここ!
  • 7行目のcolor:#fff;の部分をお好きな色コードに変えればクリックするメニュー部分の文字色を変えられます。
  • 24行目のbackground: #f05689;の部分を変えればメニュー部分の色味が変わります。
  • 32行目のcolor: #333333;を変えればアコーディオンを開いた時の文字色
  • 33行目のbackground: #eaeaea;を変えればアコーディオンを開いた時の背景色が変わります。

 

色コードはこのサイトを参考にどうぞ

私はサイトのテーマカラーに合わせて色を調整しています。

配色アイキャッチ
ブログのテーマカラーの決め手は【印象】!おすすめの選び方も紹介!ブログのデザインは誰しもキレイに整えたいですよね?今回はブログの配色を【印象】と言う心理的な面から考えていく方法をまとめました。イメージがぼんやりしていてもしっかりまとまります!...

Q.他のデザインは無いの?

A.参考元サイト様をご覧ください。すみません。0から作る知識はないんです(´・ω・`)

上に書いたコードとかもほぼ参考サイト様に書かれてますのでご覧ください。

 

アコーディオンメニューのまとめ
  1. 見やすさは格段にアップ!
  2. ただ見た目の情報が減るので良く考えて
  3. コードを理解できれば使い勝手抜群

 

私のブログのLP(トップページ)でめっちゃ使い倒してるのでこんなことも出来るんだ~程度に見ていただければと思います。

 

以上、アコーディオンメニューでブログの見た目をすっきり!サンプルコード付でした!

トップページ(LP)を見る

配色アイキャッチ
ブログのテーマカラーの決め手は【印象】!おすすめの選び方も紹介!ブログのデザインは誰しもキレイに整えたいですよね?今回はブログの配色を【印象】と言う心理的な面から考えていく方法をまとめました。イメージがぼんやりしていてもしっかりまとまります!...
JINでLPの作り方とコードを全公開|初心者向け解説付き! こちらのLPは旧デザインとなり現在のLPと異なります。 どうも。ついにLP作成に手を出した近所です(´・ω...

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA


Scroll Up