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のウィジェット機能を使ってみてください。

この記事のライター

関連する投稿


企業ブログのCVアップにMAツール活用を(SATORI編)

企業ブログのCVアップにMAツール活用を(SATORI編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップにMAツール「SATORI」のポップアップフォームを導入します。


【事例紹介】データマーケティング情報メディア『マナミナ』

【事例紹介】データマーケティング情報メディア『マナミナ』

株式会社ヴァリューズ様が運営する、データマーケティング情報メディア『マナミナ』にCREAMが使われています。


「新規登録」の有効な使い方

「新規登録」の有効な使い方

メディア構築CMSのCREAMには「新規登録」の機能があります。会員限定サイトが目的ではないのにどう使うのか質問を受けることがありますので、活用方法を解説します。


「og:image」って?記事メディアこそシェアされるOGPを設定しよう

「og:image」って?記事メディアこそシェアされるOGPを設定しよう

SNSでシェアされるにはキャッチーな画像や文章が欠かせません。OGP設定でシェア用の画像や説明文を正しく設定しておきましょう。メディア構築CMSの「CREAM」ではどうやって設定するのか、具体的に解説します。


メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

広告収益型のメディアサイトで実績が多いCREAMには、アドネットワーク広告以外にもアフィリエイト活用の機能が標準で用意されています。今回はASPの管理画面を使って具体的な設定例を紹介します。


最新の投稿


オウンドメディアに使いやすいフォームサービスを導入(formrun編)

オウンドメディアに使いやすいフォームサービスを導入(formrun編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップやコミュニケーション促進に、フォームサービス「formrun」を埋め込み導入します。


Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

メディア構築CMS「CREAM」のスポットページ作成機能を使う際に、自社名や店舗名が表示されたGoogleマップを埋め込む方法があります。Googleマイビジネスの説明と合わせて紹介します。


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


記事本文を装飾するには?ビジュアルエディターの使い方②

記事本文を装飾するには?ビジュアルエディターの使い方②

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は後編です。


記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


 

ページTOPへ