![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SWELLブロックのSWELLボタンの使い方を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 執筆画面のサイドバー内にあるSWELL専用のボタンブロックの使い方
- SWELL専用のボタンブロック以外の使い方
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
SWELLボタンの使い方【広告タグや呼び出しコードの入力が可能】
執筆画面のサイドバー(下記画像の赤枠)内にある、以下のSWELL専用のボタンブロックについて解説します。
- スタイル
- ボタンサイズ設定
- カラー設定
- ボタンの計測設定
- アイコン設定
- 広告タグ設定
![](https://hrdyuic.com/wp-content/uploads/31d10b2ff1cd2599ec86636f6de35bd2.jpg)
![](https://hrdyuic.com/wp-content/uploads/31d10b2ff1cd2599ec86636f6de35bd2.jpg)
スタイル
※ カーソルを乗せるとボタンが変化します。
ノーマル
立体
キラッと
アウトライン
MOREボタン
![](https://hrdyuic.com/wp-content/uploads/5b68813cf41699b63f3c1e323d9ec557.jpg)
![](https://hrdyuic.com/wp-content/uploads/5b68813cf41699b63f3c1e323d9ec557.jpg)
ボタンサイズ設定
小
標準
大
カスタム
フォントサイズ ※ 1.5em
![](https://hrdyuic.com/wp-content/uploads/0522a2c91af6e0af9668a4ec5ba8d3ff.jpg)
![](https://hrdyuic.com/wp-content/uploads/0522a2c91af6e0af9668a4ec5ba8d3ff.jpg)
カラー設定
デフォルトでは、以下の3カラーが用意されています。
![](https://hrdyuic.com/wp-content/uploads/4997187dd2ffed5dd77375c110896d06.jpg)
![](https://hrdyuic.com/wp-content/uploads/4997187dd2ffed5dd77375c110896d06.jpg)
上記「SWELL設定(赤枠)」から、直接エディター設定の「ボタン」に移動してカラー設定が行えます。
![](https://hrdyuic.com/wp-content/uploads/23e3f1bfcab154c04b667c4788ab3012.jpg)
![](https://hrdyuic.com/wp-content/uploads/23e3f1bfcab154c04b667c4788ab3012.jpg)
もしくは
管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/db7e478789e42425a4eb5d6a3b20c665-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/db7e478789e42425a4eb5d6a3b20c665-1.jpg)
エディター設定から、「ボタン」を選択しても同じ画面に進めます。
![](https://hrdyuic.com/wp-content/uploads/e3f0d7c691ee045837d7eda715128781.jpg)
![](https://hrdyuic.com/wp-content/uploads/e3f0d7c691ee045837d7eda715128781.jpg)
カラー設定
を入れておくと「ノーマルボタン」と「キラッとボタン」のみグラデーションが有効になります。
![](https://hrdyuic.com/wp-content/uploads/3e8026482913e6358f6f749df078d219-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/3e8026482913e6358f6f749df078d219-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a15cfa0d8953a3b82e394dc46c300409-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a15cfa0d8953a3b82e394dc46c300409-1.jpg)
ボタンの丸み
![](https://hrdyuic.com/wp-content/uploads/3e8026482913e6358f6f749df078d219.jpg)
![](https://hrdyuic.com/wp-content/uploads/3e8026482913e6358f6f749df078d219.jpg)
丸みなし
![](https://hrdyuic.com/wp-content/uploads/d78bef944f95a1ebedeaf538d653b89a.jpg)
![](https://hrdyuic.com/wp-content/uploads/d78bef944f95a1ebedeaf538d653b89a.jpg)
少し丸める
![](https://hrdyuic.com/wp-content/uploads/9ee190512d649a7986e55a2434136a24.jpg)
![](https://hrdyuic.com/wp-content/uploads/9ee190512d649a7986e55a2434136a24.jpg)
丸める
![](https://hrdyuic.com/wp-content/uploads/a15cfa0d8953a3b82e394dc46c300409.jpg)
![](https://hrdyuic.com/wp-content/uploads/a15cfa0d8953a3b82e394dc46c300409.jpg)
ボタンの計測設定
有効にすると以下を計測できます。
- ボタン設置後のPV数
- ボタンの表示回数
- ボタンのクリック数
- このボタンまで読まれた割合
- 表示回数に対するクリック率
![](https://hrdyuic.com/wp-content/uploads/3b760e6005b2aa00314ed1f95dc4b63d.jpg)
![](https://hrdyuic.com/wp-content/uploads/3b760e6005b2aa00314ed1f95dc4b63d.jpg)
アイコン設定
アイコンの位置:左
アイコンの位置:右
アイコンサイズ:1.5em
![](https://hrdyuic.com/wp-content/uploads/a405c11c65f13af4802bba1587f1107d.jpg)
![](https://hrdyuic.com/wp-content/uploads/a405c11c65f13af4802bba1587f1107d.jpg)
広告タグ設定
テキスト型のアフィリエイト用広告タグをコピペしてSWELLボタンとして使用できます。
コピペすると自動的にボタンのテキストも入力されます。
![](https://hrdyuic.com/wp-content/uploads/a75a002bad157f3d0cac19d1dd32e981-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a75a002bad157f3d0cac19d1dd32e981-1.jpg)
管理画面メニューの広告タグで一元管理したい場合は、呼び出しコードをコピペすることもできます。
執筆画面では呼び出しコードが表示されますが、プレビューするとボタンになっています。
![](https://hrdyuic.com/wp-content/uploads/5de26432306ccc655e6c9af90c639a1c-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/5de26432306ccc655e6c9af90c639a1c-1.jpg)
プレビュー
※ ともにボタンとして表示されていると思います。
広告タグをコピペ
呼び出しコードをコピペ
![](https://hrdyuic.com/wp-content/uploads/london-3794348_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/london-3794348_1920.jpg)
SWELLボタンの使い方【SWELL専用のボタンブロック以外を解説】
ここからは、以下を解説します。
- SWELLボタンの挿入
- リンク
- 配置
- マイクロコピー
SWELLボタンの挿入
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/8f721a231a43981a05a10229dcdc75c1.jpg)
![](https://hrdyuic.com/wp-content/uploads/8f721a231a43981a05a10229dcdc75c1.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「SWELLボタン」を選択後、SWELLボタンが挿入されます。
![](https://hrdyuic.com/wp-content/uploads/09587a7f2a2a0313a8952fd292651e90.jpg)
![](https://hrdyuic.com/wp-content/uploads/09587a7f2a2a0313a8952fd292651e90.jpg)
リンク
テキストを入力します。
![](https://hrdyuic.com/wp-content/uploads/95c7e88ea69e22ad85d2c45b4883789e.jpg)
![](https://hrdyuic.com/wp-content/uploads/95c7e88ea69e22ad85d2c45b4883789e.jpg)
「
リンク先:未設定」をクリック後、左斜め上に入力欄が表示されます。![](https://hrdyuic.com/wp-content/uploads/9ad18f9deb3ac344bf542d651a1e2a9b.jpg)
![](https://hrdyuic.com/wp-content/uploads/9ad18f9deb3ac344bf542d651a1e2a9b.jpg)
URLを入力後、
(Enterキー)をクリックします。![](https://hrdyuic.com/wp-content/uploads/4010847716396d922eabac3fe0714f0f.jpg)
![](https://hrdyuic.com/wp-content/uploads/4010847716396d922eabac3fe0714f0f.jpg)
別タブで開くようにしたい場合は、
(リンクを編集)を選択します。![](https://hrdyuic.com/wp-content/uploads/8b616a25e86d717170fb9977359825b6.jpg)
![](https://hrdyuic.com/wp-content/uploads/8b616a25e86d717170fb9977359825b6.jpg)
高度を開き、「新しいタブで開く」に
を入れます。![](https://hrdyuic.com/wp-content/uploads/ac2f7e636217d61fa64d7632aefce1e5.jpg)
![](https://hrdyuic.com/wp-content/uploads/ac2f7e636217d61fa64d7632aefce1e5.jpg)
これで、別タブで開くSWELLボタンの完成です。
![](https://hrdyuic.com/wp-content/uploads/71bf3d4cf25a99fbe7fc797623904fa9.jpg)
![](https://hrdyuic.com/wp-content/uploads/71bf3d4cf25a99fbe7fc797623904fa9.jpg)
こちら
のSWELLボタンをクリックすると別タブで開きます。配置
SWELLボタンを選択後、
(配置)からボタンの位置を変更できます。![](https://hrdyuic.com/wp-content/uploads/51a0cf5778d19bbf50c678c13b43a647.jpg)
![](https://hrdyuic.com/wp-content/uploads/51a0cf5778d19bbf50c678c13b43a647.jpg)
なし
左寄せ
右寄せ
マイクロコピー
(ブロック挿入ツールを切り替え)から、「パターン」>「[SWELL]汎用パターン」>「マイクロコピーとアイコン付きのボタン」を選択すると、マイクロコピー付きのボタンが挿入されます。
![](https://hrdyuic.com/wp-content/uploads/fb5311bffc8c7ff449f9d27f45a47c07.jpg)
![](https://hrdyuic.com/wp-content/uploads/fb5311bffc8c7ff449f9d27f45a47c07.jpg)
\ ぼたんだよ /
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。