CREAMサポートブログ | はじめてのメディアサイト運用に

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

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

企業ブログなど、会社やサービスの認知拡大を目的とするWebメディアサイトでは、誘導のバナー画像を貼ることがよく行われます。バナー画像のリンクはアフィリエイト広告でも使います。初心者向けにメディア構築CMSで設定する方法を優しく紹介します。


企業ブログの送客誘導バナーとは

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

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

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

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

【参考記事】 広告収益アップ!メディア記事内広告「コンテンツウィジェット」の使い方

https://media.cream-cms.com/blog/articles/16

広告収益型のメディアサイトで実績が多いCREAMには、広告掲載場所を設定する「ウィジェット」という機能が3種類あります。その中で、使い方次第で広告収益改善が期待できる記事内広告「コンテンツウィジェット」機能を紹介します。

バナー設置の流れ

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

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

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

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

画像のアップロードとURL取得

CREAMの管理画面にログインして、「画像管理」というアイコンからはじめます。

「画像管理」の中にある画像一覧の右上の「追加」から。

「画像追加」画面で、適当な名前を付けます。
画像一覧の中でのタイトルになるため、あとで何用の画像かわかるようにするのが良いでしょう。

対象のバナー画像ファイルをアップロードします。

アップロードが終わると画像一覧に切り替わります。

対象画像は最後に表示されますので、その右下にある「画像URL」をコピーします。
右クリックから「リンクのアドレスをコピー」など。

記事ウィジェットにHTMLタグで設定する

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

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

パソコン表示の、記事ページの右カラムのうち、ランキング表示の下に設置します。

CREAM管理画面の「記事専用ウィジェット」から、ランキング表示下のウィジェット枠である【9】のフォームを開きます。

開いたフォームに、先にコピーした画像URLをペーストします。

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

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


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


『バナーから誘導したいページURL』をこのサポートブログのトップ、
https://media.cream-cms.com/blog/
にして、
『コピーしたバナー画像URL』は先にペーストしたURLは、
https://media.cream-cms.com/blog/uploads/image_manager/image/12/d572fcab-9def-4adb-8cf5-32722dc06bb4.png
です。

すると、以下の記述になります。

<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>


もちろん、HTMLに慣れた方でしたら、URLを相対パスに変更する、新しいウィンドウで開く、画像サイズを調整する、alt属性を記述する、なども行ってください。

バナー画像とリンク先のURLを設定する記述例です。一番シンプルな例です。

登録したら「変更」ボタンを押すのを忘れずに。

記事ページに移動して、再読み込みしてみましょう。

意図どおりの場所に意図どおりのバナー画像が表示されていますでしょうか。
もちろん画像をクリックして、リンク先の設定も確認しましょう。

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

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

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

この記事のライター

関連する投稿


回遊を高める「関連する投稿」、レコメンド広告の活用

回遊を高める「関連する投稿」、レコメンド広告の活用

メディア構築CMSのCREAMには「関連する投稿」の機能があります。回遊を高める効果もあるため、仕様を説明します。また、同じような効果をもたらすレコメンドウィジェット広告(関連コンテンツ ユニット)についても、活用方法を解説します。


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


【メディア掲載】「ここからアプリ」にCREAMが掲載されました

【メディア掲載】「ここからアプリ」にCREAMが掲載されました

独立行政法人 中小企業基盤整備機構が運営する、中小企業・小規模事業者向けの業務用アプリを紹介する情報サイト「ここからアプリ」に、メディア構築CMSのCREAMが掲載されました。


カテゴリーの機能説明と便利な活用方法②

カテゴリーの機能説明と便利な活用方法②

ブログやメディアサイトで必須となる、記事の分類やメニューの「カテゴリー」機能を説明しながら、便利な活用Tipsなども紹介します。その2。


メディアサイト管理者は必見!ads.txt の設定方法

メディアサイト管理者は必見!ads.txt の設定方法

なりすまし広告詐欺を防ぐ仕組みの「ads.txt(アズテキスト)」を設定する方法を説明します。未対応の場合はGoogleアドセンスの管理画面に警告が出ることもあります。アドネットワーク広告を設定するサイト管理者であれば必ずご確認ください。


最新の投稿


2020年夏季休業期間のお知らせ

2020年夏季休業期間のお知らせ

2020年8月の弊社休業期間をお知らせします。


回遊を高める「関連する投稿」、レコメンド広告の活用

回遊を高める「関連する投稿」、レコメンド広告の活用

メディア構築CMSのCREAMには「関連する投稿」の機能があります。回遊を高める効果もあるため、仕様を説明します。また、同じような効果をもたらすレコメンドウィジェット広告(関連コンテンツ ユニット)についても、活用方法を解説します。


CREAMが「IT導入補助金2020」の補助対象ITツールになりました

CREAMが「IT導入補助金2020」の補助対象ITツールになりました

独立行政法人 中小企業基盤整備機構が運営する「IT導入補助金2020」のIT導入支援事業者として、私どもSODA株式会社が採択されました。また、メディア構築CMSの「CREAM」が補助対象となるITツールに認められました。


モバイル表示の確認方法とメディアサイトの特性

モバイル表示の確認方法とメディアサイトの特性

メディアサイト構築CMSのCREAMにはモバイル表示(スマートフォン表示)のプレビュー機能があります。またメディアサイトならではの特性もあります。合わせて、Chromeブラウザを使ったモバイル表示方法もご案内します。


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


 

ページTOPへ