SWELL ボタンブロックの使い方！広告タグがそのまま使えてクリック計測もOK！

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

2024年10月22日

SWELLの「SWELLボタンブロックの使い方」を初心者さん向けに解説します。

SWELLブロック：SWELLボタン

SWELL専用のブロックエディター機能です。
SWELL専用の豊富なデザインが揃っていて、シンプルなものからカラフルなものまでボタンデザインは自由自在です。広告タグの直接入力やクリック計測等ができる優れものです。
クリック率が上がる！素敵なボタンを作りましょう！^^／

この記事でわかること！

SWELLブロック：SWELLボタンについて
SWELLボタンブロックの使い方
1. SWELLボタンブロックの挿入手順
2. SWELLボタンの設定（基本）
3. SWELLボタンの設定（応用）？ちょっと裏技探し…
エディター設定：ボタンカラーとデザインの設定
まとめ！

それではご覧ください。

目次 "Contents"

SWELLブロック：SWELLボタンについて

『ボタンブロック』のイメージはこんな感じです。

サンプルボタン

SWELLの購入はこちら

※ アイコン付きサンプルボタンです。

SWELLボタンについて…
ボタンブロックが設置できる SWELL専用のブロックエディター機能です。
便利で！おしゃれなボタンが簡単に設置できます。

ボタンブロックの特徴（できること）

広告タグを直接入力できる
ボタンにアイコンが挿入できる
シンプルからカラフルまでデザインが豊富
ボタンのクリック計測ができる

SWELLボタンブロックの使い方

この章では、SWELLボタンブロックの使い方をご紹介します。

SWELLボタンブロックの挿入手順と記事挿入後にできるカスタマイズ（表示・リンク・アイコン等）のセクションに分けてご紹介します。

SWELLボタンブロックの使い方

SWELLボタンブロックの挿入手順
SWELLボタンの設定（基本）
SWELLボタンの設定（応用）？ちょっと裏技探し…

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

SWELLボタンブロックの挿入手順

※ 作業は投稿（記事編集）画面での作業になります。

基本的なSWELLボタンブロックの挿入手順をご紹介します。

STEP

投稿（記事編集）画面を準備

Menu『WordPress管理＞ダッシュボード＞投稿＞新規投稿を追加』をクリックします。

投稿画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）

SWELLボタンブロックを挿入する箇所をクリックします。

STEP

ブロック挿入ツールを切り替え

『+』をクリックします。

STEP

ブロックタブメニューから『SWELLボタン』を選択

ブロック挿入ツールが『ｘ』切り替わり以下の画面が表示されます。

SWELLブロックから『SWELLボタン』を選択して投稿画面に設置します。

『SWELLボタン』をクリックします。

STEP

SWELLボタンブロック挿入完了

投稿（記事編集）画面に『SWELLボタンブロック』が表示されます。

STEP

SWELLボタンのタイトル『テキストを入力』

ボタン領域をクリックして、ボタンのタイトルとなるテキストを入力します。

STEP

SWELLボタンのURL『リンク先』を入力

リンク先領域をクリックして、ドロップダウンメニューを呼び出します。

ドロップダウンメニューに URLを入力とタブ表示の設定をします。

STEP

ブロックタブメニューで詳細設定をする

右側に表示されるブロックタブメニューでボタンの詳細設定をします。

ブロックタブメニューの詳細設定は、次の章で詳しくご紹介します。

SWELLボタンの設定（基本）

この章では、投稿画面右側に表示される「ブロックタブメニュー」の概略をご紹介します。（基本）

設定メニューの場所は、投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

ブロックタブメニュー詳細

スタイル

ノーマル

立体

キラッと

アウトライン

MOREボタン

ボタンサイス設定

『小 / 標準 / 大 / カスタム』から選択

フォントサイズ

　
　※ ドロップダウンメニューより単位が選択できます。

カラー設定

SWELL設定で設定した色を選択

ボタンの計測設定

クリック率を計測する『ON/OFF』

アイコン設定

アイコン位置『左/右』

アイコン選択『検索』

アイコンサイズ『任意』

　
　※ ドロップダウンメニューより単位が選択できます。

広告タグ設定

計測用IMGタグの画像URL 計測用に使用する（実際は表示されない）ASP広告タグ内のimgタグを入力。

広告タグを直接入力アフィリエイト広告のタグをそのままペースト

注意補足

広告タグを直接入力した場合は、アイコンの設定はできません。
広告タグにショートコードを入力してアイコン表示は可能です。

デバイス制御

表示するデバイス『SP/PC』選択/切替『クリア』

ブロック下の余白量

　
　 ※ ドロップダウンメニューより選択できます。

高度な設定

HTML アンカー；割愛します。

追加 CSS クラス：割愛します。

SWELLボタンの設定（応用）？ちょっと裏技探し…

この章では、SWELLボタンをもっと便利に使うために！裏技じゃないですけど…あれこれを少しご紹介します。

広告タグ設定：広告タグを直接入力時にアイコンを挿入する

ASP広告のテキスト部分の改変か許されているか？！規約を必ず確認しておきましょう。
「ペナルティーが発生する場合があります」

広告タグのテキスト部分に「アイコンのショートコード」を追加します。

SWELL ボタンブロックタブメニュー：広告タグを直接入力｜アイコン入力サンプル

広告タグを直接入力時のエディター画面とプレビュー画面は以下のようになります。
エディター画面ではショートコードが表示されますが、プレビュー画面ではアイコンが表示されます。

※ SWELL公式マニュアルはこちらからご覧いただけます。「SWELLで使えるアイコン一覧が確認できます」

SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL

広告タグ設定：広告タグ「呼び出しコード」を使用する

広告タグブロックで ASPの広告を登録している場合「呼び出しコード」を『広告タグを直接入力』の枠欄にペーストすることでボタンリンクができます。

osaboo.com

SWELL 広告タグ管理機能と広告タグブロックの使い方！広告の張り替えが超簡単！ SWELLのエディター機能広告タグ管理機能と広告タグブロックの使い方を初心者さん向けに解説。広告タグブロックの登録方法と5種類から選べる広告タイプを全てサンプル付きで解説。投稿（記事）に広告タグを挿入する手順・使い方を広告タイプ別にご紹介。

広告タグのタイプごとにSWELLボタンブロックを作ってみた結果（参考）

結論から言うと…テキスト型以外は使えません。他はボタンとして表示されません。
広告タグにボタンの設定が入り込んでしまい広告としてもボタンとしてもNGです。
テキスト型も含め、この方法でボタンを作成した場合は必ず！プレビューで確認するようにしましょう。

スクロールできます

広告タグのタイプ	表示される不具合
テキストバナーアフィリエイト Amazon ランキング	良好（テキストがボタンに表示）広告として表示される広告として表示される（画像の背景にボタン背景の色が入り込む）広告として表示される（画像の背景にボタン背景の色が入り込む）広告として表示される（画像の背景にボタン背景の色が入り込む）