́・ω・`)そんなに使って見た目や動作は大丈夫?と怖くなるかもしれませんが、しっかりコード管理すれば全く問題なく動作してくれます。便利なコードなので興味がある方はぜひ使ってみてほしいと思います。デザインカスタマイズは自己責任にてお願い致します。心配な方は記事を複製して試してみる、バックアップを取っておくなどしてからチャレンジしてください。うまく機能せずデザインが崩れた場合当方では責任を負いかねますのでご了承ください。この記事は下記のブログを参考に作成させていただきました。サンプルコードもたくさん載っているので是非ご覧ください。旅する...https://affirepo.com/stork-customize-accordion/ここあです。前から作りたかったものがやっと出来ました。アコーディオンボ...affirepo.com参考外部サイトこの記事の目次アコーディオンメニューのメリット多数の情報をスッキリ見せられる数増やし放題デザインも多数アコーディオンメニューのデメリット目的にたどり着くまで手間が増えるメニュータイトルがより重要になるコード設定がちょっとややこしいアコーディオンメニューサンプルコードアコーディオンメニューCSSアコーディオンメニュー見本アコーディオンメニューHTMLコードの解説とQ&Aコードの解説Q.2個じゃ足りない!増やしたい!Q.色を変えたいんだけどQ.他のデザインは無いの?アコーディオンメニューのメリットアコーディオンメニューにすることで得られるメリットを挙げてみましょう!取り入れるかどうするかの判断にご活用ください。多数の情報をスッキリ見せられるアコーディオメニューは初期状態では中身を隠した状態で表示できます。記事ページで言う続きを見るのような感じですね。私はLP(トップページ)にアコーディオンメニューをたくさん使用して情報量を増やしつつスッキリさせています。私のブログのLPでは実に15個ものアコーディオンメニューを採用。6個のカテゴリーで使い分けてそれぞれ独立した動きになるようコードを書いてます。メニューを増やしたいと思えばコードをちょこっと変えるだけで半無限に個別で増殖できます。参考サイト様で紹介されていますが、私のLPの形以外にも多数のデザインがあります。これもコードが分かれば自分オリジナルにもできますし、そういうのが分からないという場合は検索すると色々出てきます。下記のサイトなどをご覧ください。旅する...https://affirepo.com/stork-customize-accordion/ここあです。前から作りたかったものがやっと出来ました。アコーディオンボ...affirepo.com参考外部サイトスポンサーリンクアコーディオンメニューのデメリットまぁ・・・どんなカスタマイズにも得手不得手がありますね。このアコーディオンメニューにもやることによるデメリットも考えないといけません。目的にたどり着くまで手間が増えるアコーディオンメニューを使わず見せればワンクリックで済むところを一度メニューを開いてもらう必要が出てきます。Q&A方式でしたら自分に必要な回答だけ見れるのでユーザービリティがあがるのですが、トップページに採用した場合は諸刃の剣でもあります。アコーディオンメニューを開いて(1手間)その中のリンクを開く(2手間)とアコーディオンメニューがあることで一手間増えてしまいます。私はその手間のデメリットよりもスッキリ見せつつ文字リンクを増やせるほうにメリットを感じたので導入しました。メニュータイトルがより重要になるみなさんも興味のないタイトルの記事を開いてみようとは思いませんよね?アコーディオンメニューでもそれと同じで興味を惹かれない文言だと開いてもらえない可能性が出てきます。するとアコーディオンメニューの中にある記事タイトルは逸品なのに、アコーディオンで隠してしまったことで見てもらえない可能性も出てきます。普通の記事タイトルとは違い見た目的に文字数が超重要になります。言うのもアコーディオンメニュー幅は使う場所で変わるので、私のように3カラムで使うとかなり文字数に制限がありました。コード設定がちょっとややこしいネット検索すると「初心者でも簡単!」みたいな謳い文句もありますよね?で、やってみたけどよくわからない・・・ってパターン多くないですか?HTMLコードとか無知だった私もそうですが、単純に1個のアコーディオンメニューを作るならコピペ+αなので確かにまだ簡単な方ですが・・・どこに何が入るのか?CSSはどこを弄ればいいのか?などちょっと知識がいります。自分の首を絞めたのがアコーディオンメニューでやりたい形があって複数設置して独立させるその中にリンクを貼るということ。これをやろうと思うとどこからどこまでがアコーディオンメニューの中なのか?この<div>構文はどこにかかっているのか?などちょっと知識が必要でした。言うことで私のブログのアコーディオンメニューコードを置いておきます。同じ形で良ければコピペしてアレンジて欲しいと思います。アコーディオンメニューサンプルコードこれから紹介するコードは・・・タイトルリンクリンクタイトルリンクリンクという構成になっています。アコーディオンメニューCSSまずはCSSをコピペしてください。後から色の変え方なども載せてますので最初は何も弄る必要ありません。\f077";}これをWPの管理画面→外観→CSS編集を開いて貼り付けて下さい。貼り付けたらいよいよ記事にアコーディオンメニューを導入します。アコーディオンメニュー見本まずはどんなアコーディオンメニューなのか?から。実際に動くのでクリックしてみてね。エージェントを使うべし!利用方法まとめブロガーは転職で武器になるか聞いてみた!アコーディオンメニューHTMLアコーディオンメニューを使いたいところに以下のコードを貼り付けて下さい。href="記事URL">記事タイトル</a></div></div></div>もちろん場所を変えて貼り付ければアコーディオンメニューを2個3個・・・と増やすことも簡単です。ビジュアルタブに戻すとアコーディオンメニューがうまく働かないことがあります。actab”の次が改行されてしまっていませんか?こうなるとアコーディオンメニューは開きませんので、HTMLタブで改行を削除してビジュアルタブに戻さずにそのまま保存してください。動作が気になる場合はHTMLタブのままプレビュー画面に行ってもらうと改行されません。ビジュアルタブに戻ると勝手に改行が入るみたいです・・・。スポンサーリンクコードの解説とQ&Aコードの簡単な解説と、実際に私が直面したこういう時どうしたら?と言うQ&Aを載せておきます。先ほどの見本でも分かるように書きましたが一応補足までに。ここがポイント!【アコーディオンタイトル】→ご自身で好きなタイトルを付けて下さい【記事URL】→ご自身のブログからコピペしてください【記事タイトル】→ご自身のブログからコピペか新しくつけて下さい私のブログの例で行くとこんな感じのコードとなります。href="https://kinjyo8835.com/design-book">デザインの勉強にこの1冊!【配色アイディア手帖】</a></div></div></div>Q.2個じゃ足りない!増やしたい!A.下記の【ここに入れる】と言う部分に以下のアコーディオンメニューコードを入れて下さい。for=”tab-1′′>と書いてある部分の数字を他のアコーディオンメニューと重ならないように書き換えて下さい。今回の例で言えば「3」とか「4」とか・・・。無難に数字を大きくしていく方が管理しやすいと思います。Q.色を変えたいんだけどA.CSSを弄れば色が変えられます。知識のある人ならデザインも弄れますが・・・しなくても十分整ってます。\f077";}色を変える時はここ!7行目のcolor:#fff;の部分をお好きな色コードに変えればクリックするメニュー部分の文字色を変えられます。#f05689;の部分を変えればメニュー部分の色味が変わります。#eaeaea;を変えればアコーディオンを開いた時の背景色が変わります。HTMLカラーコードhttps://www.colordic.org色の名前とカラーコードが一目でわかるWEB色見本www.colordic.org参考外部サイト私はサイトのテーマカラーに合わせて色を調整しています。ブログのテーマカラーの決め手は【印象】!おすすめの選び方も紹介!ブログのデザインは誰しもキレイに整えたいですよね?今回はブログの配色を【印象】と言う心理的な面から考えていく方法をまとめました。イメージがぼんやりしていてもしっかりまとまります!...Q.他のデザインは無いの?A.参考元サイト様をご覧ください。́・ω・`)上に書いたコードとかもほぼ参考サイト様に書かれてますのでご覧ください。旅する...https://affirepo.com/stork-customize-accordion/ここあです。前から作りたかったものがやっと出来ました。私のブログのLP(トップページ)でめっちゃ使い倒してるのでこんなことも出来るんだ~程度に見ていただければと思います。以上、アコーディオンメニューでブログの見た目をすっきり!サンプルコード付でした!トップページ(LP)を見るブログのテーマカラーの決め手は【印象】!おすすめの選び方も紹介!ブログのデザインは誰しもキレイに整えたいですよね?今回はブログの配色を【印象】と言う心理的な面から考えていく方法をまとめました。こちらのLPは旧デザインとなり現在のLPと異なります。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。元販売職の30代男ブロガー。旅行や便利グッズ、気になる世の中のトリビア紹介が中心。/ブログ主への問い合わせレビューのご依頼はこちらから。不得意ジャンルやレビュー実績を載せております。元販売職の30代男ブロガー。旅行や便利グッズ、気になる世の中のトリビア紹介が中心。注文住宅はセミオーダーが安い?契約者がローコスト住宅の感想を語る!注文住宅を安くする方法はセミオーダー?!頭金など実例の赤裸々まとめ!ブログ主への問い合わせレビューのご依頼はこちらから。不得意ジャンルやレビュー実績を載せております。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。