![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
ウィジェットの利用を考えています。ウィジェットを設置した時にどこにどのように表示されるのか教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- ウィジェットを設置できる全20エリア
- スクロールに伴う追従ヘッダーと追尾サイドバーの表示の変化
- PCとスマホ時の表示の違い
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容
【SWELL】ウィジェットを設置できる場所一覧【全20エリア】
ヘッダー用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/2067a3fe5e088b2fb251837d01009462-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/2067a3fe5e088b2fb251837d01009462-1.jpg)
ヘッダーのレイアウト(PC)
![](https://hrdyuic.com/wp-content/uploads/ba6406fdd8a091bb9caf5b98279e85f6.jpg)
![](https://hrdyuic.com/wp-content/uploads/ba6406fdd8a091bb9caf5b98279e85f6.jpg)
レイアウトが横並びの場合、追従ヘッダー時にも同じウィジェットが表示されます。
レイアウトが縦並びの場合、追従ヘッダー時はウィジェットが非表示になります。
ヘッダーのレイアウト設定
手順
管理画面メニューから、「外観」>「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/761fde46adce51c567ff65b585b87fe2.jpg)
![](https://hrdyuic.com/wp-content/uploads/761fde46adce51c567ff65b585b87fe2.jpg)
手順
サイドバーから、「ヘッダー」を選択します。
![](https://hrdyuic.com/wp-content/uploads/629bea63da1b864c187a2803afc4eb7e-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/629bea63da1b864c187a2803afc4eb7e-1.jpg)
手順
レイアウト・デザイン設定からヘッダーレイアウトを探します。
![](https://hrdyuic.com/wp-content/uploads/6f7be3b7ca22f29df96608b93bf3cb73-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/6f7be3b7ca22f29df96608b93bf3cb73-1.jpg)
全ページ共通のウィジェットエリア
※ サイドバーを非表示にしているページは、「共通サイドバー」「追尾サイドバー」は表示されません。
![](https://hrdyuic.com/wp-content/uploads/026222ecd812a7e045f71e4bfdaebd96.jpg)
![](https://hrdyuic.com/wp-content/uploads/026222ecd812a7e045f71e4bfdaebd96.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-18-21_58_32-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-18-21_58_32-1.jpg)
追尾サイドバー
※ 追尾サイドバーにウィジェットの[SWELL]目次のみを設置している場合、目次が表示されるページのみ追尾サイドバーが表示されます。
トップページ用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/4670473025e90afde4730f7d80370663.jpg)
![](https://hrdyuic.com/wp-content/uploads/4670473025e90afde4730f7d80370663.jpg)
トップページ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-18-21_58_32-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-18-21_58_32-2.jpg)
投稿ページ用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/51498e580d78c746526500d1b6e53a19.jpg)
![](https://hrdyuic.com/wp-content/uploads/51498e580d78c746526500d1b6e53a19.jpg)
投稿ページ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-66-2023-12-18-21_59_53-1-scaled.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-2023-12-66-2023-12-18-21_59_53-1-scaled.jpg)
固定ページ用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/a01119d431258dec7fa5476af6ed6b2a.jpg)
![](https://hrdyuic.com/wp-content/uploads/a01119d431258dec7fa5476af6ed6b2a.jpg)
固定ページ
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-sample-page-2023-12-19-07_21_49.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-local-sample-page-2023-12-19-07_21_49.jpg)
スマホ用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/fbfea7120f9cf4527c33bb34bb67d338.jpg)
![](https://hrdyuic.com/wp-content/uploads/fbfea7120f9cf4527c33bb34bb67d338.jpg)
共通サイドバー【スマホ版】
「共通サイドバー【スマホ版】」を設置すると「共通サイドバー」がスマホでのみ上書きされます。
![](https://hrdyuic.com/wp-content/uploads/ac469ae1eefd3685542c483a98622b7f.jpg)
![](https://hrdyuic.com/wp-content/uploads/ac469ae1eefd3685542c483a98622b7f.jpg)
フッター(スマホ)
「フッター(スマホ)」を設置するとスマホでのみ「フッター(PC)1〜3」が非表示になります。
![](https://hrdyuic.com/wp-content/uploads/c61012da132e2acebf2223524d9d1de9.jpg)
![](https://hrdyuic.com/wp-content/uploads/c61012da132e2acebf2223524d9d1de9.jpg)
スマホ開閉メニュー用のウィジェットエリア
![](https://hrdyuic.com/wp-content/uploads/4ba1612a16afee3211a415f0d441602b.jpg)
![](https://hrdyuic.com/wp-content/uploads/4ba1612a16afee3211a415f0d441602b.jpg)
スマホ開閉メニュー
※ メニューの下に表示されます。
![](https://hrdyuic.com/wp-content/uploads/a21ee43d76f7e4a05af192ab9831b53d-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a21ee43d76f7e4a05af192ab9831b53d-1.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
今回は以上です。