SWELLの便利機能の一つである「広告タグ」
いざ使ってみようと思うと、ブロックエディターが使えなくて思った通りに作れないことはありませんか？
くろだ実際に僕も最初はかなり戸惑いました。
この記事では、広告タグ機能で広告タグを作る方法について解説しています。
- SWELLの広告タグを使いたい
- SWELLを買おうか迷っている
といった方はぜひ参考にしてみてください。
広告タグとはSWELLで使える機能
広告をいつでも呼び出せる
広告タグはSWELL
で使える機能の一つです。
広告タグは結構便利でかなり時短に繋がります。
- 作成した広告タグは何度でも使い回せる
- 修正は広告タグだけでOK
- ランキングや価格を表示させることもできる
広告タグ機能を使うことで、いつでも好きなタイミングで自作の広告を呼び出すことができるようになります。
そのためには事前に広告を作成しておく必要があります。
広告タグは以下5種類
- テキスト型
- バナー型
- アフィリエイト型
- Amazon型
- ランキング型
テキスト型
テキスト型はその名の通りテキストのみの広告。
バナーのような画像や価格は表示されません。
記事内でリンク付きのテキストをショートコードで呼び出せるようになります。
よく使うリンクは広告タグに登録しておくことで、ASPへリンクを取りに行く必要無くなり時短に繋がります。
ただ、他の広告タグと違いショートコードを直接入力する必要があるのでちょっと面倒。
コードは※ IDを指定してください。のような感じなので覚えるのは難しいです。
くろだテキスト型を使いたい場合はよく使うショートコードを辞書登録しておきましょう。
バナー型
バナー型は広告のバナーをそのまま登録しておくことができます。
広告タグ機能を使うことで、あのバナーを使いたい！と思ったときにASPにアクセスすること無く呼び出せるようになるので時短に繋がります。
バナー広告をよく使う場合は広告タグに登録してから呼び出しましょう。
こんな広告をいつでも呼び出せるようになる
アフィリエイト型
アフィリエイト型は
- バナー画像
- タイトル
- 評価
- 商品説明
- ボタン
を一つにまとめられる広告タグです。
こんな感じ
多くの情報を分かりやすくまとめて表示できるのでかなり使いやすい広告タグです。
紹介することが多いものは広告タグで準備しておきましょう。
Amazon型
Amazon型はアフィリエイト型に近く、
- 商品画像
- タイトル
- 評価
- ボタン
が設定できます。
大きな違いは説明文の有無
説明文を入れる必要がないのでかなりシンプルな見た目になります。
説明文は別にいらないな～と思うときに利用しましょう。
ランキング型
ランキング型はアフィリエイト型に近く、ランキングを設定できます。
ランキングは1位～3位まで。
順位なしも設定できます。
またアフィリエイト型と違いタイトルとボタンのサイズがちょっと大きめで目立ちます。
タイトルを目立たせたい時はアフィリエイト型を使うよりもランキング型を順位無しで使ったほうが良いでしょう。
広告タグの作り方
記事を作りやすいSWELLですが、広告タグを作るのはちょっと難しいです。
実際に広告タグを作ろうと思うと、
- 思った通りの見た目にならない
- 太字やマーカーが使えない
- アップロードした画像が使えない
などブロックエディターでは簡単にできたことが広告タグではできなくなっています。
ここでは広告タグの作り方について解説しています。
- 広告タグの作り方がよく分からない
- 装飾したい
- 好きな画像を入れたい
と思っている方は参考にしてみてください。
広告タグは管理画面から作成
広告タグはSWELLの管理画面から作成できます。
新規追加を選ぶと広告タグの作成画面に移動します。
作成画面が開いたら最初に「広告タイプ」を選びましょう。
広告タイプは以下の5種類
- テキスト型
- バナー型
- アフィリエイト型
- Amazon型
- ランキング型
選んだ広告タイプによって入力できる内容が変わってきます。
設定項目が最も多いランキング型の場合
順位部分を無しにすることで、アフィリエイト型として使うこともできて便利です。
バナー広告は広告タグをそのまま入力するだけでOK
くろだ広告タグでバナーの画像をそのまま使えれば便利ですよね。
SWELLの便利なところとして、バナー広告をそのまま使えるというものがあります。
広告タグの入力欄にバナー広告のコードをそのまま入れるだけで使えるようになります。
プレビュー画面では画像が表示されませんが、実際に使う時はしっかり表示されるので作成できたら確認しましょう。
広告タグはHTMLで書く必要あり
広告タグはHTMLを使って作成する必要があります。
SWELLで記事を作成する時はブロックエディターを使えたのに広告タグでは使えません。
HTMLタグを入れずに文章を書いた場合、広告タグの編集画面内で改行していても実際に広告タグを呼び出すと改行されずに表示されます。
当然、マーカーや太字などブロックエディターでは簡単に使えていた機能も使えなくなっています。
広告タグで説明文を装飾したいと思った時はHTMLタグを使う必要があります。
広告タグの編集画面ではHTMLタグを入れたとしてもプレビューに反映されません。
HTMLタグが間違っていなければ、投稿画面で使った時に装飾されるので焦らず作成しましょう。
改行<br>
改行は文章を「<br>～</br>」で囲みます。
brで囲んだ文章から改行されます。
太字<strong>
文字を太字にしたいと思った時は「<strong>～</strong>」で囲みます。
囲んだ部分が太字になります。
太字には「<b>～</b>」もありますが、SEO的に不利だという噂があるのでstrongの方がオススメです。
マーカー
当然ですが、SWELLのマーカーも広告タグ内で使えます。
SWELLのマーカーを使う際は「<span class=”swl-marker mark_xxxx“>～</span>」で囲んであげる必要があります。
xxxx部分を変更することで好きな色を選べます。
| 色 | 入力内容 |
|---|---|
| オレンジ | swl-marker mark_orange |
| 黄色 | swl-marker mark_yellow |
| 緑 | swl-marker mark_green |
| 青 | swl-marker mark_blue |
その他装飾を使いたい時は投稿記事で確認
紹介した装飾以外についてもブロックエディターでコードを確認できます。
確認は簡単。
- 使いたい装飾をブロックエディターが使える投稿記事などで使う
- HTML表示に切り替える
- どんなコードが使われているのか確認
- コードを広告タグ内で使う
HTML表示に切り替えることでHTMLタグを確認できます。
アップロードした画像もHTMLタグで使える
くろだ自分でアップロードした画像を使おうと思うとどうすれば良いのか迷ってしまいませんか？
バナー広告を広告タグ内で使用するのは簡単でしたが、画像はどうやって使えば良いのか分からず戸惑います。
広告タグではHTMLタグを使う必要があるのと同じように、画像もHTMLタグを使って画像を指定する必要があります。
使うのは<IMG>タグ
以下のような内容を広告タグ欄に入力することでアップロードした画像を使えます。
画像のURLはメディアから確認
画像のURLはWordPressのメディアのライブラリ画面から確認できます。
ライブラリ画面から広告タグに使いたい画像を選び、ファイルのURLをまるごとコピー。
コピーしたら広告タグ欄に<img src=”画像URL” alt=”画像の説明”>を入力することで画像が表示されます。
まとめ
広告タグ機能は一度作成してしまうといつでも好きなタイミングで呼び出せるように鳴る便利な機能です。
ただ、広告タグはHTMLタグを使って説明文を書く必要があるので使い慣れてないと戸惑ってしまいます。
くろだ特にブロックエディターに完全対応したSWELLに慣れていると大変。
広告タグは広告以外にも使いやすいのでぜひ活用してみてください。