SWELLで追従バナーを作る方法｜投稿ページ専用にブログパーツとCSSでおしゃれにカスタマイズ

当ページのリンクには広告が含まれます。

2025年9月15日

SWELLでおしゃれにカスタマイズ！投稿ページだけに表示される右側追従バナーを、ブログパーツ＋CSSで簡単に作る方法を紹介します。

Question

SWELLで追従バナー？

WordPressテーマ「SWELL」では、誰でも直感的におしゃれなブログを作れますが…

「もうちょっと収益化したい」「目立つボタンを置きたい」なんて思うことはありませんか？

そこでおすすめなのが、投稿ページ専用の追従バナーです。

この記事では、投稿ページだけに表示される右側の追従テキストバナーを作る方法をご紹介します。

左側にあるSNSシェアボタンと対になる形で配置することで、デザイン性と実用性を両立できます。

初心者さんでもすぐできるように、ブログパーツの作り方からCSSの貼り付けまでをステップごとにやさしく解説します。

こんな方におすすめ！

SWELLを使っていて、ちょっとおしゃれなカスタマイズをしてみたい
投稿ページだけに表示できるバナーを作りたい
アフィリエイトや収益化のために、クリックされやすい仕組みを導入したい
コードが苦手だけど、コピペで簡単に設定したい初心者さん

この記事でわかること！

SWELLで「投稿ページ専用の追従バナー」を設置する方法
ブログパーツを作成して、バナーを表示させる手順
CSSを使って、右側に固定表示させる方法
初心者でもおしゃれに見せるデザインの工夫ポイント

それではご覧ください。

目次 "Contents"

投稿ページの追従バナーとは？

この記事で紹介する「追従バナー」は、下記の画像のように画面右側に表示される縦型のテキスト（ボタン）バナーです。

「追従バナー」とは、ユーザーがページをスクロールしても常に画面の決まった場所に表示されるバナーのことです。

どこにいても目に入りやすいため、クリックされやすく、読者のアクションやエンゲージメントを高めるのに役立ちます。

SWELLで追従バナーを設置するメリット

追従バナーは、常に画面に表示されるため読者の目にとまりやすく、クリック率や収益につながりやすいのが特徴です。ここでは、SWELLで設置することで得られる主なメリットを紹介します。

クリック率がアップする

記事を読み進めている最中でも、画面に常に表示される追従バナーはユーザーの目に自然と入ります。その結果、ボタンのクリック率が向上しやすくなります。

デザイン性が高まる

左側にSNSシェアボタン、右側に追従バナーを配置すると、バランスの良いデザインに仕上がります。シンプルながらも見やすく、おしゃれな印象を与えられます。

投稿ページ専用にできる

全ページに表示するのではなく、投稿記事だけに絞って設置できるため、読者に合わせたリンクやボタンを表示できます。

追従バナー用のブログパーツを作成

まずは追従バナーとして表示させるブログパーツを作成します。

手順は次の通りです。

ブログパーツを準備（タイトルや用途など）
SWELLボタンを挿入して、プロモーション等のリンク設定
ブログパーツを公開
ブログパーツに『呼び出しコード』をコピー（ウィジェット貼り付け用）

それでは見ていきましょう。

STEP

ブログパーツを準備（タイトルや用途など）

追従バナー用にブログパーツを新規に追加します。

Menu『WordPress管理＞ダッシュボード＞ブログパーツ＞投稿を追加』をクリックします。

エディター画面が開いたら、任意の「タイトル」と「用途」を入力します。基本的な操作は通常の投稿と同じ手順です。

サンプルでは『SWELLボタン』ブロックを使い、スタイルとリンクを設定します。。

STEP

SWELLボタンを挿入して、プロモーション等のリンク設定

エディター画面が表示されたら、左上のブロック挿入ツールから『SWELLボタン』ブロックを挿入します。その後、右側の設定メニューでボタンのスタイルやリンク先を設定します。

ポイント

タイトル
- 覚えやすい名前をつけましょう。
SWELLボタンのアレンジ
- 投稿ページの右側に縦表示されるイメージで作成しましょう。
高度な設定：追加 CSS クラス
- クラス名：follow-banner（サンプルの場合）

SWELL ボタンブロックの使い方は、以下の記事で詳しくご紹介しています。あわせてご覧ください。

osaboo's SWELL

SWELLボタンブロックの使い方を徹底解説｜広告タグ設置＆クリック計測の設定方法 SWELLボタンブロックの使い方を初心者向けに解説。シンプルからカラフルまで自由にデザインでき、広告タグの設置やクリック計測も簡単。ブログ収益化に役立つ便利機能をわかりやすく紹介します。

STEP

ブログパーツを公開

ブログパーツが完成したら、『公開』をクリックします。

STEP

ブログパーツに『呼び出しコード』をコピー（ウィジェット貼り付け用）

公開したブログパーツの『呼び出しコード』をコピーします。（あとで、ウィジェットに貼り付けます）

2237-6｜WordPress管理｜ダッシュボード｜ブログパーツ｜呼び出しコード

SWELLブログパーツの使い方は、以下の記事で詳しくご紹介しています。あわせてご覧ください。

osaboo's SWELL

SWELLブログパーツの使い方を徹底解説｜簡単呼び出しで作業効率アップ！【問題提起】SWELLの「ｘｘｘの使い方」を初心者さん向けに解説します。簡単な記事の紹介こんな記事です。疑問・悩み疑問や悩みを問いかけなどで書く。 SWELLブロック…

SWELLブログパーツの使い方を徹底解説｜簡単呼び出しで作業効率アップ！
→参考記事作成中

投稿ページ専用にウィジェットで追従バナーを追加

ブログパーツが完成したら、ウィジェット機能を使って投稿ページだけに表示させる設定をします。

手順は次の通りです。

ウィジェットを開く
利用できるウィジェットから『ブロック』を選択して『記事下部』へ追加
追従バナー（ブログパーツ）の『呼び出しコード』をブロックに貼り付け

STEP

ウィジェットを開く

WordPress管理画面から、ウィジェットを開きます。

Menu『WordPress管理＞ダッシュボード＞外観＞ウィジェット』をクリックします。

STEP

利用できるウィジェットから『ブロック』を選択して『記事下部』へ追加

利用できるウィジェットから『ブロック』を選択して『記事下部』へ追加します。

STEP

追従バナー（ブログパーツ）の『呼び出しコード』をブロックに貼り付け

前章で、作成した追従バナー（ブログパーツ）の『呼び出しコード』をコピーします。

『ブロックHTML：』の枠欄に追従バナー（ブログパーツ）の『呼び出しコード』をペーストします。

全ページに出す必要はなく、記事専用に設定することで読者への誘導が効果的になります。

CSSで追従バナーの表示を調整

CSSで表示の位置やスタイルを調整します。

CSSコード（コピペOK）

以下のコードをカスタマイザーの「追加CSS」に追加します。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞追加CSS』にコピペします。

CSSクラス名を変更した場合は合わせてください。

.follow-banner {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}

.follow-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  background-color: var(--color_main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
}

.follow-banner a:hover {
  opacity: 0.7;
}

.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

/* スマホでは非表示に */
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}