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

CREAMに関するお問い合わせはこちら

お問い合わせ・資料請求は下記のフォームからお気軽にお申し付けください。

CREAMお問い合わせフォームへ
不用品回収 タスクル

関連する投稿


サイト内で使う画像をアップロードする「画像管理」の使い方

サイト内で使う画像をアップロードする「画像管理」の使い方

管理画面の「画像管理」メニューでは、サイト内で使う画像をアップロードすることができます。バナーやよく使う画像など、サイト全体で共有したい画像を登録しておきましょう。 また、ウィジェットやページ作成で画像を表示するときにも「画像管理」を使います。 「画像管理」での画像の登録の仕方と便利な使い方をご紹介します。


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

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

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


Webメディアの回遊アップに効果あり!サイト内検索&レコメンド広告のツールを導入(ISE編)

Webメディアの回遊アップに効果あり!サイト内検索&レコメンド広告のツールを導入(ISE編)

アクセスユーザーの回遊率や滞在時間を上げるには、より多く読まれるようコンテンツの質を高める必要があります。なかなか難しいことですが、実はもっと簡単にCMSに設置するだけで効果が見込めるツールがあります。広告収益の提供もあります。そんなツールの紹介とCREAMへの導入方法を解説します。


広告にもデザインにも活用!「ウィジェット」の使い方

広告にもデザインにも活用!「ウィジェット」の使い方

バナー画像や広告タグを配置するための機能のひとつ、『ウィジェット』を紹介します。トップページやカテゴリー記事一覧トップなどに表示されるエリアを管理できます。コンバージョン促進など、自由なアイデアで活用していただきたい機能です。


オウンドメディアに手軽なコメント機能を導入(AIコメントシステム編)

オウンドメディアに手軽なコメント機能を導入(AIコメントシステム編)

オウンドメディアやWebメディアサイトに特化したCMS「CREAM」に、よくいただくご要望のひとつにコメント・口コミの機能があります。後付けのコメント機能のサービスとしてAIに強い会社のものを使うことで、手軽にかつ運用負担も少ないコメント欄を実現できます。


最新の投稿


メディア運営をサポートするおすすめサービス

メディア運営をサポートするおすすめサービス

メディア運営の運用サポートやお悩みの解決におすすめのサービスサイトをご紹介いたします。


CREAMアップデートのお知らせ

CREAMアップデートのお知らせ

CREAM標準パッケージを対象とした、2023年3月のアップデート内容の詳細についてお知らせします。


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクスは、メディアの運営上、必須ともいえるアクセス解析ツールです。CREAMの管理画面からGoogleアナリティクスのタグを設置して、アクセス解析を始めましょう。


Googleアナリティクス(GA4)に切り替える

Googleアナリティクス(GA4)に切り替える

Googleアナリティクスは、2023年7月1日に「ユニバ―サルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わります。UAを利用している場合は、GA4への切り替えが必要です。CREAMでUAを利用している方向けに、GA4への切り替え方法をご案内します。


不用品回収 タスクル

ページTOPへ