SWELLで追従ボタンを設置する方法｜ヘッダー・目次・SNSシェアを初心者向けにやさしく解説

SWELLで「追従ボタンを付けたいけど、どこで設定するのか分からない」と迷っていませんか。

追従ボタンは難しいカスタマイズが必要そうに見えますが、実はSWELLの標準機能を組み合わせればサクッと用意できます。

この記事では、よく使う追従ボタンをヘッダーと目次とSNSシェアの3つに絞って、初心者さんでも手順どおりに進められるようにまとめました。

どれを選ぶかで迷ったときの考え方も一緒に紹介するので、あなたのサイトに合う形が見つかります。

やりたいこと	おすすめ	設定場所の目印
行動導線を押しやすくしたい	ヘッダー追従ボタン	ブログパーツ＋ヘッダー内部ウィジェット
長い記事を読みやすくしたい	固定目次ボタン	サイト全体設定→下部固定ボタン・メニュー
シェア導線を分かりやすくしたい	SNSシェア固定	投稿・固定ページ→SNSシェアボタン

設定が終わったら、あなたのサイトが「迷わない」「押しやすい」やさしい動線に変わります。

ではさっそく、あなたに合う追従ボタンから順番に整えていきましょう。

この記事でわかること

SWELLで使える追従ボタン3パターンの違い。
ヘッダー追従ボタンの作り方と設置手順。
固定目次ボタンの表示方法と形の選び方。
SNSシェアボタンを画面端に固定表示する設定方法。

まず結論：SWELLの追従ボタンは「ヘッダー・目次・SNSシェア」の3つでOK

追従ボタンを付けると何が変わる？（迷子防止・押しやすさ）

追従ボタンは、ページをスクロールしてもボタンが画面内に残る仕組みです。

読者さんが「戻る」「探す」「シェアする」を迷わずできるので、サイトがやさしくなります。

特にスマホは指が届きやすい位置に導線を置けるので、操作のストレスを減らしやすいです。

ただしボタンを増やしすぎると画面が窮屈になるので、必要なものだけに絞るのがコツです。

3パターンの違い（どれを選べばいい？）

SWELLでよく使われる追従ボタンは、ヘッダー追従と固定目次ボタンとSNSシェア固定の3つです。

役割が違うので、目的から選ぶと迷いません。

種類	出る場所	向いている目的	おすすめ度
ヘッダー追従ボタン	画面上部	お問い合わせやLINEなどの導線を常に見せたい	高
固定目次ボタン	画面右下	長い記事で見出しへすぐ移動してもらいたい	高
SNSシェア固定	画面端（主にPC）	記事の拡散導線をわかりやすくしたい	中

先に知っておきたい注意点（PCだけ/表示条件など）

固定のSNSシェアボタンは、テーマ設定によってPC表示でのみ出るケースがあります。

固定目次ボタンは、目次が生成されている記事でのみ表示されることがあります。

設定項目名はSWELLのバージョンで少し表記が変わることがあるので、近い言葉を探せば大丈夫です。

反映が遅いときはキャッシュが原因のこともあるので、焦らず順番に確認すると安心です。

追従ボタン3パターンの選び方（あなたに合うのはどれ？）

ヘッダー追従ボタンがおすすめなケース（お問い合わせ・LINEなど）

「読んだあとに行動してほしい」目的があるなら、ヘッダー追従ボタンが相性よしです。

たとえばお問い合わせや予約やLINE登録などの導線は、ヘッダーに置くと見失われにくいです。

複数ボタンも置けますが、初心者さんはまず1つからが失敗しにくいです。

目次ボタンがおすすめなケース（長い記事の読みやすさUP）

見出しが多い記事は、途中で「どこを読んでるんだっけ」になりやすいです。

固定目次ボタンがあると、右下からすぐ目次を開けるので読みやすさが上がります。

検索から来た読者さんが必要なところだけ拾い読みしやすくなるのもメリットです。

SNSシェア追従がおすすめなケース（拡散導線をつくる）

記事を読みながら「これシェアしたい」と思っても、ボタンが見つからないとそのまま閉じられがちです。

画面端の固定シェアがあると、シェアの入口がわかりやすくなります。

