当ブログ愛用のWordPressテーマ
広告
＼乗り換え先おすすめテーマ！／
／ブロガーとして本格的に取り組む＼
SWELLの評判レビュー記事
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判...
SWELLサイドバーのカスタマイズ設定｜表示・非表示の切り替えもできる！
「サイドバーにプロフィールやカテゴリーを設置したい…」
「サイドバーに広告を表示できる？」
「サイドバーを非表示にするには？」
この記事ではそんな方に向けて、SWELLでサイドバーをカスタイマイズ設定する方法を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
この記事を読めば、あなたも簡単に
- 好きな順番でコンテンツをサイドバーに配置できる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、サイトの回遊率やユーザーの利便性を高めることができました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
また以下の記事では、SWELL導入後にやっておきたい設定を初心者向けに紹介しています。
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ
「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…
目次
SWELLでカスタマイズ設定できるサイドバーは4種類ある
SWELLでカスタマイズ設定できるサイドバーは4種類あります。
サイドバーの種類
- 共通サイドバー
- 共通サイドバー【スマホ版】
- トップページ専用サイドバー
- 追尾サイドバー
各サイドバーにウィジェットを追加した場合の表示の有無を、以下の表にまとめました。
| 種類 | デバイス別での表示・非表示 | ページ別での表示・非表示 | ||||
|---|---|---|---|---|---|---|
| PC | スマホ | タブレット | トップページ | 固定ページ | カテゴリー・ タグページ | |
| 共通サイドバー | ||||||
| 共通サイドバー 【スマホ版】 | ||||||
| トップページ専用 サイドバー | ||||||
| 追尾サイドバー | ||||||
※〇：表示される、×：表示されない、△：共通サイドバー【スマホ版】にウィジェットを追加していない場合は表示される
共通サイドバーは、ほぼ全てのデバイスとページに表示されることが分かりますね。
また、全種類のサイドバーにウィジェットを追加した場合、以下のような順番で上から並びます。
| デバイス画面 | 上からの並び順 | ||
|---|---|---|---|
| 1番目 | 2番目 | 3番目 | |
| PC | トップページ専用サイドバー | 共通サイドバー | 追尾サイドバー |
| スマホ | トップページ専用サイドバー | 共通サイドバー or 共通サイドバー【スマホ版】 | 追尾サイドバー |
| タブレット | トップページ専用サイドバー | 共通サイドバー | 追尾サイドバー |
各サイドバーの並び順とデバイス・ページ別での表示の有無が分かったところで、これからサイドバーに設置したいウィジェットを紹介します。
かめコンパス基礎編⇒応用編の順に紹介するよ
【基礎編】SWELLサイドバーのカスタマイズ設定7つ
SWELLでサイドバーをカスタマイズ設定する方法を紹介します。
設定方法は、WordPress管理画面で外観⇒ウィジェットの順にクリックして表示されるページで行ってください。
今回は以下7つのウィジェットをサイドバーに設置していきます。
カスタマイズ項目
※上のリンクをクリックすると見たい場所へジャンプします。
プロフィールを設置する
サイドバーにプロフィールを設置していきます。
設定方法は、「利用できるウィジェット」で[SWELL]プロフィールをプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
プロフィールを設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加されたプロフィールウィジェットで以下の設定を行い、保存をクリックしてください。
- 名前
- 役職(肩書き)
- プロフィール文
- アイコン画像
- プロフィール背景画像
- ボタンリンク先
- ボタンテキスト
- ボタンの色
- SNSアイコンリストを表示する
- アイコンを丸枠で囲む
※青色の文字は設定推奨
これでサイドバーにプロフィールを設定できます。
カテゴリーリストを設置する
サイドバーにカテゴリーリストを設置していきます。
設定方法は、「利用できるウィジェット」でカテゴリーをプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
カテゴリーリストを設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加されたカテゴリーウィジェットで以下の設定を行い、保存をクリックしてください。
- タイトル
- ドロップダウンで表示
- 投稿数を表示
- 階層を表示
※未設定でOK
これでサイドバーにカテゴリーリストを設置できます。
サイト内検索フォームを設置する
サイドバーにサイト内検索フォームを設置していきます。
設定方法は、「利用できるウィジェット」で検索をプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
サイト内検索フォームを設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加された検索ウィジェットで以下の設定を行い、保存をクリックしてください。
- タイトル
※未設定でOK
これでサイドバーにサイト内検索フォームを設置できます。
投稿の月別アーカイブを設置する
サイドバーに投稿の月別アーカイブを設置していきます。
設定方法は、「利用できるウィジェット」でアーカイブをプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
投稿の月別アーカイブを設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加されたアーカイブウィジェットで以下の設定を行い、保存をクリックしてください。
- タイトル
- ドロップダウンで表示
- 投稿数を表示
※青色の文字は設定推奨
これでサイドバーに投稿の月別アーカイブを設置できます。
広告を設置する
サイドバーに広告を設置していきます。
設定方法は、「利用できるウィジェット」で[SWELL]広告コードをプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
広告を設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加された広告コードウィジェットの「広告タグ」にASPやGoogleアドセンスなどの広告コードを貼り付け、保存をクリックしてください。
これでサイドバーに広告を設置できます。
目次を設置する
サイドバーに目次を設置していきます。
設定方法は、「利用できるウィジェット」で[SWELL]目次をプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
目次を設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加された目次ウィジェットで以下の設定を行い、保存をクリックしてください。
- タイトル
※未設定でOK
これでサイドバーに目次を設置できます。
人気記事・新着記事を設置する
サイドバーに人気記事・新着記事を設置していきます。
設定方法は、「利用できるウィジェット」で[SWELL]新着記事 or [SWELL]人気記事をプルダウンしてください。
設置したい種類のサイドバーを選択し、ウィジェットを追加をクリックしましょう。
人気記事・新着記事を設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
サイドバーに追加された人気記事・新着記事ウィジェットで以下の設定を行い、保存をクリックしてください。
- タイトル
- 表示する投稿数
- カード型 or リスト型
- 投稿日を表示する
- カテゴリーを表示する
- PV数を表示する
- １位を大きく表示する(カード型でのみ有効)
- 非表示にするページを選択
※青色の文字は設定推奨、黄色の文字は人気記事ウィジェットのみ設定可
これでサイドバーに人気記事・新着記事を設置できます。
【応用編】SWELLサイドバーのカスタマイズ設定3つ
SWELLではカスタムHTMLウィジェットとブログパーツ機能を組み合わせて使うことで、オリジナルコンテンツをサイドバーに表示させることができます。
今回は以下3つのオリジナルコンテンツをサイドバーに設置していきます。
カスタマイズ項目
設定方法は以下の3ステップです。
STEP
ブログパーツでオリジナルコンテンツを作成
ブログパーツ⇒投稿を追加の順にクリックする
本文にブロックを自由に配置し、公開をクリックする ※後ほど紹介
STEP
ブログパーツの呼び出しコードをコピー
ブログパーツ⇒ブログパーツの順にクリックする
作成したブログパーツの呼び出しコードをコピーする
STEP
カスタムHTMLウィジェットにブログパーツの呼び出しコードを貼り付け
外観⇒ウィジェットの順にクリックし、カスタムHTMLウィジェットをサイドバーに追加する
カスタムHTMLウィジェットの「内容」に作成したブログパーツの呼び出しコードを貼り付ける
後ほど紹介するオリジナルコンテンツを設置したほうがいいサイドバー
| トップページ専用サイドバー | 共通サイドバー | 共通サイドバー【スマホ版】 | 追尾サイドバー |
|---|---|---|---|
これでオリジナルコンテンツをサイドバーに設置できます。
では実際に、オリジナルコンテンツを作成していきましょう。
アフィリエイト広告+レビュー記事
サイドバーに設置するコンテンツ「アフィリエイト広告+レビュー記事」を作成していきます。
STEP
アフィリエイト広告の配置
ブログパーツの本文始めの段落ブロックを選択し、ページ左上の+⇒カスタムHTMLの順にクリックする
STEP
ページに挿入されたカスタムHTMLブロックにASPの広告コードを貼り付ける
STEP
レビュー記事の配置
配置したアフィリエイト広告の下の段落ブロックを選択し、+⇒投稿リストの順にクリックする
STEP
ページに挿入された投稿リストブロックを選択し、ページ右上の設定⇒ブロックの順にクリックする
SettingタブとPickupタブ内それぞれで以下の設定を行う
–Setting–
- 表示する投稿数
-
1
- レイアウトを選択
-
カード型
- 各種表示設定
-
すべてOFF
- カテゴリー表示位置
-
表示しない
- タイトルのHTMLタグ
-
div
- 最大カラム数(PC・SP)
-
1列
- 抜粋文の文字数(PC・SP)
-
0
- MOREリンクの表示テキスト
-
〇〇の評判レビューを見る
- MOREリンクのURL
-
〇〇の評判レビュー記事のURL
–Pickup–
- 投稿IDを直接指定
-
〇〇の評判レビュー記事の投稿ID
これで「アフィリエイト広告+レビュー記事」を作成できます。
設定方法【STEP1】に戻り、残りの【STEP2】~【STEP3】を行ってください。
おすすめ記事【カテゴリー別】
サイドバーに設置するコンテンツ「おすすめ記事【カテゴリー別】」を作成していきます。
STEP
ページタイトルに「〇〇おすすめ記事」と入力する
ブログパーツの本文始めの段落ブロックを選択し、ページ左上の+⇒投稿リストの順にクリックする
STEP
ページに挿入された投稿リストブロックを選択し、ページ右上の設定⇒ブロックの順にクリックする
SettingタブとPickupタブ内それぞれで以下の設定を行う
–Setting–
- 表示する投稿数
-
3
- レイアウトを選択
-
リスト型
- 各種表示設定
-
すべてOFF
- カテゴリー表示位置
-
表示しない
- タイトルのHTMLタグ
-
div
- 抜粋文の文字数(PC・SP)
-
0
–Pickup–
- 投稿IDを直接指定
-
表示したい記事の投稿IDを3つ ※隣接する投稿IDは「,」で区切ってください。
これで「おすすめ記事【カテゴリー別】」を作成できます。
設定方法【STEP1】に戻り、残りの【STEP2】~【STEP3】を行ってください。
ボックス型アイコン+テキストリンク
サイドバーに設置するコンテンツ「ボックス型アイコン+テキストリンク」は、ボックスメニューブロックを使って作成できます。
作成方法やボックスメニューブロックの使い方については、下の記事にまとめてますのでご覧ください。
「ボックス型アイコン+テキストリンク」を作成できたら設定方法【STEP1】に戻り、残りの【STEP2】~【STEP3】を行いましょう。
SWELLサイドバーの表示・非表示を切り替える方法
さて、SWELLではページごとにサイドバーの表示・非表示設定ができます。
ここでは以下の3タイプに分けて、サイドバーの表示・非表示を切り替える方法を紹介します。
本見出しの内容
※上のリンクをクリックすると見たい場所へジャンプします。
ページ種別で設定する
サイドバーの表示・非表示の切り替えを以下4つで設定できます。
- トップページ
- 投稿ページ
- 固定ページ
- アーカイブページ
設定方法は以下のとおりです。
STEP
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
STEP
サイドバーをクリックする
STEP
「サイドバーを表示するかどうか」でサイドバーを表示したい以下の項目にチェックを入れる
- トップページにサイドバーを表示する
- 投稿ページにサイドバーを表示する
- 固定ページにサイドバーを表示する
- アーカイブページにサイドバーを表示する
STEP
公開をクリックする
これでページ種別でサイドバーの表示・非表示設定ができます。
投稿(固定)ページごとで設定する
サイドバーの表示・非表示の切り替えを投稿ページごと、固定ページごとで設定できます。
設定方法は以下のとおりです。
STEP
サイドバーの表示・非表示設定をするページの編集画面を開き、右上の設定⇒投稿の順にクリックする
STEP
表示の上書き設定でサイドバー「表示」or「非表示」を選ぶ
STEP
保存をクリックする
これで投稿(固定)ページごとでサイドバーの表示・非表示設定ができます。
カテゴリー・タグページごとで設定する
サイドバーの表示・非表示の切り替えをカテゴリーページごと、タグページごとで設定できます。
設定方法は以下のとおりです。
STEP
WordPress管理画面で、投稿⇒カテゴリー or タグの順にクリックする
STEP
サイドバーの表示・非表示設定をするカテゴリー(タグ)ページをクリックする
STEP
SWELL設定でサイドバー「表示」or「非表示」を選ぶ
STEP
更新をクリックする
これでカテゴリー(タグ)ページごとでサイドバーの表示・非表示設定ができます。
まとめ：SWELLサイドバーを設定して必要な情報を並べよう
今回は、SWELLでサイドバーをカスタイマイズ設定する方法を紹介しました。
本記事のおさらい
当ブログではSWELLに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！
・ ・ ・
SWELLの関連記事まとめ
SWELL専用ブロックの使い方
SWELLサイト全体のカスタマイズ
この記事が気に入ったら
フォローしてね！
コメント