SWELLのサイドバー設定方法と追尾させる方法をWord Pressブログ初心者でもわかりやすく解説

サイドバー設定方法・追尾サイドバー設定方法
調べ人

・WordPressテーマ『SWELL』サイドバーの設定方法を初心者でもわかるように知りたい

・サイドバー追尾ってなに?

・SWELLでサイドバーを追尾させたい

ー 当記事でわかること ー

  • WordPressテーマSWELLのサイドバーの設定方法
  • SWELLで設定したサイドバーを追尾させる設定方法
Free

結婚を意識するようになってから、資産形成を本気で考え色々行動して、人生好転しているFreeです。
そんな僕はこんな感じです

  • 2018年副業開始:副業月収35万達成
  • 副業実績でブラック企業からITWeb業界に転職成功
  • 資産5,000万目指して爆進中
  • 副業ブログ約2年で本業×副業×共働きで月収130万円越えを達成!

『初心者向け』でわかりやすくWordPressテーマのSWELLのサイドバー設定から追尾までの方法をわかりやすくご紹介します。

※当記事の設定方法は細かく画像を多様して特にわかりやすさにこだわっています。

わかりやすさにこだわっている理由の1つに「ボクが初めてWordPressブログを開設した初心者の時にもっと細かいところを説明してほしい…」とおもったことが何度もあったからです。

ペルソナはブログ立ち上げ時期の初心者時代の自分です。
なので、誰でも簡単にわかるように画像も多く使用して説明しているので、ぜひ最後までお付き合いください。

WordPressブログを開設がまだの方、SWELL導入がまだの方へ

Free

WordPressブログやサイトをまだ作っていない方やSWELL導入がまだの方は、上記を参考にしてみてくださいね。

目次

WordPressブログのサイドバーとは?

WordPressブログのサイドバーとは、その名の通り、メインコンテンツにあたるトップページ含む固定ページやメイン記事の右側もしくは左側に設置されている領域のことです。

このサイドバーですが、機能や用途は多岐に渡ります。

トップページやメイン記事と同様に『テキスト』以外にも『画像・目次・広告・ボタン』などを設置することが出来る機能です。

Free

ボクが思うベストな用途としては、メインコンテンツを補完するために使う方法がベストだと思ってるよ!ユーザービリティも高まるからね!

Fun

ユーザーのための広告ならまだしも、収益に目がくらみ意味のない広告ばかりペタペタ貼っている記事って個人的には好きじゃないのよね…

サイドバーに似た機能は『ヘッダー』『フッター』

また似たような領域として、ブログ/サイトの上部の領域には『ヘッダー』や『フッター』があります。

このあたりはまた別記事にて解説いたします。

サイドバーはWordPressブログのテーマにより設定方法が異なる

基本的にサイドバーの考え方は前述の通り、メインコンテンツを補完するため、すなわちユーザービリティを高めるために大半のブログには必須の機能です。

このサイドバーの設定方法ですが、WordPressテーマにより多少異なっています。当記事はWordPressテーマ『SWELL』の利用者向けにサイドバーの設定方法とサイドバーの追尾方法を解説していきます。

SWELLサイドバーの設定方法

SWELLでサイドバーを任意の通りに表示するための設定手順は2ステップ

  • ステップ①:サイドバーに何を表示させるか設定する
  • ステップ②:サイドバーのどのページに表示させるか設定する

では、順に確認します。

ステップ①:サイドバーに『何を表示させるか』設定

ダッシュボード画面でサイドバーを設定する

ダッシュボード > 外観 > ウィジェット > 共通サイドバー

サイドバーウィジェットへの設置:設定方法
ダッシュボード >外観 >ウィジェット>共通サイドバー

上画像の通り、ウィジェットに入ると『共通サイドバー』と『共通サイドバー【スマホ版】』があります。PC版とスマホ版で表示を変える場合はどちらも設定してください。

次は、ウィジェット内にサイドバーに表示させる『コンテンツ』を決めます。方法は下記の通り

ウィジェットの設定画面サイドドバーの設置
コンテンツを決める:プロフィールを入れている状態↑

基本的には、上記画像の通りドラッグ&ドロップ(マウスをクリックしながら移動で設置)で設定可能ですが、“検索”などの画面下にある項目を入れる場合はクリックして選択することも可能です。

ウィジェット設定『検索』を世知する場合
『検索』を共通サイドバーに設置する方法

『検索・音声・画像・最近の投稿』などは下の方にあるため、ドラッグ&ドロップが難しいので、上画像のようにクリックをしてドロップダウンリストから『共通サイドバー』を選択することをオススメします。

プロフィールはよく入れる項目なので、念の為設定画面を確認

サイドバーに設置する項目は人によりけりだと思いますが、多くの方は『プロフィールを設置』するはずです。

共通サイドバーに『プロフィール』を設置したら、アイコン画像や文章を入れる必要があります。

あなたのブログに対して、読者が興味を持つ内容に設定したり、読者を安心させることができるような内容にしましょう。

ステップ②:サイドバーを『どこに表示させるか』設定

カスタマイズ画面でサイドバーを設定する

カスタマイズ > サイドバー

サイドバーをどこに表示させるか選択する
カスタマイズ > サイドバー

上記の画像の場所でサイドバーを任意の場所にコンテンツとして表示させることが可能になります。任意の場所は全部で4つ。

初心者の方からすると表示場所4つがどこかわかりにくいと思いますので、確認しておきますね。

  • 1.トップページにサイドバーを表示する
  • 2.投稿ページにサイドバーを表示する
  • 3.固定ページにサイドバーを表示する
  • 4.アーカイブページにサイドバーを表示する

 1.トップページにサイドバーを表示する