ただし表示はPC中心になりやすいので、スマホ重視なら上部や下部シェアを整えるのもおすすめです。

あなたの目的	まず付けたい追従ボタン	次に足すなら
お問い合わせや導線を強くしたい	ヘッダー追従ボタン	固定目次ボタン
記事を読みやすくしたい	固定目次ボタン	ヘッダー追従ボタン
シェアされやすくしたい	SNSシェア固定	固定目次ボタン

SWELLのヘッダーに追従ボタンを設置する方法（ブログパーツ＋ウィジェット）

手順1：ブログパーツでボタンを作る（SWELLボタン）

ヘッダーに置くボタンは、まずブログパーツで作っておくと管理が楽です。

ブログパーツにしておけば、文言やリンク先を後から直すときも一括で変更しやすいです。

ダッシュボードでブログパーツを開き、新規追加します。
タイトルは自分がわかる名前でOKなので、たとえば「ヘッダー追従ボタン」などにします。
本文にSWELLボタンブロックを入れます。
ボタンのテキストとリンク先を入力します。
できたら公開して、ブログパーツとして登録します。

ボタン文言は「お問い合わせ」より「無料で相談する」など、行動がわかる言葉にすると親切です。

ただし誇張にならない範囲で、自然な言い方にしておくと安心です。

手順2：ヘッダー内部ウィジェットに呼び出しコードを貼る

ブログパーツを作ったら、次はヘッダーのウィジェットに呼び出します。

ここはやることが決まっているので、順番どおりで大丈夫です。

ブログパーツ一覧で、作ったパーツの呼び出しコードをコピーします。
外観からカスタマイズを開きます。
ウィジェットを開き、ヘッダー内部を選びます。
ウィジェットにカスタムHTMLを追加します。
内容に呼び出しコードを貼り付けて、公開します。

これでヘッダーにボタンが表示されます。

表示位置がイメージと違うときは、ヘッダーのレイアウト設定で並び方が変わることがあります。

手順3：ヘッダーを追従させる（PC/SP）の設定をONにする

ボタンを追従させるには、ヘッダー自体の追従を有効にします。

設定場所は外観 → カスタマイズ → ヘッダーの中にあります。

外観からカスタマイズを開きます。
ヘッダーを開きます。
ヘッダーを追従させる（PC）にチェックを入れます。
スマホでも追従させたい場合はヘッダーを追従させる（SP）も確認します。
公開して反映を確認します。

デフォルトでチェックが入っていることも多いので、入っていればそのままで大丈夫です。

追従ヘッダーの背景が透けて見づらい場合は、不透明度の設定を見直すと読みやすくなります。

うまく出ない時のチェック（ヘッダーレイアウトと追従ヘッダーの仕様）

ボタンが出ないときは、まずヘッダー内部に貼れているかを確認します。

次に、追従設定がPCとSPのどちらに入っているかを見ます。

ヘッダーのレイアウトによっては、追従時に表示要素が省略されるデザインになっていることもあります。

その場合は、ヘッダーの構成をシンプルにして、追従時に残したい要素を優先すると整いやすいです。

SWELLで目次ボタンを追従させる方法（固定目次ボタン）

設定場所（サイト全体設定→下部固定ボタン・メニュー）

固定目次ボタンは、カスタマイザーのサイト全体設定から設定します。

場所さえわかれば、やることはとてもシンプルです。

外観からカスタマイズを開きます。
サイト全体設定を開きます。
下部固定ボタン・メニューを開きます。
目次ボタンの表示設定で表示をオンにします。
公開して反映を確認します。

表示設定は「表示する（四角形）」か「表示する（円形）」を選ぶ形になっていることが多いです。

この時点で、右下に目次ボタンが出ればOKです。

形は「四角形・円形」どっちがいい？（選び方）

迷ったら、まずは円形がおすすめです。

円形は圧迫感が少なくて、スマホでも邪魔になりにくいからです。

一方で、ボタンに文字を入れたい場合は四角形が見やすいことがあります。

デザイン	向いている人	特徴
円形	とにかくスッキリさせたい	控えめで邪魔になりにくい
四角形	ボタンの存在をしっかり見せたい	文字が乗るとわかりやすい

