SWELLで追従ボタンを設置する方法【ヘッダー・目次・SNSシェア】

記事内にプロモーションを含む場合があります
SWELLで追従ボタンを設置する方法【ヘッダー・目次・SNSシェア】
初心者さん

SWELLの追従ボタンの設置はどうやるの?

このような疑問にお答えします。

SWELLの追従ボタンの設置はすぐできます。

手順どおりに進めれば初心者さんでも迷いません。

はじめにSWELLの追従ボタン3パターンを紹介し、次に設置方法を解説。

この記事を読めば、追従ボタンをサクッと設置できますよ!

SWELLの購入方法はこちら

プロフィールカード

\国内人気No.1/

目次

SWELLの追従ボタン3パターン

今回紹介するSWELLの追従ボタンパターンは3つ。

  • ヘッダーボタン
  • 目次ボタン
  • SNSシェアボタン

ヘッダーボタン

SWELLのヘッダーに追従ボタンを設置7

画面最上部に設置されているボタン。

複数個並べて設置することも可能です。

目次ボタン

SWELLで目次ボタンを追従させる方法

個別記事をスクロールすると、右下に表示されるボタン。

「四角形」「円形」の2パターンから選べます。

SNSシェアボタン

SWELLでSNSシェアボタンを追従させる方法5

個別記事で画面左端に表示されるボタン。

表示するSNSの種類、ボタンデザインをカスタマイズできます。

追従バナーはこちら

SWELLのヘッダーに追従ボタンを設置する方法

SWELLのヘッダー追従型ボタン

SWELLのヘッダーに追従ボタンを設置する手順です。

  1. ブログパーツでボタン作成
  2. ヘッダーにボタンを設置
  3. ヘッダーの追従設定

ブログパーツでボタン作成

まずヘッダーで追従させるボタンを作ります。

STEP
ダッシュボード > ブログパーツ > 新規追加
SWELLのヘッダーに追従ボタンの作成1
STEP
任意のタイトルを入力
SWELLのヘッダーに追従ボタンの作成2
STEP
投稿ブロック > SWELLボタン
SWELLのヘッダーに追従ボタンの作成3
STEP
SWELLボタンにテキスト・リンク先を追加
SWELLのヘッダーに追従ボタンの作成4
STEP
公開
SWELLのヘッダーに追従ボタンの作成5

公開すると「ブログパーツ」に登録されます。

ヘッダーにボタンを設置

作成したSWELLボタンをヘッダーに設置します。

STEP
ブログパーツ > 「ヘッダー追従ボタン」の呼び出しコードをコピー
SWELLのヘッダーに追従ボタンを設置1
STEP
カスタマイズ
SWELLのヘッダーに追従ボタンを設置2
STEP
ウィジェット
SWELLのヘッダーに追従ボタンを設置3
STEP
ヘッダー内部
SWELLのヘッダーに追従ボタンを設置4
STEP
ウィジェットを追加 > カスタムHTML
SWELLのヘッダーに追従ボタンを設置5
STEP
内容に「呼び出しコード」を貼り付け > 公開
SWELLのヘッダーに追従ボタンを設置6

ヘッダーにSWELLボタンが設置できました。

SWELLのヘッダーに追従ボタンを設置7

スマホへの設置方法はこちら

ヘッダーの追従設定

WordPressのダッシュボードからヘッダーの追従設定をします。

STEP
カスタマイズ
SWELLのヘッダーボタン追従設定1
STEP
ヘッダー
SWELLのヘッダーボタン追従設定2
STEP
ヘッダーを追従させる(PC)にチェック
SWELLのヘッダーボタン追従設定3

最初からチェックが入っていると思いますが、入ってなければチェックを入れてください。

エイタ

ヘッダーの追従設定は以上

SWELLで目次ボタンを追従させる方法

SWELLで目次ボタンを追従させる方法

記事内で目次ボタンを追従させる方法を解説します。

STEP
カスタマイズ
SWELLで目次ボタンを追従させる方法1
STEP
サイト全体設定
SWELLで目次ボタンを追従させる方法2
STEP
下部固定ボタン・メニュー
SWELLで目次ボタンを追従させる方法3
STEP
目次ボタンの表示設定 > 表示する(四角形・円形)
SWELLで目次ボタンを追従させる方法4

「目次ボタン下のテキスト」では任意の文字を入力できます。

SWELLで目次ボタンを追従させる方法5
STEP
公開
SWELLで目次ボタンを追従させる方法7

PC・スマホ画面の右下に追従「目次ボタン」が設置できました。

SWELLで目次ボタンを追従させる方法6

SWELLでSNSシェアボタンを追従させる方法

SWELLでSNSシェアボタンを追従させる方法5

追従するSNSシェアボタンを、画面端に固定表示する方法です。

STEP
カスタマイズ
SWELLでSNSシェアボタンを追従させる方法1
STEP
投稿・固定ページ
SWELLでSNSシェアボタンを追従させる方法2
STEP
SNSシェアボタン
SWELLでSNSシェアボタンを追従させる方法3
STEP
表示設定 > 「画面端に固定表示する」にチェック
SWELLでSNSシェアボタンを追従させる方法4
STEP
ボタンデザインの設定
SWELLでSNSシェアボタンを追従させる方法3

「表示するボタンの種類」「シェアボタンのデザイン」を選択。

プレビューを見ながらできます。

STEP
公開
SWELLでSNSシェアボタンを追従させる方法4

PC画面端にSNSシェアボタンが固定表示されました。

SWELLでSNSシェアボタンを追従させる方法6

まとめ|SWELLで追従ボタンを設置する方法

今回は、SWELLで3パターンの追従ボタン設置方法をまとめました。

追従ボタンを活用すれば、読者の使いやすさが向上しコンバージョン率の上昇につながります。

効果を検証したい、という方は同じ期間で一つずつ試しデータをとるといいですよ。

正解はないので試行錯誤あるのみ!

≫ いますぐSWELLを購入する

あわせて読みたい

SWELLで追従ボタンを設置する方法【ヘッダー・目次・SNSシェア】

この記事が気に入ったら
フォローしてね!

よかったらシェア!
  • URLをコピーしました!
目次