SWELLのボタンの作り方｜クリックされる設置のコツも解説

2026年10月20日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

記事の中に目立つボタンを置きたいのに、作り方がわからないと困っていませんか。私も最初はテキストリンクだけで案内していましたが、なかなかクリックされませんでした。ボタンに変えたところ、クリックされる回数がはっきり増えたんです。

この記事では、SWELLでボタンを作る方法を初心者向けにわかりやすく解説します。実際に記事内でボタンを活用してきた体験も交えるので、読みながら進めれば、すぐに見栄えのよいボタンを設置できます。

※これからSWELLを導入する方へ：SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。

➡️【公式】SWELLの公式サイトはこちら

デザインに悩む時間を減らして、記事作りに集中できます。

ニャフィ

記事におしゃれなボタンを置きたいのにゃ！

たいがブログ

ボタンがあると、読者も迷わず進めますよね。

ニャフィ

コードを書かないと作れないのかにゃ…？

たいがブログ

クリック操作だけで作れる手順を、5つに分けて解説しますね。

SWELLのボタンでできること

SWELLには、専用のボタンブロックが用意されています。コードを書かなくても、デザインやリンク先をクリック操作だけで設定できるのが特徴です。

筆者は以前、テキストリンクだけで商品を紹介していましたが、読者に気づいてもらえないことが多かったんです。ボタンを使うようになってからは、案内したいページへ自然に誘導できるようになりました。

デザインを選んで目立たせられる

SWELLのボタンは、立体的なものや枠線だけのものなど、複数のスタイルから選べます。記事の雰囲気に合わせて使い分ければ、読者の目に留まりやすいボタンを作れます。

リンクや広告タグを設定できる

ボタンには、通常のリンクだけでなく広告タグも設定できます。アフィリエイトの案内にもそのまま使えるので、収益化を目指すブログとも相性がいい機能です。

SWELLボタンの作り方

ボタンは、記事の編集画面からブロックを追加するだけで作れます。あらかじめ色の設定を済ませておくと、どの記事でも統一感のあるボタンに仕上がります。

筆者はAFFINGER6でもボタンを作っていましたが、設定方法を覚えるまで少し時間がかかりました。SWELLはブロックを追加して選ぶだけなので、初めてでも迷わず作れると感じています。

ボタンの色はエディター設定で統一する

「SWELL設定」のエディター設定で、ボタンの基本カラーを登録しておけます。サイトカラーに合わせた色にしておくと、記事全体のまとまりがよくなります。

ボタンの文言は行動がわかる言葉にする

「こちら」だけでは、押した先がわかりにくくなります。「公式サイトで詳細を見る」のように、クリックしたあとに何が起きるかが伝わる言葉を選びましょう。

STEP

SWELLボタンブロックを追加する

記事の編集画面で「＋」ボタンを押し、「SWELLボタン」を検索して追加します。WordPress標準のボタンと間違えないよう、名前を確認して選びましょう。

STEP

ボタンの文言を入力する

ボタンの中に表示する文言を入力します。短くて行動がイメージできる言葉にすると、読者がクリックしやすくなります。

STEP

リンク先を設定する

ボタンを選択して、リンク先のURLを設定します。筆者は一度、違うURLを貼ったまま公開してしまったことがあるので、貼り付け後に必ず確認しましょう。

STEP

スタイルと色を選ぶ

右側の設定パネルから、ボタンのスタイルや色、大きさを選びます。記事の中でいちばん押してほしいボタンは、目立つ色にしておくのがおすすめです。

STEP

プレビューで表示とリンクを確認する

プレビューでボタンの見え方を確認し、実際にクリックして正しいページに移動するかをチェックします。スマホでの表示もあわせて確認しておきましょう。

クリックされるボタンにするコツ

ボタンは置くだけで効果が出るわけではありません。どこに、どんなボタンを置くかによって、読者の反応は大きく変わります。

筆者は以前、1つの記事にボタンをたくさん並べてしまい、どれを押せばいいのか読者を迷わせてしまいました。今は押してほしいボタンを1〜2個に絞るようにしたところ、案内がすっきり伝わるようになっています。

ボタンの目的を1つに絞る

1つのボタンには、1つの行動だけを案内するのが基本です。目的の違うボタンを並べるときは、いちばん押してほしいものを目立つ色にして、ほかは控えめにしましょう。

読者が納得したタイミングで置く

ボタンは、説明を読んで「試してみたい」と感じたあとに置くと効果的です。見出しの終わりや記事の最後など、読者の気持ちが動くタイミングを意識しましょう。

ボタン設置のチェックポイント

ボタンの文言で押した先がわかる
リンク先が正しく設定されている
1つの記事でボタンを使いすぎていない
スマホでも押しやすい大きさになっている

よくある質問

ボタンがどれくらいクリックされたか確認できますか？: SWELLには、ボタンのクリックを計測できる機能が用意されています。どのボタンが押されているかを確認して、文言や配置の改善に役立てましょう。
リンク先を新しいタブで開けますか？: ボタンのリンク設定で、新しいタブで開く設定ができます。外部サイトへ案内するときは、新しいタブで開くと読者が記事に戻りやすくなります。
アフィリエイトリンクをボタンにしても大丈夫ですか？: 問題ありません。広告タグを設定できる機能もあるので便利です。ただし、記事の冒頭などにPR表記を入れておくことを忘れないようにしましょう。
1つの記事にボタンは何個まで置けますか？: 個数の決まりはありませんが、多すぎると読者が迷ってしまいます。本当に押してほしいボタンを中心に、必要な数だけ置くのがおすすめです。