Menu
カテゴリー

【SWELL】広告タグの使い方【レイアウトのカスタマイズも紹介】

悩む人

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専用機能の記事をまとめていますので、良ければご覧ください。

今回は以上です。

※ PS:本記事で「悩みが解決した」「参考になった」方は、是非 (Twitter)でシェアをお願いします!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容