![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
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】広告タグの使い方
全広告タイプの表示例
テキスト型
![](https://hrdyuic.com/wp-content/uploads/a1c89ce863b798a495023d4c3973a8da.jpg)
![](https://hrdyuic.com/wp-content/uploads/a1c89ce863b798a495023d4c3973a8da.jpg)
バナー型
![](https://hrdyuic.com/wp-content/uploads/64bfdc1cd633c735b0ac0b8b1723a536.jpg)
![](https://hrdyuic.com/wp-content/uploads/64bfdc1cd633c735b0ac0b8b1723a536.jpg)
アフィリエイト型
![](https://hrdyuic.com/wp-content/uploads/0a0e0db8b25c9f8f2f108ea5c5201dd1.jpg)
![](https://hrdyuic.com/wp-content/uploads/0a0e0db8b25c9f8f2f108ea5c5201dd1.jpg)
Amazon型
![](https://hrdyuic.com/wp-content/uploads/54e1e2f8b6f3ca3581d3bf32cfcc98bb.jpg)
![](https://hrdyuic.com/wp-content/uploads/54e1e2f8b6f3ca3581d3bf32cfcc98bb.jpg)
ランキング型
![](https://hrdyuic.com/wp-content/uploads/d19d3d9a4d96ade4530365eb8a0a106c.jpg)
![](https://hrdyuic.com/wp-content/uploads/d19d3d9a4d96ade4530365eb8a0a106c.jpg)
クリック率や表示率が計測できる
クリック率が分かることで、分析と改善が行えます。
- クリック数 / 表示回数 = クリック率
- 表示回数 / PV数 = 表示率
※「計測結果をリセットする」こともできます。
![](https://hrdyuic.com/wp-content/uploads/98f65e22c9c15b2b5c2f5947dc3df525.jpg)
![](https://hrdyuic.com/wp-content/uploads/98f65e22c9c15b2b5c2f5947dc3df525.jpg)
広告タグの追加から記事内に設置するまでの流れ
※ もしもアフィリエイトのSWELLを例に解説します。
広告タグの追加
SWELLのアフィリエイトを検索後、「広告リンクへ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/cac29f453677d29a908fedce8bfddb5c.jpg)
![](https://hrdyuic.com/wp-content/uploads/cac29f453677d29a908fedce8bfddb5c.jpg)
広告種別から、「テキスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d373ac602133520c14425b0a2f6cf63f.jpg)
![](https://hrdyuic.com/wp-content/uploads/d373ac602133520c14425b0a2f6cf63f.jpg)
テキストの広告一覧から、広告を選択後ソースをコピーします。
プレビューのテキストが表示されます。
![](https://hrdyuic.com/wp-content/uploads/cef1e6bec125278a8b98b6b0b62296ec.jpg)
![](https://hrdyuic.com/wp-content/uploads/cef1e6bec125278a8b98b6b0b62296ec.jpg)
管理画面メニューから、「広告タグ」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/a2476462d5a6a18a4066f7779cd8ac61.jpg)
![](https://hrdyuic.com/wp-content/uploads/a2476462d5a6a18a4066f7779cd8ac61.jpg)
広告タグの追加ページが表示されます。
![](https://hrdyuic.com/wp-content/uploads/ea71c74880f1ba2b457c636a2212a4f7.jpg)
![](https://hrdyuic.com/wp-content/uploads/ea71c74880f1ba2b457c636a2212a4f7.jpg)
以下の設定を行います。
- タイトル:今回は、「デモ広告タグ」にしました。
- 広告タイプ:テキスト型
- 広告ボックの枠:なし ※「あり」でも枠はつきません。
- 広告タグ:先ほどコピーしたソースをペーストします。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-wp-admin-post-php-2024-03-29-21_47_23-2.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-wp-admin-post-php-2024-03-29-21_47_23-2.jpg)
上記赤枠に従ってテキスト型はショートコードで記事内に呼び出していきます。
広告タグを記事内に呼び出す
管理画面メニューから、「広告タグ」>「広告タグ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/f07fc34ae48e7352e0a0845958f88220.jpg)
![](https://hrdyuic.com/wp-content/uploads/f07fc34ae48e7352e0a0845958f88220.jpg)
広告タグ一覧から「呼び出しコード(ショートコード)」をコピーします。
![](https://hrdyuic.com/wp-content/uploads/7585ba790d5c9119b856cf5f82eb920c.jpg)
![](https://hrdyuic.com/wp-content/uploads/7585ba790d5c9119b856cf5f82eb920c.jpg)
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/a05b2ec97b695e734ee937c2004568f1.jpg)
![](https://hrdyuic.com/wp-content/uploads/a05b2ec97b695e734ee937c2004568f1.jpg)
コピーした呼び出しコードをペーストします。
![](https://hrdyuic.com/wp-content/uploads/a7fe1bc9831fbe879ccf837b0b3f810f.jpg)
![](https://hrdyuic.com/wp-content/uploads/a7fe1bc9831fbe879ccf837b0b3f810f.jpg)
プレビューで確認するとテキストが表示されます。
![](https://hrdyuic.com/wp-content/uploads/a1c89ce863b798a495023d4c3973a8da.jpg)
![](https://hrdyuic.com/wp-content/uploads/a1c89ce863b798a495023d4c3973a8da.jpg)
広告タグの編集
挿入した広告タグにある「この広告タグを編集する」を選択します。
![](https://hrdyuic.com/wp-content/uploads/c506d91d68bbb4e15a91be741a75fedb.jpg)
![](https://hrdyuic.com/wp-content/uploads/c506d91d68bbb4e15a91be741a75fedb.jpg)
デモ広告タグの編集ページに直接移動できます。
![](https://hrdyuic.com/wp-content/uploads/0d4a9657a5d33c6e0815224f86df68e5.jpg)
![](https://hrdyuic.com/wp-content/uploads/0d4a9657a5d33c6e0815224f86df68e5.jpg)
ボタンにアフィリエイトリンクを挿入
SWELLのアフィリエイトを検索後、「広告リンクへ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/cac29f453677d29a908fedce8bfddb5c.jpg)
![](https://hrdyuic.com/wp-content/uploads/cac29f453677d29a908fedce8bfddb5c.jpg)
広告種別から、「テキスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d373ac602133520c14425b0a2f6cf63f.jpg)
![](https://hrdyuic.com/wp-content/uploads/d373ac602133520c14425b0a2f6cf63f.jpg)
ソース内の以下をボタンリンク先にコピペすることで、ボタンにアフィリエイトリンクを挿入できます。
<a href=”この部分のURLをコピペ
” rel=”nofollow”>(自由テキスト)</a>
![](https://hrdyuic.com/wp-content/uploads/3e35981b3401a58b68fca8e3d1d176a5.jpg)
![](https://hrdyuic.com/wp-content/uploads/3e35981b3401a58b68fca8e3d1d176a5.jpg)
ボタンリンク先にURLをコピペしました。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-wp-admin-post-php-2024-04-05-18_34_09.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-wp-admin-post-php-2024-04-05-18_34_09.jpg)
【SWELL】広告タグの使い方【ウィジェット設置時のレイアウトをカスタマイズ】
広告タグが挿入できる場所
- 記事内 ※ 既に解説済み
- 目次広告
- ウィジェット
目次広告
管理画面メニューから、「SWELL設定」>「SWELL設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/57eeb58fbdbf932670ed36cfdf9ae779.jpg)
![](https://hrdyuic.com/wp-content/uploads/57eeb58fbdbf932670ed36cfdf9ae779.jpg)
SWELL設定から「広告コード」を選択後、呼び出しコードをコピペします。
![](https://hrdyuic.com/wp-content/uploads/b24e7205c717737385ebeb31f297b551.jpg)
![](https://hrdyuic.com/wp-content/uploads/b24e7205c717737385ebeb31f297b551.jpg)
目次上部に「目次広告」が表示されます。
![](https://hrdyuic.com/wp-content/uploads/7cb1b9f7272885d78f9a07db91c3f4c6.jpg)
![](https://hrdyuic.com/wp-content/uploads/7cb1b9f7272885d78f9a07db91c3f4c6.jpg)
ウィジェット
管理画面メニューから、「外観」>「ウィジェット」を選択します。
![](https://hrdyuic.com/wp-content/uploads/076c629d8de6bd7ff5f96325c8a6fff7.jpg)
![](https://hrdyuic.com/wp-content/uploads/076c629d8de6bd7ff5f96325c8a6fff7.jpg)
ウィジェットから、「カスタムHTML」を「共通サイドバー」にドラッグ&ドロップします。
![](https://hrdyuic.com/wp-content/uploads/f170c18b836c742764133f8958d3d588.jpg)
![](https://hrdyuic.com/wp-content/uploads/f170c18b836c742764133f8958d3d588.jpg)
カスタムHTMLに呼び出しコードをコピペします。
![](https://hrdyuic.com/wp-content/uploads/1b972c080e04d923c1947d1a74a83f52.jpg)
![](https://hrdyuic.com/wp-content/uploads/1b972c080e04d923c1947d1a74a83f52.jpg)
共通サイドバーに広告が表示されます。
![](https://hrdyuic.com/wp-content/uploads/01678a6f26c02028aa08e13b2c92701c.jpg)
![](https://hrdyuic.com/wp-content/uploads/01678a6f26c02028aa08e13b2c92701c.jpg)
僕は下記コードを追加CSSに書いてレイアウトをカスタマイズしています。
.textwidget.custom-html-widget {
.p-adBox__body {
display: block;
}
.p-adBox__img {
margin-right: 0;
margin-bottom: 1.25em;
}
[data-ad=normal].p-adBox__img {
margin-bottom: 0!important;
}
.p-adBox__btns {
display: block;
}
.p-adBox__btn:last-child {
margin-top: 10px;
}
}
追加CSSの場所を見る
管理画面メニューから、「外観」>「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d411d823e590d6909ccaf82514f02ad7-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/d411d823e590d6909ccaf82514f02ad7-1.jpg)
サイドバーから、「追加CSS」を選択します。
![](https://hrdyuic.com/wp-content/uploads/a6f14edadd7a2fee69e6180b18e25e1d.jpg)
![](https://hrdyuic.com/wp-content/uploads/a6f14edadd7a2fee69e6180b18e25e1d.jpg)
下記、赤枠内にコードを記述(コピペ)します。
![](https://hrdyuic.com/wp-content/uploads/0c77486bd4683741a3f7d8be18dd3a43.jpg)
![](https://hrdyuic.com/wp-content/uploads/0c77486bd4683741a3f7d8be18dd3a43.jpg)
アフィリエイト型のレイアウトが整いました。 ※ 上記コードは、バナー型やAmazon型、ランキング型にも対応しています。
![](https://hrdyuic.com/wp-content/uploads/30e9c20e07e400a020460730548982a3.jpg)
![](https://hrdyuic.com/wp-content/uploads/30e9c20e07e400a020460730548982a3.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)
今回は以上です。