この記事では「SWELL」のサイドバーのカテゴリーを「すべて固定して表示させる方法」を紹介します。
下の写真のように
![SWELLのサイドバーのカテゴリー](https://hibi-log.com/wp-content/uploads/2022/02/2ba5cbb657d2e1599edd30d8fa258ed4.png)
左側のような状態で表示されているものを、右側のように表示させる方法です。
右側の「After」は、2階層までしかありません。
それは、私がカテゴリーを2階層までしか設定していないからです。
設定をしていれば、3階層以下も表示されます。
カテゴリーを固定して表示させる方法
サイドバーのカテゴリーを固定して表示させるには「ウィジェット」と「基本デザイン」の設定が必要です。
それぞれ説明しますね。
![](https://hibi-log.com/wp-content/uploads/2021/03/C525E734-4AA9-4F95-AAA2-6413BE4E51D2-1.jpeg)
とっても簡単ですよ。
1:ウィジェットの設定
「外観」→「ウィジェット」で、カテゴリーの表示設定をします。
![SWELLのカテゴリーウィジェット](https://hibi-log.com/wp-content/uploads/2022/02/df9c0843ce5752283938cca57574543f.png)
![SWELLのカテゴリーウィジェット](https://hibi-log.com/wp-content/uploads/2022/02/df9c0843ce5752283938cca57574543f.png)
カテゴリーを固定して表示させるには、
- ドロップダウンで表示 → チェックしない
- 階層を表示 → チェックする
「投稿数を表示」を表示に関しては、お好みしだいです。
「投稿数を表示したい」なら、チェックします。
2:基本デザインで設定の変更をする
「基本デザイン」の設定を変更します。
まずは、ダッシュボードのサイドバーから「1 外観」→「2 カスタマイズ」とすすみます。
![](https://hibi-log.com/wp-content/uploads/2022/02/606a07952aaf88e656666e6753f44c7f.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/606a07952aaf88e656666e6753f44c7f.jpg)
「3 サイト全体設定」をクリック。
![](https://hibi-log.com/wp-content/uploads/2022/02/82bfa2251b957634c6cec8351fe41d0c.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/82bfa2251b957634c6cec8351fe41d0c.jpg)
「4 基本デザイン」をクリック。
![](https://hibi-log.com/wp-content/uploads/2022/02/adffd4c27460a8947eb152f9deec16af.png)
![](https://hibi-log.com/wp-content/uploads/2022/02/adffd4c27460a8947eb152f9deec16af.png)
下のほうにスクロールしていくと「■ サブメニューの表示形式」があります。
「□ サブメニューをアコーディオン化する」についているチェックを外します。
![](https://hibi-log.com/wp-content/uploads/2022/02/2e5ebb003d35654f33c9219cfb2b1c2e.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/2e5ebb003d35654f33c9219cfb2b1c2e.jpg)
この状態↓↓になればOKです。
![](https://hibi-log.com/wp-content/uploads/2022/02/95e69de7c0c38c66431471d7b3a337cb.png)
![](https://hibi-log.com/wp-content/uploads/2022/02/95e69de7c0c38c66431471d7b3a337cb.png)
チェックをはずしたら「公開ボタン」をクリックするのを、お忘れなく!!
これで、カテゴリーが固定して表示されるようになります。
![SWELLのサイドバーのカテゴリー](https://hibi-log.com/wp-content/uploads/2022/02/2ba5cbb657d2e1599edd30d8fa258ed4.png)
![SWELLのサイドバーのカテゴリー](https://hibi-log.com/wp-content/uploads/2022/02/2ba5cbb657d2e1599edd30d8fa258ed4.png)
PC・スマホのサイドバーを別に設定している場合
SWELLは、PCとスマホのサイドバーを別々に設定できます。
![](https://hibi-log.com/wp-content/uploads/2022/02/9accb5f08f77b0b615958e0092d2a85a.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/9accb5f08f77b0b615958e0092d2a85a.jpg)
共通サイドバー【スマホ版】を設定していない場合は、スマホのサイドバーも共通サイドバーと同じものが表示されます。
スマホ専用のサイドバーを使っている場合は、そちらのウィジェットの設定も必要です。
![](https://hibi-log.com/wp-content/uploads/2022/02/c49a34cae557e2e3f37825d2c8094dac.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/c49a34cae557e2e3f37825d2c8094dac.jpg)
ただパソコンと同じ設定にすると、スマホではカテゴリーの表示が長すぎるので、私は「□ ドロップダウンで表示」にチェックを入れて
![](https://hibi-log.com/wp-content/uploads/2022/02/b93d3542fadd7bbb24bab10a4dbf4d98.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/b93d3542fadd7bbb24bab10a4dbf4d98.jpg)
スマホのカテゴリーは、このように▽▽表示されるようにしています。
![](https://hibi-log.com/wp-content/uploads/2022/02/7ec4547e7268b8953050252bd049ecef.jpg)
![](https://hibi-log.com/wp-content/uploads/2022/02/7ec4547e7268b8953050252bd049ecef.jpg)
まぁ、お好みですね。
私も今現在(2022.2)はこの表示にしているだけです。
まとめ:サイドバーのカテゴリーを階層もすべて表示させる方法
![SWELLのカテゴリー表示固定](https://hibi-log.com/wp-content/uploads/2022/02/0a0abfe012e48128bdf9dda61c910411-1024x576.jpg)
![SWELLのカテゴリー表示固定](https://hibi-log.com/wp-content/uploads/2022/02/0a0abfe012e48128bdf9dda61c910411-1024x576.jpg)
サイドバーのカテゴリーを「階層もすべて表示させる方法」をまとめます。
カテゴリーのウィジェットのチェックを、次のようにします。
- ドロップダウンで表示 ← 外す
- 投稿数を表示 ← お好み
- 階層を表示 ← つける
![SWELLのカテゴリーウィジェット](https://hibi-log.com/wp-content/uploads/2022/02/df9c0843ce5752283938cca57574543f.png)
![SWELLのカテゴリーウィジェット](https://hibi-log.com/wp-content/uploads/2022/02/df9c0843ce5752283938cca57574543f.png)
「基本デザインの設定」の変更をする。
外観 → カスタマイズ → サイト全体設定 → 基本デザイン
「サブメニューをアコーディオン化する」のチェックを外す。
![](https://hibi-log.com/wp-content/uploads/2022/02/95e69de7c0c38c66431471d7b3a337cb.png)
![](https://hibi-log.com/wp-content/uploads/2022/02/95e69de7c0c38c66431471d7b3a337cb.png)
これで、サイドバーのカテゴリーが固定して表示されるようになります。
![](https://hibi-log.com/wp-content/uploads/2021/03/f81fd2e4c52864042852c112ce927ae2.png)
![](https://hibi-log.com/wp-content/uploads/2021/03/f81fd2e4c52864042852c112ce927ae2.png)
![](https://hibi-log.com/wp-content/uploads/2021/03/f81fd2e4c52864042852c112ce927ae2.png)
(必要なかたは)スマホのサイドバーの設定もお忘れなく♪
お役に立てたらうれしいです。
おしまい。
コメント