AI-SEKA | I am Here.

あいせか-愛は世界を動かす- TOP  >  PC関係  >  PC_WEBデザイン >  背景ジャック風広告を作成する3つのステップ #wallpaperad

背景ジャック風広告を作成する3つのステップ #wallpaperad

個別記事の管理
背景ジャック広告のつくりかたについての記事の表紙
大手サイトが背景丸ごと広告にしているのがオシャレすぎて,マネしたくなりました.
複数のサイトのHTMLとCSSをパクって参考にして導入してみました!
背景広告の作り方.
についての記事です.



このエントリーをはてなブックマークに追加





最近,大手サイトでは背景を広告としているところは珍しくありません.
かっこいいです.w

サイト自体が華やかになりますよねー.

ということで,筆者も「背景ジャック広告」風に
広告を作成,導入してみました!(2015年03月現在)

以下に目次を示します.



目次


ざっくり分かりやすく説明します.
簡単なので,HTML初心者にも理解できると思います.


  1. 背景ジャック広告(Wallpaper AD)

  2. 背景広告導入してみた

  3. HTMLとCSS

  4. 利用規約

  5. まとめ

  6. さいごに




いろいろなサイトで背景を広告にしているのが気になって,
ソースコードを見てみると,
タグの名前に "jack" というワードが多く使われていました.

「背景 ジャック 広告」
と調べてみたところ,「背景ジャック広告」が引っかかりました.そのままw

株式会社LIG』が主に使っているワードです.
”エッジの効いたブランディング広告”として,売り込んでいました.

マイクロソフト アドバタイジング』では
「背景広告(Wallpaper AD)」という言葉で表していました.

または,「ジャックバナー広告」,「サイトジャック広告」という言い方もあるようです.
これらは,カラム本体の広告と背景広告が連動して同じ種類の広告を表示するようです.オシャレ.

「背景広告(Wallpaper AD)」とは,
サイトの背景(Wallpaper)をジャックし、背景の一部のクリエイティブを連動させることによってキャンペーンの参加を促すもの.

という説明がされていました.
大抵は,背景の広告が一定期間で様々なキャンペーンに変わって配信される仕組みになっています.

今回は,サイトを華やかにするための目的で,
背景ジャック広告風のレイアウトを作成しましたー.

以下に実際に作成した背景広告を示します.




こんな感じになりました.
背景を装飾したかっただけなので,やっつけで作成.

広告による利益はあまり考えていません.
なのでデザインは参考にしない方が良いと思います(笑)
背景広告をやってみた画像



サイトが鮮やかになりましたー^^ハナヤカー
背景広告いいですね.オシャレ.

とりあえず素材は,CCライセンスフリーのもの.
また,個人ブログでのアフィリエイトは非商用となるそうなので[1]
使用できる素材は多いと思います.

最初は筆者がやっているオンラインゲームを勝手に広告にしようかと考えましたが,
なかなかデザインが思いつかなかったため無難に「A8.net」にしましたw

このために わざわざ登録しました.笑

レイアウトについては,様々なサイトを参考にしました.
以下に参考にしたサイトを紹介します.



DMM.com


以下の画像は『DMM.com』の「オンラインゲーム」カテゴリのページの画像.
定期的に背景の広告が自社の様々なサービス内容のものに変わります.
dmmの背景広告画像



背景が賑やかでいいですね^^
HTMLがシンプルだったので,ソースコード少し参考にしました.



OnlineGamer


次に参考にしたサイトは『OnlineGamer』です.
OnlineGamerの背景広告画像



OnlineGamer の広告は1部のボタン部分だけリンクになっています.
この手法だと A8.net の利用規約に違反しないので,このソースコードを参考にすることにしました.

以下に HTML,CSS を示します.




大抵の場合は,
<body>の直後,またはカラムのタグ直前にコードを挿入します.
背景に重なるところなら どこでもOKです.

DMM.com と OnlineGamer を参考にしたHTML,CSSを以下に示します.



背景画像


まずは,背景画像を設定しますー.

center top no-repeat と指定することで,
比率そのままでどんなに大きな画像でも,真ん中に固定されます.

背景画像を下に下げたい場合は,background-position:50% ○○px;でOK.
body { /*bodyとしてますが,背景を変更するタグを指定してください*/
background: #fff url(~.png) center top no-repeat;
background-position:50% 262px; /*タイトルに被るので下げました.*/
}



広告リンクコード


次に広告です.
今回は,100x60pxの広告リンクコードを想定しています.

広告を調整するためにタグで囲みます.
OnlineGamer と同じくclass名は jackButton としました.





.jackButton のスタイルシート.
背景の壁紙と合わせるために微調整します.
(例:設置後,F12 で地道に合わせましょうw)
.jackButton {
position: relative;
top: ○○○px; /*広告の位置微調整*/
right: ○○○px; /*広告の位置微調整*/
height: 60px; /*広告の縦幅*/
}



