【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。花太郎BLOGスマートフォン用の表示で見る花太郎BLOG夫婦で始めた日々のblog日記。【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。2020-02-07【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。本日は、タイトルにもある通り、記事の一番下に自分で任意の広告をレスポンシブで入れる方法についてです。グーグルアドセンスに合格されてない方や、他のアフィリエイトサイトに登録されてる方も多いと思いますので、是非参考にしてみてください。それでは早速行ってみよー。最後にレスポンシブデザインとは?レスポンシブって何?はい、そもそもの質問からお答えします。レスポンシブデザインとは、スマートフォン対応に作られてるサイトの事です。分かりやすく説明すると、PCで開いた際、画面をギューッと小さくしていくと文字も改行され、その時の画面幅にそった表示をしてくれたり、画像も縮小幅に合わせて表示されます。レスポンシブで作るメリットは?今はグーグル評価的にもレスポンシブが当たり前になってますし、そこも一つの評価として判断されます。「ユーザーにとっての見やすいサイト」を目指すなら、必要不可欠なのがレスポンシブデザインだと思います。グーグル広告があるから必要ないんじゃない?いえいえ、必要あります。ブロガーの方はグーグル広告だけじゃなく、他のアフィリエイトサイトも登録してますよね。その際に、「もう少し広告を入れたいんだけど、これ以上記事の間にいれるとゴチャゴチャしちゃうなぁ...」とか「綺麗に見やすく並べたいな...」というシーンも多々あるはずです。そのお悩みを解決するために、今回は配置した広告が崩れないようにまとめたブロックを皆さんにご紹介したいと思います。3項目にわけてアドセンス以外の広告を並べてみました。「ファッション&美容」はマネートラックの広告を使用しています。関してはA8.netやXMの提供広告です。[PR]取得しよう¥3000取引ボーナス[PR]最小となりうるスプレッドは0.0ピップ【XM】[PR]【外為ジャパンFX】新規口座開設[PR]次世代ライフプランの作り方【新日本地所】[PR]楽天カードでポイント生活はじめよう!上記のように表示し記事の一番下に入れる事で、よりサイトらしい見栄えとなりPRしたい広告を綺麗に見せる事が可能となります。マネートラックのアフィリエイトを知らない方はこちらを参照下さい。アフィリエイター募集A8ネットにまだ登録してない方はこちらを参照下さい。A8.netの申し込みページはこちら上記2サイトは、無料登録でアフィリエイト登録することができます。これとは別にバリューコマースにも私は登録していますので、気になる方はチェックしてみて下さい。バリューコマースに登録しておけば、Amazonアソシエイトに合格できなくても、バリューコマースからAmazonの広告を張れるので、合格するまでのつなぎとしては十分です。ウェブサイトで収入を得る!バリューコマースなら出来る!実際に使用するタグはこちら記事を「新規作成」し、下記タグをそのままコピーして「HTML編集」箇所に貼り付けて下さい。それだけで完成してるはずです。underline;">[PR]塗るだけでハリと弾力を実感</span></span></a></div></div>上記タグを使用する事で、下記のように、PCの画面を小さくしていっても、スマホで表示した場合でも、画像と横文字が崩れないように配置することができます。1通常時のPCでの表示です。画面を小さくしてみます。2画面を小さくしていっても、画像と文字がレイアウト崩れすることなくレスポンシブに対応しつつ綺麗にまとまっています。3上記のようにブロックができた後は、ご自身が貼りたい広告画像を各アフィリエイトサイトで生成し、タグを張り替えていくだけです。念のため、タグの張り替え場所や手順も説明します。任意の広告タグに張り替える方法まず初めに注意事項をお伝えします。※バリューコマースだと、画像サイズの変更ができないため、画像サイズの調整ができるサイトで、なるべく正方形の広告画像を選択する。ブロックで並べても、画像サイズがバラッバラだとかっこ悪いですし、見栄えも汚いです。私はA8.netやマネートラックの画像の中で正方形で素材が準備されてる広告を優先的に選び配置しています。今回は、皆さんも登録が多いであろうA8.netで手順の説明をします。手順の説明1とりあえず辛子明太子のかねふくで今回は説明していきます。準備された広告バナーを見ていくと...あったあった。125×125のサイズの広告を発見しました。小さいですがこのサイズを使用します。大きい画像を配置したい場合は、250×250など、一回り大きいサイズを選択しても問題ありません。2次に、はてなブログの「HTML編集」に戻り、広告画像の張り替えをします。わかりずらいかもしれませんが、画像タグの部分を赤枠で囲っています。ここのタグを消して、先ほどコピーした広告タグを貼り付けます。3このように変更できてるのが確認できます。画像の下に表示されてるテキストリンクは、上記手順を踏めば、同じリンクが適用されるようになっています。下のテキストは「編集見たまま」画面で直接打ち込んで変更してください。このように、一つできましたら、残りのブロックも同じように変更していきます。ブロックを変えていく事で自分だけのオリジナル広告枠を作成する事ができます。広告の分類ごとに追加していく方法ここまで出来たら、次はもう簡単です。私は分類別に分けていますが、コピーして増やしていきましょう。手順1下記画像の範囲が一つのブロックとなっています。このブロックを全部選択し、コピーします。2コピーしたものを、そのまま貼り付けます。すると...3はい、このようにブロックが二つできました。やって、項目ごとにわけてブロックを生成していくと、ジャンル別で表示する事が可能となります。最後にはい、いかがだったでしょうか。今回の説明は少しタグを変更する箇所があり、うまく伝わっているかとても不安ですが、うまくできればいいなと祈ってます。私も手探りで行っていますが、はてなブログの限られた機能の中でも色々と工夫する事は可能です。アドセンスにまだ合格してない方や、広告を並べて表示したい方は是非活用して下さい。ういことで、本日も最後までご覧いただきありがとうございました。次の更新は2/9(日)を予定しております。※沢山のブロガーが登録しているランキングサイトになります。変なサイトではないのでご安心下さい。06:00【はてなブログPro専用】広告をレスポンシブ対応でも崩れないようスッキリ配置。日)#相互フォローします!夫婦で始めたBLOGサイトです。日常生活・グルメ・生活お役立ち情報などなど。皆様にとっての有益な情報をゆるぅく発信していきます。Chabuzen」に行ってきたよ。)|検索🔍ABOUT花太郎BLOGは皆様の日々の生活に役立つ情報を旦那と二人で発信していく為のブログです。個人での運用サイトとなりますので、嘘いつわりない盛りのない内容でお伝えしていきます。毎日更新予定となりますのでお楽しみに♪♪プライバシーポリシーCREATOR製作者:はや太郎・しょこちゅん・そのうちゲスト(予定)東京都在中のウェブサイト運営者。普段は旦那はサラリーマン・私は会社員の正社員として普通の生活を送っております。自己紹介profileに関してはこちらをチェックしてください>>ブログTOP:花太郎BLOGLIFE旦那スペック:北国出身30代前半、都内で不動産業勤務(現年収400万)。得意分野:動画・デザイン制作スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。