出てこない原因（目次が生成されているページだけ表示）

固定目次ボタンは、そもそも目次がない記事では出ない設定になっていることがあります。

見出しが少ない記事や、目次を非表示にしている記事では、ボタンが表示されないことがあります。

まずは見出しが多い記事で確認すると、原因の切り分けがしやすいです。

スマホで出ないとき（固定フッターメニューとの重なり注意）

スマホで下部固定の要素を増やすと、ボタン同士が重なることがあります。

固定フッターメニューを使っている場合は、目次ボタンとの距離が近くなりやすいです。

重なる場合は、表示する固定要素を減らすか、優先順位を決めて片方だけにするのが安全です。

SWELLでSNSシェアボタンを追従させる方法（画面端に固定表示）

設定場所（投稿・固定ページ→SNSシェアボタン）

SNSシェアの設定は、カスタマイザーの投稿・固定ページの中にあります。

ここで表示位置やデザインをまとめて調整できます。

外観からカスタマイズを開きます。
投稿・固定ページを開きます。
SNSシェアボタンを開きます。

「画面端に固定表示」をONにする手順

設定画面に入ったら、表示位置のチェックを入れるだけでOKです。

表記は「画面端に固定表示」または「画面左側に固定」など、近い言葉になっていることがあります。

表示設定で画面端に固定表示にチェックを入れます。
公開して、PC表示で反映を確認します。

スマホで見えないときは、PC専用表示になっている可能性が高いです。

その場合は、上部や下部のシェアボタンも合わせて検討すると親切です。

表示SNSの選び方（最小構成→必要に応じて追加）

SNSボタンは、増やしすぎると迷いやすくなります。

最初はよく使うSNSだけにして、様子を見て追加がおすすめです。

万人向けに置くなら、XやFacebookやLINEなどの定番を中心にします。
保存系が多いジャンルなら、PocketやPinterestが合うことがあります。
読者さんが使わないSNSを入れると押されにくいので、無理に全部は入れなくて大丈夫です。

デザインの選び方（5種類からサイトに合うものを）

デザインは複数から選べるので、サイトの雰囲気に合わせると統一感が出ます。

迷ったらまずはシンプルなものにして、読みやすさを優先すると失敗しにくいです。

プレビューを見ながら変えられるので、違和感がないかだけチェックすればOKです。

注意：画面端固定のシェアボタンはPC表示のみ

画面端に固定するシェアボタンは、PC表示のみになっていることがあります。

スマホ中心のサイトなら、上部や下部のシェアボタンも併用しておくと安心です。

追従ボタンをもっと使いやすくするコツ（押されやすさは“親切さ”で決まる）

ボタン文言の作り方（短く・具体的に）

ボタンの文字は、短くて具体的なほうが伝わりやすいです。

たとえば「詳細」より「料金を見る」など、押した先が想像できる言葉が親切です。

迷ったら「動詞」を入れると、行動がイメージしやすくなります。

お問い合わせする。
無料で相談する。
公式を見る。
目次へ戻る。

色・サイズの決め方（目立たせすぎない）

目立たせたい気持ちはわかりますが、派手すぎると本文の邪魔になることがあります。

まずはサイトのメインカラーに合わせて、少しだけ強調するくらいがちょうどいいです。

読者さんが「押していいボタンだ」と自然にわかる見た目を意識すると安心です。

ボタンを増やしすぎないコツ（スマホで圧迫しない）

追従要素が多いと、スマホの画面が狭く感じます。

初心者さんは、まず追従ボタンは1〜2個にしておくのがおすすめです。

増やすなら、実際にスマホで見て「読みにくくないか」を基準にすると失敗しにくいです。

効果を見たいときの考え方（同じ条件で1つずつ試す）

追従ボタンを付けたからといって、必ず数字が変わるとは限りません。

だからこそ、同じ期間で一つずつ試すと、何が効いているか判断しやすいです。

いきなり全部変えずに、一つずつがいちばん安全です。

よくある質問・トラブル対策（初心者さんがつまずきやすい所）

設定したのに反映されない（キャッシュ/プレビューの見方）

設定したのに変わらないときは、まず公開できているかを確認します。

次に、ブラウザやキャッシュ系プラグインの影響で古い表示が残っていないかを見ます。

シークレットウィンドウで確認すると、切り分けがしやすいです。

位置がズレる・かぶる（ヘッダー設定と最小CSSの考え方）

追従要素が重なる場合は、表示するものを減らすだけで解決することが多いです。

それでもズレる場合は、ヘッダーの高さや固定フッターの有無を確認します。

初心者さんは、まずSWELLの標準設定で整う範囲にしておくのが安全です。

追従ヘッダーにボタンが出ない（ヘッダーレイアウトが縦並びの場合）

ヘッダーのレイアウトによって、追従時に表示される要素が変わることがあります。

とくに情報が多いヘッダーは、追従時に省略されやすいです。

追従時に残したいものがあるなら、ヘッダーをシンプルにするのが近道です。

アップデート後に設定が見つからない（探し方のコツ）

アップデートで項目名が少し変わることがあります。

その場合は「ヘッダー」「下部固定」「SNSシェア」など、近い単語を手がかりに探すと見つけやすいです。

どうしても見つからないときは、一度カスタマイザーの上から順に見直すと解決することがあります。

あわせて知りたい情報（追従バナー・固定フッターメニュー）

追従バナー（画面下固定）との違い

追従ボタンと似たものに、画面下に出す追従バナーがあります。

追従バナーは「キャンペーン」や「期間限定」など、強めに見せたい案内に向いています。

ただし主張が強いぶん、本文の読みやすさとのバランスが大切です。

固定フッターメニューでできること（目次メニュー等）

SWELLは、下部固定ボタンやメニューで導線を作ることもできます。

スマホで使いやすい位置なので、必要最低限のメニューだけ置くと親切です。

目次ボタンや検索導線と役割がかぶる場合は、どちらかに寄せるとスッキリします。

優先したいこと	おすすめの組み合わせ	理由
読みやすさ	固定目次ボタン	迷子になりにくくなる
行動してもらう	固定目次ボタン＋ヘッダー追従ボタン	読んだあとに自然に動ける
拡散	固定目次ボタン＋SNSシェア固定	シェア導線が見つけやすい

まとめ

SWELLの追従ボタンは、目的に合わせて「ヘッダー」「目次」「SNSシェア」の3つから選べば大丈夫です。

設定はカスタマイザー中心で進められるので、初心者さんでも手順どおりにやれば迷いにくいです。

まずは読みやすさを上げたいなら固定目次ボタンから試すのが安心です。

次に行動導線が必要ならヘッダー追従ボタンを1つ足すと、サイトがぐっと親切になります。

シェア固定はPC表示中心になりやすいので、スマホ重視のときは上部や下部のシェアも意識するとバランスが取れます。

この記事のポイントをまとめます。

追従ボタンはスクロールしてもボタンが残る仕組みです。
SWELLの追従は「ヘッダー」「目次」「SNSシェア」の3パターンで考えると迷いません。
ヘッダー追従はお問い合わせやLINEなどの導線に向いています。
ヘッダー追従ボタンはブログパーツを作ってヘッダー内部ウィジェットで呼び出します。
ヘッダーを追従させる設定はカスタマイザーのヘッダー内でオンにします。
固定目次ボタンはサイト全体設定の下部固定ボタン・メニューで設定します。
目次ボタンは四角形と円形が選べるので、迷ったら円形からが安心です。
SNSシェア固定は投稿・固定ページのSNSシェアボタン設定からオンにします。
画面端固定のシェアはPCのみ表示になることがあるので注意が必要です。
追従要素は増やしすぎず、まず1つずつ試すと失敗しにくいです。

追従ボタンは、読者さんへの小さな気づかいとして効いてきます。

最初から完璧にしようとしなくて大丈夫です。

まずは固定目次ボタンだけでも入れてみると、記事の読みやすさが変わって気づきやすいです。

そこから「お問い合わせも押しやすくしたいな」と思ったら、ヘッダー追従ボタンを1つ追加してみてください。

少しずつ整えていくと、あなたのサイトらしい使いやすさが育っていきます。