トップページにサイドバー表示場合

トップページにサイドバー表示の場合

トップページにサイドバー非表示場合

トップページにサイドバー非表示の場合

上記の通り、自身のブログのトップページに表示されるサイドバーを設置するかしないか設定できます。

Free

ボクのブログのページの「トップページはこちら」当フリファンブログはサイドバー表示OFF(オフ)にしています。

 2.投稿ページにサイドバーを表示する

投稿ページにサイドバー表示場合

投稿ページにサイドバー表示の場合

投稿ページにサイドバー非表示場合

投稿ページにサイドバー非表示の場合

上記の通り、自身のブログの投稿ページ、すなわち新着記事にサイドバーを設置するかしないか設定できます。

Free

ボクのブログの「投稿ページこちら」当フリファンブログはサイドバー表示ON(オン)にしています。

 3.固定ページにサイドバーを表示する

固定ページにサイドバー表示場合

固定ページサイドバー表示の場合

固定ページにサイドバー非表示場合

固定ページサイドバー非表示の場合.png

上記の通り、自身のブログの固定ページ、すなわち『プロフィールやお問い合わせ』のページにサイドバーを設置するかしないか設定できます。

Free

ボクのブログの「固定ページ(プロフィール)はこちら」当フリファンブログはサイドバー表示ON(オン)にしています。

固定ページがどのページかわからない方は下記の画像を見てくださいね。

ダッシュボード > 固定ページ

固定ページの確認方法

ダッシュボード > 固定ページの中で確認ができます。

 4.アーカイブページにサイドバーを表示する

固定ページサイドバー表示の場合のアーカイブ
アーカイブ:当フリファンブログはフッターに設置

アーカイブページにサイドバー表示場合

アーカイブページにサイドバー表示の場合

アーカイブページにサイドバー非表示場合

アーカイブページにサイドバー非表示の場合

上記の通り、自身のブログのアーカイブページ、すなわち『過去の月ごとの記事』のページにサイドバーを設置するかしないか設定できます。

Free

ボクのブログのアーカイブページはこちら」当フリファンブログはサイドバー表示ON(オン)にしています。

上記の4つの表示位置を確認して、自身のブログページに表示させたい位置にサイドバーを設置しましょう。

SWELLサイドバー追尾の設定方法

サイドバー追尾の設定方法の前に、まず「サイドバー追尾って何?」って方がいるかと思いますので、確認しておきます。

スクロールをしても表示設定しているコンテンツがサイドバーとしてスクロールに追尾してくれる機能のことです。

では、設定画面に移ります。

外観 > ウィジェット > 追尾サイドバー

追尾サイドバーの場所確認
外観 > ウィジェット > 追尾サイドバー

上記の手順でSWELL『追尾サイドバー』を設定させることが出来ます。

ブロガーに人気追尾サイドバーのコンテンツは4種類

主にブロガーで追尾サイドバーに設定しているコンテンツで多いものが下記の4種類あります。

追尾サイドバーに設置する人が多いコンテンツ4点

  1. 目次
  2. 新着記事
  3. 人気記事
  4. 広告
ネッコ

この4つすべてを表示させるのではなく、1~2個を常時表示させているブロガーが多いで!

サイドバーの設定同様『ドラッグ&ドロップ(マウスをクリックしながら移動で設置)』で追尾サイドバーを設定することが可能です。

人気追尾サイドバー①:目次

サイドバー追尾:目次
追尾サイドバー:目次

人気追尾サイドバー②:新着記事

サイドバー追尾:新着記事
サイドバー追尾:新着記事

表示する投稿数は多くても5記事までで、オススメは3記事です。

カード型かリスト型を選択して、非表示にするページがあれば選択しましょう。

人気追尾サイドバー③:人気記事

サイドバー追尾:人気記事
サイドバー追尾:人気記事

表示する投稿数は新着記事同様に多くても5記事までで、オススメは3記事です。

カード型かリスト型を選択して、非表示にするページがあれば選択しましょう。

人気追尾サイドバー④:広告

サイドバー追尾:カスタムHTML
サイドバー追尾:広告(カスタムHTML)

アフィリエイトの広告を貼ることができます。アフィリエイト広告は『登録しているASP』のコードにより、異なりますが「コピー&ペースト」で問題ありません。

当フリファンブログのサイドバー追尾は『もくじ』もしくは『目次+1』

当ブログのフリファンブログのサイドバー追尾は基本的には『もくじ』のみが多いです。

目次以外のサイドバー追尾を入れたとしても『目次+1コンテンツ』くらいですね。

サイドバー追尾は、色々見てもらいたい!ということでついつい色んなコンテンツを設置してしまいますが、あまりごちゃごちゃさせることはユーザービリティを下げることになり、離脱要素の一因になりかねません。

あくまでもサイドバーはメインコンテンツを補完させるためのコンテンツであるという視点を忘れないようにしましょうね。

まとめ:カスタマイズを駆使して『ユーザービリティ』を高めよう

ブログを運営していく上で、サイドバーの設定は重要です。追尾サイドバーも有効的に活用することで読者(ユーザー)目線のコンテンツとして、自身のブログを充実させることが可能です。

読者目線で有益な記事を書くだけでなく、居心地の良いブログ運営をしてユーザービリティを高めていきましょうね。

WordPressブロガーでテーマ『SWELL』を使っている方で、他のSWELL設定方法を知りたい方はぜひ他のSWELL記事もご覧ください。

月給ブロガーに有益なブログ情報記事も書いているので、一度読んでみてくださいね。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる