【SWELLワードプレステーマ】サブメニューをアコーディオン表示させる設定方法(長いメニューをたたんでコンパクトに！) 〜初心者向け〜

WordPressテーマSWELLサブメニューをアコーディオン表示させる設定方法(長いメニューをたたんでコンパクトに！)【初心者向け】

URLをコピーしました！

Himです♪
@himlog_com

こんな疑問やお悩みにお応えします！

サブカテゴリーが多くなってしまい、全部表示してしまうと縦長に伸びて見づらいので親カテゴリーのみ表示させたい。
グローバルナビ・スマホメニュー・ウィジェット内のサブメニューをたたんでアコーディンオン式に表示したい。

本記事ではWordPressテーマSWELLサブメニューをアコーディオン表示させる設定方法をご紹介します。
手順通り進めていってみてくださいね。

ブロックエディタ完全対応
他テーマからの移行も簡単
初心者でも安心のフォーラムあり

必見SWELL公式サイトへ

リンク先 : https://swell-theme.com

当ブログはSWELLのブロックエディタで作成しています。

ブログ初心者さんがSWELLを購入したものの、何からカスタマイズしていったらいいのか分からないという方のために、とりあえず先に見栄えを良くして「ブログを書く」というモチベーションを保つためにSWELL設定の主要ポイントをお伝えしています！

Him

超初心者さんに向けて書いているので、分からない専門用語は一切省きます。安心して読み進めてみてくださいね。

記事の内容

サブメニューのアコーディオン化とは？

クリックひとつでメニューをコンパクトに畳んだり広げたりできるようにすることです。

グローバルナビの副項目メニュー
スマホ開閉メニュー内にあるメインナビのサブメニュー
ウィジェットに設置できるカテゴリーリストなどのサブメニュー

をアコーディオン開閉式に変更することができます。

パソコンで見たときのサイドバーカテゴリー表示の比較

アコーディオン化していない場合

アコーディオン化した場合

パソコンで見る分にはサブカテゴリーが開いている方が、どんなことが書かれているのが開かずに確認できるので便利だと思います。

私もしばらくこのスタイルでやってたのですが、さらにサブカテゴリーが増えたときに、スマホで開閉メニューを見ると縦長に間延びしてしまって見にくいなと思いました。

もう少し詳しい方だと個別に設定するカスタマイズ方法もわかるかもしれませんが、通常の誰でもいじれるカスタマイザー設定では個別に設定はできないようです。

サブメニューをアコーディオン表示させる設定方法

STEP

外観

STEP

カスタマイズ

STEP

サイト全体設定

STEP

基本デザイン

STEP

サブメニューの表示形式でチェックを入れる

サブメニューをアコーディオン化するにチェックをいれると、グローバルナビ・スマホメニュー・ウィジェット内のサブメニューが一斉にアコーディオン化されコンパクトに折り畳まった表示になります。

STEP

公開ボタン

変更したあとは必ず公開ボタンを押して反映させてください。

アップデートされてからできるようになった新しいことだと、見落としてしまっていたりします。
このサブメニューのアコーディオン化も途中からできるようになったものです。
また、変更内容がアップデート情報のところにしか書かれていない場合は見落としがちになるのでご注意ください。

Him

使用状況に応じて使い分けてみてくださいね♪

以上、WordPressテーマSWELLサブメニューをアコーディオン表示させる設定方法でした！

【SWELLワードプレステーマ】スマホとパソコンでの表示を別々にする(デバイス制限)設定方法〜初心者向け〜

【SWELLワードプレステーマ】スマホ開閉メニュー(スライドメニュー)にアイコンを表示させる設定方法〜…

【SWELLワードプレステーマ】ブロックグループ化(リストを装飾)の使い方〜初心者向け〜

【SWELLワードプレステーマ】ブログカードの設定方法〜初心者向け〜

【SWELLワードプレステーマ】お知らせバー設定方法〜初心者向け〜

【SWELLワードプレステーマ】スマホ固定フッター設定方法〜初心者向け〜

一度挫折した初心者ブロガーが【SWELL ワードプレステーマ】にたどり着いた経緯