中年ニート在宅ワーク希望ブログ

   =在宅ワークの道=   

https://sugihiro.jp.net/work/0076/
HOME>在宅ワークの道>

アフィリエイト
広告の貼り方

PCとスマホでの広告表示
 


本記事は、

「売上の上がるASP広告の貼り方」
ではなく、本当に単純に
「ASP広告をタグで編集して貼る方法」
になります。


釣り記事ではありませんので、誤解なさった方には先にお詫び申し上げます。

しかも、WordPressなどのホームページ作成ソフトを使ってではなく、 タグを直接編集するやり方ですので、 htmlとCSSに詳しくない方は、すみません!


ちなみに僕が使っているソフトは、『メモ帳』です。


「それソフトって言われても…。もっといいの使えよ!」



本当に、その通りです!


でもこれで慣れちゃっているので…。



最初にホームページを作ったのは、15年以上前。

タグ直接編集で作っていた人がほとんどだった時代なので。


某有名企業の情報商材「HPデザイン講座」をやっていました。


…標準学習期間半年なのに、ダラダラ3年半掛かりました(泣)

延滞金大分払いました(汗)



という事で、2年半前に当サイトを立ち上げる際、HTMLとCSSの分厚い参考書を買ってきて流し読みし、10年間のブランクを埋めました。


ちなみに以下がその参考書。

当サイトのデザイン変更時に、ちょくちょく辞書代わりに使っています。


加えてネットで調べて参考に(コピペ)させてもらったり、一部設定をいじって自分好みにカスタマイズしています。

本ブログサイトのデザイン構成を作ったのは、この本のテクニックといっても過言じゃないです!

例えばPCのフル画面表示だと、「flexboxを使った2コラムレイアウト」になっています。




余白

 

バナー広告のサイズを変えたり、拡大・縮小可能にする

 


サイズが固定のバナー広告でも、CSSコードを加えれば画面サイスの拡大縮小に合わせてサイズを変動させる事が出来ます。

PCでもスマホでも画面にピッタリハマるような「レスポンシブ」化ができます。

リンク先や画像の改変さえしなければ、広告元のASPさんの規約違反にはならない、とは思います。

「大きさが若干合わないだけで広告掲示を諦める」
という必要が無くなるかもです。



以下が、当サイトで使っているコードです。


【HTML】

<a href=”広告サイトのアドレス”
 rel=”sponsored” target=”_blank”>
<img  class=”photo”  src=”画像のアドレス”>
</a>

【CSS】
(「○○(英数字で任意).css」ファイルを作成して、アップロード)

.photo  {
width: 100%; (横幅)
min-width: 300px; (最小横幅)
height: auto;
(高さの指定。ここでは横幅に従って縦横比を維持)
position: relative; (配置に関するコード)
left: 0; (配置に関するコード)
bottom: 0; (配置に関するコード)
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
(画像に影をつける設定。無くてもいいかな?)
}



タグの説明

「rel=”sponsored”」

「リンク先は広告のサイト」と、クロール(検索エンジンの自動巡回)に知らせる。

「target=”_blank”」

インラインフレーム内のページにリンクを貼った場合、入れておくといい。

フレーム内で別サイトが表示されるミス(アドセンス規約違反)を防げるので。

「class=”photo”」

画像の大きさ、縮尺を調整。ちなみに、記事内の画像もこの設定にしています。

「class→style」にして、「=””」内にCSSを直でぶち込んでも可。

別個に「〇〇.css」ファイルを作らなくてもいいので。

<img   style=”width: 100%;
(中略)
  rgba(0, 0, 0, .5);”
  src=”画像のアドレス”>



固定サイズのバナーの大きさを変えたい

htmlコードでも画像のサイズ変更はできます。

画像指定の「img」タグ内に「width(横幅)」「height(高さ)」を追加します。

すでにコードがあり、サイズが気にくわなければ数値を変更します。

<img src=”画像のアドレス”  width=”728″ height=”90″ >

→<img src=”画像のアドレス”  width=”468″ height=”60″ >

サンプルバナー
(↑画面サイズの都合上、幅が変動します。実サイズと少し違います。↑)

サンプルバナー

縦横の縮尺が元の画像と違うと、「縦長・幅広」になってしまうので注意!

→<img src=”画像のアドレス”  width=”300″ height=”250″ >

サンプルバナー

見苦しい結果に!


目次に戻る

 

設置した広告の表示とリンク先が違う場合

 

暴露するとマズいかもしれませんので控えますが、某ASPさんのバナー広告の画像とリンク先が一致していません。

「ここのサイト、記事内容と関係なさそうなバナーが貼ってあるなあ。」

「バナー広告を1つ1つ指定し、商品もリンク先のサイトも全然違うはずなのに、 全て同じアイコンが表示され、リンク先も同じ所に行ってしまう。
なので、結果同じヤツが何個もズラッと並んでしまう。」


(背景色が青で、王冠みたいな絵の入ったやつです!)


「なぜ?ウザいんだけど!」


と感じた事ありませんか?


早い話、某ASPさんに改善のお願いをすればいいのかもしれません。


僕は面倒臭かったので、勝手に正しい方の画像を自分のPCに保存して当てがいました。

リンク先も、本来のリンク先のコードに書き換えました。


ここまで改変すると、もしかしたらアフィリエイト収益がもらえないかもしれません。


でも紹介したリンク先が正しく表示されないのは、記事を読んでくれた人にも申し訳ないので、

「仕様がないかなー」


とも思っていました。



…数か月後、リンクを確認してみたら、案の定
「規約違反のためリンク先が表示できない」
と出ました。



「や、や、や、やべ~~~!!!」


余計な事はしないでおきましょう。

BAN(サイト消滅)されたら堪りません。


ちなみに、この広告の掲載はやめました。


目次に戻る



ASP(アフィリエイト)の広告

【A8.net】

・広告&サイト登録数日本最大級。
・セルフバックで報酬ゲット!
・スマホで利用可。


【FC2アフィリエイト】

・かんたん登録で成果発生!
・FC2ポイントとして使える!
・高い還元率!

 

楽天アフィリエイト広告の貼り方

広告サイズ変更
 


PCとスマホで、載せる広告サイズを変えています。

同じ広告コードをサイズ違いで2つ貼っていますが、表示されるのは1つのみにしました。

・PC:画面サイズ横幅750px以上は「240×240サイズ」を表示、

・スマホ:画面サイズ横幅750px未満は「128×128サイズ」を表示
としています。


要するに、画面サイズが小さくなったら、
「サイズの大きい広告」を隠して、
「サイズの小さい広告」を出します。

ブラウザを最大化しないで画面サイズを変えられる状態にし、横枠を縮めると広告が切り替わるのが分かりますので、やってみてください!


上に掲示したHTML・CSS参考書の広告は、このパターンにしています。


以下がコード例。

楽天アフィリエイトの広告コードは、他のASPのコードと比べてとんでもなく長いので、骨組みだけにしています。

HTMLコード

【HTML】

<table  class=”kakusu”> (240×240サイズを隠す)
<tr>
<td><a href=”広告サイトのアドレス” >
<img src=”画像のアドレス”></a></td>

  <td><a href=”広告サイトのアドレス” >(商品名や説明)</a></td>
</tr>
</table>

<table  class=”dasu”> (128×128サイズを出す)
<tr>
<td><a href=”広告サイトのアドレス”>
<img src=”画像のアドレス” ></a></td>

  <td><a href=”広告サイトのアドレス” >(商品名や説明)</a></td>
</tr>
</table>

【CSS】

@media screen and (max-width: 750px) {
.kakusu  { display: none; }
}
@media screen and (min-width: 750px) {
.dasu  { display: none; }
}




目次に戻る

 

「Amazonアソシエイト広告」の改変?

 


Amazonがやっているアフィリエイト「Amazonアソシエイト」の申請方法は、3つのルートがあります。

(他のルートも見付けたら、リライトします!)


僕はAmazon本家からは申し込まずに、「A8ネット」「もしもアフィリエイト」で申請。

本家や「A8ネット」より、「もしも」の方が審査に通りやすいようです。


事実、「もしも」で掲載許可が下りました。




(出典:「A8ネットからの返信メール」)


何か文句言ってばかりで申し訳ないのですが、広告が地味なんですよね!


Amazon広告

(当サイトのAmazon広告より)


上の様に画像とテキストだけの殺風景な広告のため、以下を補充。


・「Amazon広告」という案内文を、広告の手前に掲示。
「テキストタイプ」の広告でもあります。

・CSSで作られた黒枠で広告を囲う。
デザインを楽天アフィリエイトと合わす。


Amazon広告

(当サイトのAmazon広告より)


以下がタグ。多少省略しています。

【HTML】

(Amazon広告前に貼るテキスト)
<a href=”広告サイトのアドレス”
 rel=”sponsored” target=”_blank”>

Amazon</a>
<img src=”広告サイトのアドレス”
 width=”1″ height=”1″ 
style=”border:none;”>

広告

(Amazon広告外枠用)
<div class=”box1″>
<a href=”広告サイトのアドレス”
 rel=”sponsored” target=”_blank”>
<img src=”画像のアドレス”
 style=”border: none;”>
(商品名や説明)</a>
</div>

【CSS】

.box1 {
padding: 0.5em 1em;
(配置に関するコード)
margin: 2em 0;(配置に関するコード)
font-weight: bold;(文字を太めに指定)
border: solid 1px #000000;(黒枠)
border-radius: 10px;(角の丸み)
}




目次に戻る



HP作成サービスの広告

【ジンドゥー】

・数分で本格的なHP作成。無料もあり。
・実用性高いレスポンシブル対応デザイン。
・解析機能でSEOに必要な設定をタスク化。
・SNSと連携、ネットショップ可。


ドメイン所得サービスの広告

【エックスドメイン】

・激安ドメイン所得可能。
・最安値は年額30円から。
・「エックスサーバー」
   と一緒だとさらにお得に。

 

「カエレバ」紹介

商品紹介ブログパーツ・カエレバ
 

(出典:「商品紹介ブログパーツ・カエレバ」)





同じ商品がAmazon・楽天などの物販サイトに出品されている時にまとめて表示し、お客さんが買いやすいページに行ってもらうという意図があると思うのですが、正直

『設定が面倒くさい!』



無料で提供してくださっている製作者の方には、申し訳ありませんが…。


要は、それぞれの物販サイトで該当商品があるか探したうえで、カエレバのサイト内のフォームに入力して『合体版広告枠』を作成する、という事。


時間掛かるので、

「どうせなら2つとも貼ればいいじゃん!」


と、元も子もない事を思ってしまう。


「そのうちCSSで似たようなもん作りたいな~」


とか思っています。





目次に戻る

 

Googleアドセンス広告

AdSense
 

(出典:「GoogleAdSense広告>サマリー>広告設定」)



最近(2020年10月に)やっと審査に合格したので、紹介します!(ドヤ顔)


「審査用コード」がそのまま「広告自動表示用コード」に切り替わるのですが、 これが結構『曲者』で変なところに表示されます。


狭いスペースに巨大な広告が入ったりなど、サイトのレイアウトが「○斗の拳」で秘孔を突かれた雑魚の破裂寸前の頭の様にいびつになったりします(笑)


このままだと折角レスポンシブデザインに気を遣っても、画面に入りきらない幅広の広告が貼りついたりするので、 「自動広告」はなるべくなら避けた方がいいです。


僕も合格から1週間、広告の設定に苦労しました。


僕も当初前述の様に
「サイズ縮尺可能」

