このページではSWELLの使い方について解説しています。
今回はサイドバーの設定について画像付きで詳しく説明しています。
- ページごとのサイドバー表示／非表示
- サイドバーのデザイン
- サイドバーに好きなウィジェットを入れてカスタマイズ
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。
この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。
サイドバーの表示／非表示
「外観」＞「カスタマイズ」＞「サイドバー」に進みます。
サイドバーの表示／非表示を各ページごとに設定できます。
例えば、トップページはブログ風ではなく、フルワイドでサイト型にしたい場合は、トップページのサイドバーを表示するのチェックを外します。
また、サイドバーの位置を左右で選択できます。
サイドバー内のウィジェットタイトルのデザイン
「外観」＞「カスタマイズ」＞「サイトの全体設定」＞「タイトルデザイン」に移動すると、サイドバーのタイトル部分のデザインを変更できます。
サイドバーのタイトルとフッターのタイトルはそれぞれ以下のエリアを表しています。
投稿ページごとのサイドバーの表示／非表示設定
SWELLでは投稿ページもしくは固定ページごとに、サイドバーの表示／非表示を設定できます。
各投稿編集ページのサイドバー「文書」内を下にスクロールすると、【SWELL設定】という箇所があります。
この中の「表示の上書き設定」が、デフォルトの設定よりここでの設定を優先してくれます。
サイドバーに限らず、様々な項目が上書きで設定できます。
サイドバーのウィジェットエリアをカスタマイズ
サイドバーは以下の4つのエリアで設定できます。
使い方としては、例えば、「PC版ではサイドバーに新着記事と人気記事を載せたいけど、SP版ではスクロールが長くなるのでシンプルにプロフィールだけにしたい。」という場合は、共通サイドバー【スマホ版】にはプロフィールだけ設置します。
共通サイドバー
全ページ共通のサイドバーです。ここに設置したウィジェットはすべてのページで共通に表示されます。
共通サイドバー【スマホ版】
スマホでの「共通サイドバー」です。ウィジェットアイテムが何も配置されていない場合は、通常の「共通サイドバー」の内容がスマホで表示されます。
スマホ専用のサイドバーを表示したい場合は、何かしらのウィジェットを入れましょう。
トップページ専用サイドバー
トップページでのみ表示されるウィジェットエリアです。
「共通サイドバー」のいちばん上のエリアに表示されます（PC／SP）。
追尾サイドバー
追尾サイドバーとは、スクロールしても動かず表示され続けるウィジェットエリアです。
ウィジェットの一番下に表示されます。
目次を固定しておきたい場合や、常に見せたい広告がある場合などに使います。
以上でサイドバーの設定は終わりです。