2014/03/18

レスポンシブデザインに対応しました。AdSense 対応も。


大雑把ながら、当ブログをレスポンシブデザインに対応させました。

 

ブラウザをリサイズしたり、スマートフォンで見たりするとどのように変わったか分かると思います。

 

実は、「レスポンシブデザインにしました」というタイトルで記事を書くのは2回目なんですよね。

 

前回、レスポンシブデザインに対応したときは、広告の表示方法が AdSense の規約にひっかかってしまうので、折角苦労して対応したのに元に戻すことになってしまいました。残念。

 

その規約というのが、スマートフォンで表示したとき、記事タイトルと広告で画面が占有されて、記事のコンテンツが表示されない場合は規約違反になるというものです。

 

今回、その対応方法が分かりましたので、レスポンシブデザインに対応しました。

 

きっかけは以下の記事。

JavaScript でユーザーエージェントを見てスマートフォンかどうかを判断して、AdSense のコードをスマートフォンとパソコンで出し分けする方法が紹介されています。

正直、この記事を読んだとき、AdSense のコードを修正してはいけないという規約に違反しているのではないかと思いました。

ですが、AdSense のヘルプを確認すると、条件によっては AdSense のコードの修正が認められていることが分かります。

ただ、ヘルプに記載されている内容は JavaScript で広告の出し分けをしてもよいとまでは言っていないのですよね。

これはサポートに聞いてみるか、ということで初めて AdSense のサポートに問い合わせを行ってみました。

回答が返ってきて、先ほどのブログで紹介されていた方法は、規約では問題ないとのことです。但し、広告が表示されない場合には気を付けてくださいとのことでした。

これで問題がなくなったので、上記ブログの方法で AdSense の広告の出し分けを行い、当ブログをレスポンシブデザインに対応させました。

ココログのテンプレートの設定のために、細かいところでうまくいかないこともありましたが、なんとか問題を解消して完成させることができてよかったです。

ココログだとレスポンシブデザインが対応できないと思っている方もいるかもしれませんが、有料プランにする必要があるけれども、ちゃんと方法があるということで。

関連記事


スポンサーリンク


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




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

意図的だったら申し訳ありません。
CSSで#pagebody-innerのwidthが980%になってるせいで横スクロールしてしまいます。
980pxの間違いかと。。。

ご指摘ありがとうございます!
確かに横スクロールしててなんでだろうと思ってたのですが、原因が分からず困っていました。
ご指摘の点を修正したら現象が解消されました。助かりました。

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。

    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから