紅蓮のアフィリエイト日記

アフィリエイトの方法や失敗談などを書いていきます。また質問などにも答えていきますのでぜひ見ていってくださいね。

アフィリエイトサイトに貼った広告がスマホで見た時にはみ出てしまう。そんなときの対策方法は??

スポンサーリンク
 

こんにちわ。

アフィリエイターの紅蓮です。

 

今回は以下の質問にお答えしていこうと思います。

楽天アフィリエイトがスマホだとはみ出てしまうので240×240のサイズに変更したのですが、まだはみ出たままになっています。パソコンで見る分にはちょうどいいサイズになっています。

どうしたらスマホではみ出ませんか?

 ちなみに今回の記事は以下のようなあなたにおススメです。

  • 広告を張るときにパソコンで張ったけど、スマホの大きさにうまくできないというあなた

そんなあなたがこの記事を読み終わる頃には以下のような効能を得られるようになります。

  • 広告を張るときにパソコンとスマホの両方に適用できるレスポンシブデザインをうまく使えるようになる

ですので、今回も最後まで頑張っていきましょう。

準備はいいですか??

 

では行ってみましょう。

HERE WE GO!!

アフィリエイトサイトに貼った広告がスマホで見た時にはみ出てしまう。そんなときの対策方法は??

最近たくさんのサイトが出来て、Google先生がいいサイトだとする条件の中に『モバイルフレンドリー』という言葉があるんですよね。

 

また『Googleが掲げる10の事実』の中にも以下のような内容がかかれています。

 情報を探したくなるのはパソコンの前にいるときだけではない。

世界はますますモバイル化し、いつどこにいても必要な情報にアクセスできることが求められています。Google は、モバイル サービスの新技術を開発し、新たなソリューションを提供しています。スマートフォンから Google 検索にさまざまな方法でアクセスできるだけでなく、メールを読んだり、カレンダーでイベントを確認したり、動画を見たりなど、世界中のあちこちからスマートフォンをさまざまな用途に使えるようになりました。また、無料のオープンソース モバイル プラットフォームである Android では、さらに画期的な革新をモバイル ユーザーに提供したいと考えています。Android は、インターネットの土台にあるオープン性をモバイルの世界にもたらすものです。Android によって、ユーザーの選択肢が広がり、先進のモバイル体験が可能となるだけでなく、携帯通信事業者、メーカー、デベロッパーにとっては、新たな収益機会が生まれます。(Googleの掲げる10の事実より)

これはスマホにものすごく注力していることがわかる文ですよね。

そこで、スマホに注力できないサイトがあったとしたらそれは順位が下がる原因にもなる可能性があるわけですよね。

 

サイトやブログサービスによってはPC版とスマホ版をいっしょに設定できないものもあるのですが中には一緒に設定できるものもあります。

 

『何?その便利な機能』

そうなんです。実際にあるんですよね。

 

レスポンシブデザインという機能をご存知ですか??

レスポンシブデザインというのは、一つのウェブサイトのデザインで、デバイスによって変更ができるデザインのことです。

 

デバイスがパソコンとスマホとタブレットだったとします。

webサイトのアドレスは一つでCSSを書き換えることによってパソコンで見るときにはパソコンの大きさに、スマホで見るときにはスマホの画面の大きさに、タブレットで見るときにはタブレットの画面の大きさにすることができるデザインを言います。

 

レスポンシブデザインはどうしたらできるのか?

実はこのレスポンシブデザインを設定する方法ですがお使いになっているブログサービスやCMSによってやり方が違ってくるので一概にいうことができません。

 

今回ははてなブログの場合をお話ししていきます。

①レスポンシブデザイン対応のテーマに設定

実ははてなブログのテーマにはスマホで使えるようにするために対応のテーマというのが有るんですよね。

僕は最初わからなかったので以下のサイトを参考にさせていただきました。

happylife-tsubuyaki.hatenablog.com

理由は、めっちゃわかりやすかったからなんですけど、、、。

で、テーマをまず決めましょう。

 

僕はミニマリズムというテーマにしています。

 

②レシポンシブデザイン設定をオンにする

ここで一番この中で大事な作業です。

まず、左端のサイドバーのデザインをクリックしてください。

f:id:slash1196:20190902152136p:plain



その後、スマホのアイコンをクリックすると、下図みたいな画面が出ます。そこから詳細設定という場所に進んでもらうとレスポンシブデザインの横のボックスにチェックを入れてください。

f:id:slash1196:20190902152202p:plain

 

そうするとPC版とスマホ版が同じURLでみれるようになります。

 

其の後、ブログをスマホで確認してみてください。

 

お使いになられているブログサービスはいったいどこでしょうか??

その前にあなたのお使いになられているブログサービスはいったいどこになるのでしょうか??

はてなブログでしょうか??それともSEESAAでしょうか?それともライブドアでしょうか??楽天ブログ?

 

世の中にはたくさんのブログサービスがあります。もしわからない場合には『お使いになられているブログサービス名 レスポンシブデザイン 方法』とググってみるとお使いのブログサービスに見合った方法が出てくるので確認をしてみてもいいかもしれませんね。

 

結論

  • ブログに広告を張る際には、PCとスマホに対応していることが今ブログに求められている
  • レスポンシブデザインを使うのがいいと思う
  • はてなブログはそのレスポンシブデザインを使いやすくていい
  • ブログサービスによってレスポンシブデザインの設定の仕方が違うのでググるのをおススメする

 

まとめ

お疲れさまでした。

如何でしたか??

 

最近Google先生の求めているものがいつでもどこでもどんなデバイスでもというのがモットーになっているみたいなんですよね。

 

いつでもどこでも使えるようにするにはレスポンシブデザインは非常に使いやすいデザイン方法になります。

また、その設定方法というのが最近のブログには設定ができるようになっているものとできないものが有るんですよね。

 

ものによってはHTMLをいじらないといけないものもあったりして若干の面倒さが有ったりしますが、それをすることによってGoogle先生からの評価が得られるのですからやらない手はないですよね。

 

しっかりやって稼げるようになりましょうね。

 

ってことで今回はここまで。

また次回に。

スポンサーリンク
 

 

 

// jQuery読み込み // 目次 表示/非表示ボタン