「画面サイズで表示する広告の大きさを変える」
事に挑戦しましたが、上手くいかなかったので、結局PCでもスマホでも問題ないサイズの広告を貼りつけました。


ちなみにサイズは「300×250」


サイズを固定すると、表示される広告ジャンルが少なくなるリスクもあります。

画面サイズにより広告サイズを変えられるコードも「Googleアドセンスのヘルプ」で紹介されているので、利用するといいです。


但し、

・「広告自動表示用コード」を削除

・アドセンスの設定で
「広告>サマリー>編集(ペンのアイコン)>広告設定>自動広告」
と進み、『オフ』にする


事が必要です。


この2つとも処理しておかないと、自動広告が表示され続けます。

でないと、いくら設定変更を変更してもちっとも反映されないので!


PS.
「自動広告」もある程度調整できるようなので、色々試してみます。

まだ合格ほやほやで、よく分かっていないところもあるので!






目次に戻る



Googleアドセンス広告

 

広告掲示の場所

サイトの構成
 


メイン(記事スペース)サイドフッター(ページの一番下のスペース)などの大きさに合わせたサイズの広告を選んで貼るといいです。


タイトル(サイトの名と、サイトのメイン画像)ナビゲーション(メニューバーを表示する部分) には広告を載せない方がいいと思います。

Googleアドセンスの自動広告表示だと、どこそこ構わず表示される事があります。

バナー型

横長タイプ

【728×90】
サイドが無いページ向け。端から端までいっぱいに表示。PC表示用。

【468×60】
サイドがあってもメインに表示可能な幅。PC表示用。

【320×50】
同上。スマホでもギリギリ表示可能かも。

【234×60】
万能型。どこに貼っても丁度いい感じ。


縦長タイプ

昔はよく見かけた形ですが、今では古いかも。

【120×600】
サイド限定、でないと無理でしょう

【160×600】:同上。


スクエア(四角)型

【336×280】
広めのサイドメインがおすすめ。

【300×250】
サイドメインがおすすめ。 特にメインなら、最大画面なら横に2つ並べても良し。
画面サイズが小さい時は、右側の広告が下に移動するので。
当サイトではそんな感じでやっています!

【250×250】:同上。


小さいサイズ

【224×33】
「スマホ表示用」が丁度いいかも。
サイドでもいいが、ちょっと表示が小さいので。

【100×100】
サイドフッター用。 メインだとちょっと小さいかも。

【120×60】:同上。

【100×60】:同上。

【88×31】
ボタンみたいなバナー。はっきり「スマホ表示用」


テキスト型

商品名などのテキスト(文字)にリンクが付いているタイプ。

記事の文章内にうまく組み込むといいかもです。

サイズの種類

サイズの種類は、某ASPさんの広告素材を参考にさせていただきました。


以下は、サイズ別サンプル。


大きいバナーは、サイズによっては画面に収まる様に縮小させるか非表示にしています。

スマホで見ている方、すみません(汗)

バナー見本720-90
(↑画面サイズの都合上、幅が変動します。実サイズと少し違います。↑)
バナー見本468-60
バナー見本320-50
バナー見本234-60
バナー見本224-33
バナー見本120-600 バナー見本160-600
バナー見本336-280 バナー見本300-250
バナー見本250-250
バナー見本100-100
バナー見本120-60 バナー見本100-60
バナー見本88-31


目次に戻る





サイト制作依頼の広告

【ZENMAI WORK】

・スマホ&タブレットに対応。
・口コミ比較サイト対応。
・WordPress対応。


Googleアドセンス広告








内股 前へ
才能と実力がありながら
大成しなかった柔道家達
(内輪話)1人目
才能と実力がありながら
大成しなかった柔道家達
(内輪話)1人目
Gerd AltmannによるPixabayからの画像 次へ
集中できない、
自分に制限をかけて
しまう事への対策
集中できない、
自分に制限をかけて
しまう事への対策