上記で縦幅を設定したので,
<div class="jackButton">~</div>より下のタグ全般の位置が
広告の縦幅分だけ下がってしまいます.なので以下のように設定して戻します.

ここでは body を指定しています.適宜変更してください.
body {
margin-top: -60px; /*広告の縦幅*/
}



以上で,完成です.簡単.




これって,規約違反じゃないの?
と思ったので調べてみました.

Google AdSense』はグレーゾーンの可能性があるとのことでした.[2]
多分…違反ではないとおもいます.が,Google AdSense ではやらないほうがいいでしょう.

ほかの大抵のアフィリエイトは大丈夫そうでした.
オリジナルの画像を広告として作成することや,広告画像の編集等は違反でしたが,
今回のように背景画像と広告を重ね合わすことは問題ないと思います.

「クリックしてください」とか
「このサイトの収益は環境保護の募金に使用します」などの
あからさまなクリックの誘導は違反になります.[3][4]

心配なら
ゲームの友だち紹介キャンペーンとかが無難かも知れませんね.




まとめまーす.

背景画像にあたる部分のタグのスタイルシートに画像を設定
広告リンクコードを背景部分のタグ内に貼り付け
スタイルシートで位置を調整

の3ステップでしたー.



まとめたコード


以下に上記コードをHTMLにまとめたものを示します.

お試しで,そのままサイトにコピペしてみてください.
位置は多少ずれると思いますが,微調整でなんとかなると思います.

想定環境
背景画像部分が<body>であることを想定.
<body>直下に貼り付けることを想定.
bodyには text-align: center; が設定されてることを想定.(位置調整時に影響)



HTML(<body>直下)にそのまま貼り付けるだけでCSSも適用されます.
このサイトへのリンクと背景画像が設定されます.
<body>

:
:
:
</body>



設置後,F12 で確認してみてください.









Ctrl + C でコピー.
Ctrl + Z で貼り付け♪




以上
背景を広告にしているサイトがオシャレに見えて,マネしてみた!

大手サイトのソースコード参考にしたら
それっぽいのが出来た!

背景賑やかになりつつ広告も設置できるなんて
一石二鳥でーす.
についての記事でしたーノシ



-備考-
[1]アフィリエイトと非営利・商用目的の関連性と、画像の引用について - メモと記憶の間,<http://bontyun.tumblr.com/post/10977196671>

[2]アドセンス広告の装飾?について - Google プロダクト フォーラム,<https://productforums.google.com/forum/#!topic/adsense-ja/tUhNFfIyipw>

[3]禁止事項:アフィリエイトサイト(AS)会員サポート:アフィリエイトのA8.net,<http://support.a8.net/as/kinshi.html>

[4]アフィリエイトの不正行為と法律違反:アフィリエイトサイト(AS)会員サポート:アフィリエイトのA8.net,<http://support.a8.net/as/fuas_a8compliance.html>


鏡音リン 鏡音リンつままれストラップ鏡音リン 鏡音リンつままれストラップ


コスパ
売り上げランキング : 16342

Amazonで詳しく見る









関連記事





このエントリーをはてなブックマークに追加
TB( 0 ) | CM( 2 )
2015/04/03

カテゴリ:「PC関係」のおすすめ記事

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2016/08/15 01:03 ] [ 編集 ]
Re: ワードプレスでの方法を教えてください。
> 初めまして、いきなりの質問失礼致します。
> もしよろしければワードプレスでの設定方法を教えていただけないでしょうか?
(抜粋)

名無し さん
コメントありがとうございます。

この記事の内容は、FC2やlivedoorなどの簡易なブログを対象にしたものです。
ワードプレスですかぁ…

筆者はワードプレスの経験がまだないので、
詳細なことを的確に回答できませんm( )mすみません



しかし、記事の内容は、
ただ、背景とリンクボタンを設置しているだけなので、高度なことはしてません。

ワードプレスのシートとしては、背景を変更できるものなら何でもいいと思います。
(一番外枠を構成しているようなシート)

そこに、背景を変更するようなコードを書き込んでください。
HTMLとCSSは、記事参照して適宜名前を変更してご使用ください。

HTMLタグの構造は、Chromeなどのブラウザでは「F12」で確認できます。
大抵は、<body>に背景を設定していると思います。
[ 2016/08/16 20:46 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
http://nico176.blog.fc2.com/tb.php/149-bbdc33a4

スポンサードリンク

Nintendo Switch Joy-Con (L) / (R) グレー

カテゴリ

アクセスランキング

[ジャンルランキング]
オンラインゲーム
52位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
28位
アクセスランキングを見る>>

リンク・ブロ友 一覧

相互リンク募集中
ブロ友申請もこちらから
リンク ページ^^friends

GameOn 推し

GameOnはアタリが多い↑↑
現在プレイしているもの.

Alliance of Valiant Arms

今週の人気ページ