rhythmデザインからプログラム、ネタ情報まで。dsuga【初心者向け】スマホでAdSenseレクタングル大が、画面からはみ出さないようにするスポンサーリンクツイートシェアはてブ2Google+Pocket3現状、AdSenseがキレイに表示されるようにするとなると、広告サイズは以下のようになるかと思います。PC:レクタングル大(336×280)スマホ:レクタングル中(300×250)少し古いスマホ、仮にiPhone5s以前の機種で「レクタングル大」を表示すると、広告が画面外にはみ出してしまいます。スマホでも「レクタングル大」を設定したい場合があります。今回はCSS(スタイルシート)を使い、以下のように設定にします。「レクタングル大」と「レクタングル中」はどっちが良い?「レクタングル大」のほうが単価が高いレクタングル中よりも、大のほうが単価が高いです。「レクタングル大」を使用すると、「レクタングル中」サイズの広告も表示される大は小を兼ねるというわけですね。大を使用すると、中の広告も表示されます。出来ればレクタングル中よりレクタングル大を使いたいです。そもそもなんではみ出るのか「レクタングル大」よりも、スマホのブラウザ解像度が低い場合に、画面外に広告が飛び出してしまいます。スマートフォンには、実際の解像度の他に、ブラウザの解像度というものが設定されています。iPhone5sのブラウザ解像度は、「320px(ピクセル)」となっています。「レクタングル大」の横幅は「336px」と、iPhone5sのブラウザ横幅よりも大きいため、画面外にはみ出てしまうわけですね。※iPhone6以降では、ブラウザ解像度が上がったため、レクタングル大でもちゃんと画面内におさまります。今回はCSS(スタイルシート)を使い、以下のように設定にします。340px以上の解像度のブラウザだったら、レクタングル大の通常サイズ(336px)を表示する339px以下の解像度のブラウザだったら、レクタングル大の広告を300pxに縮めて表示する。「レクタングル大」が、画面外にはみ出さないようにする設定方法レクタングル大のAdSenseコードAdSenseでレクタングル大の広告ユニットを作成すると、以下のようなコードが発行されます。※隅付き括弧【】内は、ユーザーごとに違います。今回の修正では、ここはいじらないので気にしないでください。[]).push({});</script>AdSenseコード(HTMLファイル)の改造まず以下の一行を消します。style=”display:inline-block;width:336px;height:280px”次に『class=”adsbygoogle”』と記載されている部分に『ad_sp』を書き足し、以下のようなかたちにします。ad_sp”最終的に以下のようなかたちになればOKです。[]).push({});</script>スタイルシート(.CSSファイル)の改造スタイルシート(.CSSファイル)に、以下のコードを追記します。※WordPressをお使いでしたら、『管理ページ』⇒『外観』⇒『テーマの編集』を開き、「style.css」に以下を追記してください。280px;}}以上で設定完了となります。はみ出していた広告が、画面内に収まっているかと思います。注意(おまけ)ラージモバイルサイズなど、レクタングル大以外に上記の設定すると、頭の良いGoogleさんが自動的にレクタングル大の広告にしてしまいます。ラージモバイルバナー用の改造も書いておきます。ラージモバイルバナーも、横幅が320pxなので、場合によってはみ出てしまうことがあります。余白があったほうがデザイン的にもキレイなので、設定しておいて良いでしょう。ad_sp_Lmob”』とします。以下のかたちになっていればOKです。[]).push({});</script>先ほどと同じように、スタイルシート(.CSSファイル)に、今度はラージモバイルバナーようのコードを追記します。100px;}}これで、ラージモバイルバナーもキレイに表示されるようになりました。【解決】Thunderbird45でメールが送信できないRECOMMENDこちらの記事も人気です。2019年6月4日【円高・ドル安・ユーロ上...ガジェット2017.3.15IQOS(アイコス)買った。本数は今までのまま、紙タバコ吸わなくなった...PC全般2017.6.26【MacのEvernote】打ち消し線のショートカットお戯れ2017.7.7LINEスタンプ作ってみました。アート2016.8.16この夏どこへも出かけなかったあなたに。2019年6月14日お役立ち情報2016.7.11ハゲ予防はじめました。中二病、仙水忍(26)『高所恐怖ランキング』高所恐怖症じゃない。人間が作ったものが信じられないだけだ。決定版!薄毛・ハゲに効く本。