【初心者向け】メディアCMSで送客誘導バナーを設置する方法

メディア構築CMSのCREAMではバナーや広告タグを配置するための機能を3種類、標準で用意しています。
●『ウィジェット』トップページなどに表示されるウィジェットの管理
●『記事専用ウィジェット』記事ページに表示されるウィジェットの管理
●『コンテンツウィジェット』記事ページ内の各見出し部分に表示されるウィジェットの管理

今回はこの中で、CMSやWeb制作に不慣れな方がつまずきやすい「バナー設置」を紹介します。具体的には、バナー画像をアップロードして、サイト内に表示する簡単なタグを記述して貼り付ける方法です。

CREAMを使うのに「HTMLの知識が不要」といいつつも、ここだけは少しだけHTMLが必要ですが、同じように操作してもらえれば簡単にできると思います。

ここで説明している「送客誘導バナー」とは、企業ブログやオウンドメディアなどで、会社やサービスの認知拡大を目的として、記事ページからコーポレートサイトやサービス紹介サイトへ誘導する際に使う画像素材のことです。アフィリエイト広告のリンク誘導にも同様にバナー画像は使われます。通常は、画像に誘導先のリンクが貼られています。

送客誘導バナーを設定する流れは、大きく以下の3つに分けられます。

①バナー用の画像ファイルを用意する
②画像管理に追加する
③ウィジェット枠に設定する

このうち①については、いろいろな手法があるため割愛して、①の画像が用意できているところから説明します。
以下の画像を使って説明していきます。

※例にした右カラムのウィジェット枠が横300pxのため、画像は横300px以上の画像を用意してください。画像ファイル形式は一般的なpng、jpeg、gif、svgが使えます。

ここまでの作業で、対象となるバナー画像をCREAM内にアップロードすることができました。

続いて、サイト内のどこにバナー画像を設置するかを指定します。
この記事では「パソコン表示の際の、すべてのカテゴリーの記事ページの右カラム」に貼り付ける設定例にします。

実はこれだけでは、バナー画像は表示されませんし、リンクも設定されません。
そこで、HTMLに不慣れな方向けに簡単に説明します。（知ってる方は飛ばしてください）

バナー画像を貼り付けてリンクを設定するには、以下が基本的なHTMLです。

<a href="バナーから誘導したいページURL">
<img src="コピーしたバナー画像URL" width="100%">
</a>

<a href="https://media.cream-cms.com/blog/">
<img src="https://media.cream-cms.com/blog/uploads/image_manager/image/12/d572fcab-9def-4adb-8cf5-32722dc06bb4.png" width="100%">
</a>

ここまでとても簡単でしたが、送客誘導バナーを設置する流れを説明しました。

慣れてくれば、外部サイトへリンクした画像のクリック数を計測するようなタグ設置（イベントトラッキング）もできるかと思います。

ぜひCREAMのウィジェット機能を使ってみてください。