悩む人SWELLブロックの広告タグの使い方について教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 全広告タイプの表示例が見れる
- 広告タグの追加から記事内に設置するまでの流れ
- ボタンにアフィリエイトリンクを挿入する方法
- 広告を目次上部やウィジェットに設置する方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】広告タグの使い方
全広告タイプの表示例
テキスト型
バナー型
アフィリエイト型
Amazon型
ランキング型
クリック率や表示率が計測できる
クリック率が分かることで、分析と改善が行えます。
- クリック数 / 表示回数 ＝ クリック率
- 表示回数 / PV数 ＝ 表示率
※「計測結果をリセットする」こともできます。
広告タグの追加から記事内に設置するまでの流れ
※ もしもアフィリエイトのSWELLを例に解説します。
広告タグの追加
SWELLのアフィリエイトを検索後、「広告リンクへ」を選択します。
広告種別から、「テキスト」を選択します。
テキストの広告一覧から、広告を選択後ソースをコピーします。
プレビューのテキストが表示されます。
管理画面メニューから、「広告タグ」＞「新規投稿を追加」を選択します。
広告タグの追加ページが表示されます。
以下の設定を行います。
- タイトル：今回は、「デモ広告タグ」にしました。
- 広告タイプ：テキスト型
- 広告ボックの枠：なし ※「あり」でも枠はつきません。
- 広告タグ：先ほどコピーしたソースをペーストします。
上記赤枠に従ってテキスト型はショートコードで記事内に呼び出していきます。
広告タグを記事内に呼び出す
管理画面メニューから、「広告タグ」＞「広告タグ」を選択します。
広告タグ一覧から「呼び出しコード（ショートコード）」をコピーします。
管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。
コピーした呼び出しコードをペーストします。
プレビューで確認するとテキストが表示されます。
広告タグの編集
挿入した広告タグにある「この広告タグを編集する」を選択します。
デモ広告タグの編集ページに直接移動できます。
ボタンにアフィリエイトリンクを挿入
SWELLのアフィリエイトを検索後、「広告リンクへ」を選択します。
広告種別から、「テキスト」を選択します。
ソース内の以下をボタンリンク先にコピペすることで、ボタンにアフィリエイトリンクを挿入できます。
<a href=”この部分のURLをコピペ” rel=”nofollow”>(自由テキスト)</a>
ボタンリンク先にURLをコピペしました。
【SWELL】広告タグの使い方【ウィジェット設置時のレイアウトをカスタマイズ】
広告タグが挿入できる場所
- 記事内 ※ 既に解説済み
- 目次広告
- ウィジェット
目次広告
管理画面メニューから、「SWELL設定」＞「SWELL設定」を選択します。
SWELL設定から「広告コード」を選択後、呼び出しコードをコピペします。
目次上部に「目次広告」が表示されます。
ウィジェット
管理画面メニューから、「外観」＞「ウィジェット」を選択します。
ウィジェットから、「カスタムHTML」を「共通サイドバー」にドラッグ&ドロップします。
カスタムHTMLに呼び出しコードをコピペします。
共通サイドバーに広告が表示されます。
僕は下記コードを追加CSSに書いてレイアウトをカスタマイズしています。
.textwidget.custom-html-widget .p-adBox__body,
.textwidget.custom-html-widget .p-adBox__btns {
display: block;
}
.textwidget.custom-html-widget .p-adBox__img {
margin-right: 0;
margin-bottom: 1.25em;
}
.textwidget.custom-html-widget [data-ad=normal].p-adBox__img {
margin-bottom: 0 !important;
}
.textwidget.custom-html-widget .p-adBox__btn:last-child {
margin-top: 10px;
}
追加CSSの場所を見る
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
サイドバーから、「追加CSS」を選択します。
下記、赤枠内にコードを記述（コピペ）します。
アフィリエイト型のレイアウトが整いました。 ※ 上記コードは、バナー型やAmazon型、ランキング型にも対応しています。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。