【SWELL】サイドバーの設定方法

SWELLのサイドバー設定
URLをコピーする
URLをコピーしました!

このページではSWELLの使い方について解説しています。

今回はサイドバーの設定について画像付きで詳しく説明しています。

この記事の内容
  • ページごとのサイドバー表示/非表示
  • サイドバーのデザイン
  • サイドバーに好きなウィジェットを入れてカスタマイズ

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

この機能を使って、変更を確認しながら基本設定を進めましょう。

テーマカスタマイザー
テーマカスタマイザー

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール
目次

サイドバーの表示/非表示

「外観」>「カスタマイズ」>「サイドバー」に進みます。

ページごとのサイドバーの表示/非表示を設定する

サイドバーの表示/非表示を各ページごとに設定できます。

例えば、トップページはブログ風ではなく、フルワイドでサイト型にしたい場合は、トップページのサイドバーを表示するのチェックを外します。

また、サイドバーの位置を左右で選択できます。

サイドバー内のウィジェットタイトルのデザイン

「外観」>「カスタマイズ」>「サイトの全体設定」>「タイトルデザイン」に移動すると、サイドバーのタイトル部分のデザインを変更できます。

サイドバーのウィジェットタイトルのデザイン

サイドバーのタイトルとフッターのタイトルはそれぞれ以下のエリアを表しています。

サイドバーのタイトルの例
サイドバーのタイトル部分
フッターのタイトルの例
フッターのタイトル部分

投稿ページごとのサイドバーの表示/非表示設定

SWELLでは投稿ページもしくは固定ページごとに、サイドバーの表示/非表示を設定できます。

各投稿編集ページのサイドバー「文書」内を下にスクロールすると、【SWELL設定】という箇所があります。

この中の「表示の上書き設定」が、デフォルトの設定よりここでの設定を優先してくれます。

サイドバーに限らず、様々な項目が上書きで設定できます。

ページごとでサイドバーの表示/非表示が選べる

サイドバーのウィジェットエリアをカスタマイズ

サイドバーは以下の4つのエリアで設定できます。

サイドバーのウィジェットエリア

使い方としては、例えば、「PC版ではサイドバーに新着記事と人気記事を載せたいけど、SP版ではスクロールが長くなるのでシンプルにプロフィールだけにしたい。」という場合は、共通サイドバー【スマホ版】にはプロフィールだけ設置します。

共通サイドバー

全ページ共通のサイドバーです。ここに設置したウィジェットはすべてのページで共通に表示されます。

共通サイドバー【スマホ版】

スマホでの「共通サイドバー」です。ウィジェットアイテムが何も配置されていない場合は、通常の「共通サイドバー」の内容がスマホで表示されます。

スマホ専用のサイドバーを表示したい場合は、何かしらのウィジェットを入れましょう。

トップページ専用サイドバー

トップページでのみ表示されるウィジェットエリアです。
「共通サイドバー」のいちばん上のエリアに表示されます(PC/SP)。

追尾サイドバー

追尾サイドバーとは、スクロールしても動かず表示され続けるウィジェットエリアです。

ウィジェットの一番下に表示されます。

目次を固定しておきたい場合や、常に見せたい広告がある場合などに使います。

以上でサイドバーの設定は終わりです。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる