【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。

はてなブログ　広告をレス崩れないレポンシブでも崩れないよう表示。

こんにちは、会社員しょこちゅんです🤗

本日は、タイトルにもある通り、記事の一番下に自分で任意の広告をレスポンシブで入れる方法についてです。

グーグルアドセンスに合格されてない方や、他のアフィリエイトサイトに登録されてる方も多いと思いますので、是非参考にしてみてください。

それでは早速行ってみよー。

レスポンシブデザインとは？
実際のタグのご紹介
- 実際使用しているブロックはこちら
- 実際に使用するタグはこちら
任意の広告タグに張り替える方法
- 手順の説明
広告の分類ごとに追加していく方法
- 手順
最後に

レスポンシブデザインとは？

レスポンシブって何？

はい、そもそもの質問からお答えします。

レスポンシブデザインとは、スマートフォン対応に作られてるサイトの事です。

分かりやすく説明すると、PCで開いた際、画面をギューッと小さくしていくと文字も改行され、その時の画面幅にそった表示をしてくれたり、画像も縮小幅に合わせて表示されます。

レスポンシブで作るメリットは？

今はグーグル評価的にもレスポンシブが当たり前になってますし、そこも一つの評価として判断されます。「ユーザーにとっての見やすいサイト」を目指すなら、必要不可欠なのがレスポンシブデザインだと思います。

グーグル広告があるから必要ないんじゃない？

いえいえ、必要あります。

特に、ブロガーの方はグーグル広告だけじゃなく、他のアフィリエイトサイトも登録してますよね。

その際に、「もう少し広告を入れたいんだけど、これ以上記事の間にいれるとゴチャゴチャしちゃうなぁ…」とか「綺麗に見やすく並べたいな…」というシーンも多々あるはずです。

そのお悩みを解決するために、今回は配置した広告が崩れないようにまとめたブロックを皆さんにご紹介したいと思います。

実際のタグのご紹介

実際使用しているブロックはこちら

「ファッション＆美容」「総合通販」「金融・投資保険」と、3項目にわけてアドセンス以外の広告を並べてみました。

「ファッション＆美容」はマネートラックの広告を使用しています。

「総合通販」と「金融・投資保険」に関してはA8.netやXMの提供広告です。

ファッション＆美容

[PR]ニキビ跡ケアに専用美顔器プレゼント

[PR] 『ホワイトブライト』購入はこちら

[PR]『プラーノプレミアム』購入はこちら

総合通販

[PR]豊富なアイテム！【東急百貨店ネットショッピング】

[PR]全国のＴＶ・ラジオでもおなじみ！【快適生活オンライン】

金融・投資保険

[PR]取得しよう￥３０００取引ボーナス

[PR]最小となりうるスプレッドは０.０ピップ【ＸＭ】

[PR]【外為ジャパンFX】新規口座開設

[PR]次世代ライフプランの作り方【新日本地所】

[PR]楽天カードでポイント生活はじめよう！

上記のように表示し記事の一番下に入れる事で、よりサイトらしい見栄えとなりPRしたい広告を綺麗に見せる事が可能となります。

マネートラックのアフィリエイトを知らない方はこちらを参照下さい。

アフィリエイター募集

A8ネットにまだ登録してない方はこちらを参照下さい。

A8.netの申し込みページはこちら

上記２サイトは、無料登録でアフィリエイト登録することができます。

これとは別にバリューコマースにも私は登録していますので、気になる方はチェックしてみて下さい。バリューコマースに登録しておけば、Amazonアソシエイトに合格できなくても、バリューコマースからAmazonの広告を張れるので、合格するまでのつなぎとしては十分です。

ウェブサイトで収入を得る！バリューコマースなら出来る！

実際に使用するタグはこちら

記事を「新規作成」し、下記タグをそのままコピーして「HTML編集」箇所に貼り付けて下さい。それだけで完成してるはずです。

<style type="text/css"><!--
*, *:before, *:after {
box-sizing: border-box;
}
.example1 {
background-color: #ffd78c;
color: #c04000;
}
.col_5{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
width: 20%;
padding: 10px;
}
.col_5 > div > div{
position: relative;
overflow: hidden
}
@media screen and (max-width: 960px) {
.col_5 > div{
width: 25%;
}
}
@media screen and (max-width: 480px) {
.col_5 > div{
width: 33.33333%;
}
}
--></style>
<div class="col_5">
<div style="background-color: #fcf5dc; width: 100%; padding: 4px; border: 0px solid #ffffff;">ファッション＆美容</div>
<div><a href="https://mttag.com/s/DOQwvZT7Am0" rel="nofollow" target="_blank"> <img src="https://mttag.com/banner/DOQwvZT7Am0" alt="" width="130" border="0" /><span style="text-decoration: underline; font-size: 11px;"><span style="color: #ff66cc; text-decoration: underline;">[PR]ニキビ跡ケアに専用美顔器プレゼント</span></span></a></div>
<div><a href="https://mttag.com/s/971IYWc_PIQ" rel="nofollow" target="_blank"> <img src="https://mttag.com/banner/971IYWc_PIQ" alt="" width="125" border="0" /><span style="text-decoration: underline; font-size: 11px;"><span style="color: #ff66cc; text-decoration: underline;">[PR] 『ホワイトブライト』購入はこちら</span></span></a></div>
<div><a href="https://mttag.com/s/5GfzSoG79r8" rel="nofollow" target="_blank"> <img src="https://mttag.com/banner/5GfzSoG79r8" alt="" width="135" border="0" /><span style="text-decoration: underline; font-size: 11px;"><span style="color: #ff66cc; text-decoration: underline;">[PR]『プラーノプレミアム』購入はこちら</span></span></a></div>
<div><a href="https://mttag.com/s/U798lPXHvG4" rel="nofollow" target="_blank"> <img src="https://mttag.com/banner/U798lPXHvG4" alt="全身脱毛専門店「シースリー」" width="140" border="0" /><span style="text-decoration: underline; font-size: 11px;"><span style="color: #ff66cc; text-decoration: underline;">[PR]全身脱毛専門店「シースリー」</span></span></a></div>
<div><a href="https://mttag.com/s/lpjlx9e8y9s" rel="nofollow" target="_blank"><img src="https://mttag.com/banner/lpjlx9e8y9s" alt="VOLCENTA (ボルセンタ) " width="126" border="0" /><span style="text-decoration: underline; font-size: 11px;"><span style="color: #ff66cc; text-decoration: underline;">[PR]塗るだけでハリと弾力を実感</span></span></a></div>
</div>