2シェアする13154665LINE!4902566AdSenseには、レスポンシブ広告ユニットというものがあります。アドセンスいわく、このレスポンシブ広告は、利用可能なスペースに合わせて、サイズを自動的に調節して表示してくれるとのこと。この広告の存在を知ったとき、「これはいいな」と少し使ってはみたものの、パソコンなどでは、思ったような広告サイズが表示されず、すぐに利用を止めてしまいました。先日、ちょっとスタイルシートをいじれば、ある程度思い通りの広告サイズを表示できることに気づきました。以下ではレスポンシブ広告ユニットにおいて、「パソコンではレクタングル大広告」を「モバイルではレクタングル中広告」が、なるべく表示される簡単な設定方法を紹介したいと思います。詳しくサイズを設定するまとめレスポンシブ広告ユニットの難点レスポンシブデザインサイトにおいて、レスポンシブ広告は、スマホの場合だと、「レクタングル中」広告や「レクタングル大」広告が表示され、ある程度意図通りに表示されます。ある程度横幅のあるパソコンやタブレットで見たときは、バナー系の広告が表示されてしまいます。この本文カラム部分(横幅680px)にレスポンシブ広告タグを貼り付けたとすると、ほぼ以下のような468×60のバナー広告が表示されてしまいます。その他のサイズの広告が表示されることも稀にありますが、ほとんどの場合こういった横幅の長い広告が表示されてしまいます。パソコンなどで実際に表示させたいサイズただ、出来るならば、どこに表示させても、ある程度のパフォーマンスを出す336×280のレクタングル(大)広告を表示させたいところです。他のサイトで2日間ほどレスポンシブ広告コードを貼って実験したのですが、ある程度、横幅に余裕のある箇所にコードをそのまま貼り付けると、レクタングル広告が表示されることは一度もありませんでした。(※僕が見れなかっただけかもしれませんが)これを今回は、横幅のあるところに貼り付けても、「レクタングル(大)」広告が表示されるような設定にしたいと思います。上の方にも書きましたが、パソコンで表示させたときのように画面やカラムの横幅に余裕があると、レスポンシブ広告は「横長のバナー系の広告」を表示させてしまいます。「横幅(カラム)が広いのが原因なら、狭くしてやればいいんじゃないか?」と考え、試してみたら「レクタングル(大)」広告が表示されるようになりました。通常広告を貼るときは、以下のように広告タグをそのまま貼ると思います。-->ただ、今回はレスポンシブ広告表示領域の幅を狭くするために以下のようにタグを加えて貼り付けます。--></div>この、.responsive-unitクラス要素に対して、以下のようにスタイルを指定してやります。336px;}このように、横幅の上限を336pxに絞ってやることで、ほぼ「レクタングル(大)」広告が出るように誘導することができます。アドセンスが生成する広告コード自体のinsタグにクラスを追加しても同様のことを主なことができます。今回は無駄なコードを省いてわかりやすく書くために、上記のように書きました。[]).push({});</script>どちらの書き方でも良いと思います。実際はこんな感じで表示されると思います。「スマホではどうなるんだ?」と思われるかもしれませんが、iPhone3のような横幅320pxの画面幅で表示させた場合は、336px幅の「レクタングル(大)」の表示できないので、「レクタングル(中)」がちゃんと表示されます。画面幅が336px以上の広いスマホ端末で表示させると「レクタングル(大)」が表示され、横幅が300pxよりも狭い表示領域しかない場合は、それよりも「レクタングル(中)」よりも小さな広告が表示されます。広告の形を直接指定したい場合は、以下の記事が参考になると思います。アドセンスのレスポンシブ広告でPCとスマホで大きさを変える方法GoogleAdsense(アドセンス)を利用する場合、「レスポンシブ広告ユニット」を利用すれば自動でPC用とスマホ・タブレット用で広告の大きさを最適化することができます。このレスポンシブ広告ユニットを利用することで広告コードが1つですべてのデバイスの対応することができて非常に便利になります。これまでレスポンシブ広告...renga3.com大きさのイメージなどは、の広告サイズサンプルなどを参照してみてください。広告を中央表示する場合レスポンシブ広告を、カラムの真ん中、つまり中央表示させたい場合は、先程のスタイルシートに加えて、左右のマージンをオートに設定するだけです。auto;}やり方は、いろいろあるのかもしれませんが、僕の場合は、こんな感じで中央表示させました。詳しくサイズを設定する今回は、主に「レクタングル(大)」と「レクタングル(中)」をなるべく表示させる単純な例を書きましたが、メディアクエリなどを利用して詳細に表示をカスタマイズすることもできるようです。詳しい設定方法などは、以下の記事を参照してください。アドセンスのレスポンシブ広告でPCとスマホで大きさを変える方法GoogleAdsense(アドセンス)を利用する場合、「レスポンシブ広告ユニット」を利用すれば自動でPC用とスマホ・タブレット用で広告の大きさを最適化することができます。このレスポンシブ広告ユニットを利用することで広告コードが1つですべてのデバイスの対応することができて非常に便利になります。黒猫さんぽみちアドセンスのレスポンシブ広告ユニットを設置する方法を説明していきます。このブログが使っているテーマはStinger5なので、それを例にして手順を解説しています。レスポンシブ広告ユニットのサイズは728×90pxと320×100pxが切り替わるように設定し、それをトップページとアーカイブページ(カテゴリや月別アーnagoya-neko.comAdSense(アドセンス)でレスポンシブ広告ユニットのカスタマイズレスポンシブデザインでのアドセンス活用について調べていたら、レスポンシブ広告ユニットというのを使って広告コードをカスタマイズすると、レスポンシブデザインなウェブサイトに柔軟に対応できることを知りました。-...easyramble.com単に、「レクタングル(大)」と「レクタングル(中)」をメインに使うだけならば、今回紹介した方法で良いかもしれません。まとめこんな感じで、レスポンシブ広告だったとしても、ある程度表示させる広告を意図通りに表示させることができます。いうことで、「レスポンシブ広告ユニットで、レクタングル広告をメインに使いたい」なんて場合には、それなりに手軽で良いかもしれません。この設定を行ったからといって、必ずパフォーマンスが良くなるとは限りません。僕が行っている地味だけど効果のあったSEO内部対策3つ検索エンジン検索に引っ掛かる可能性や、検索順位に多少有利かもしれない内部SEO最適化のための設定方法です。Echoの主な機能を比較しました。上記の中で僕は、「AIアシスタント機能...記事を読むブログPV88%減...あれから1ヶ月、その後のPVは?謎のGoogleペナルティーにどう対処したか先月、Googleからの検索流入がシャットダウンされたことによりPVが88%減少したことを書きました。こんな感じになりました...記事を読む消滅した「Googleブログ検索」を意地でも使う方法いろいろGoogleのメニューから消えてしまった「ブログ検索」を、いろいろな手を使って利用する方法のまとめです。記事を読むググレカス!をソフトな感じにして相手を検索に誘導するURLサービス「LMGTFY」ちょっと自分で調べればわかるようなことを何度も聞いてくる友人や、同僚などに、「Googleという便利なものがあるよ」と優しく諭すサービスです。※使用機会は難しいです。記事を読むGoogleのサイト内検索で複数サイトをまとめて検索する方法いくつかのサイト内だけをまとめて検索する方法です。記事を読むブログを書くなら知っておきたいAdSenseポリシーNGになるコンテンツまとめ以前、ブログに記事を投稿した後1時間ほどして、AdSenseが記事に表示されないということがありました。近年、何か不祥事起こしたときに、自社のWEBサイトに画像で謝罪文を出す企業が増えてきました。「普通にテキストで文章をアップロ...記事を読むGoogleアドセンスとアナリティクスを連携する方法。AnalyticsとAdSenseの設定です。収益性の高い記事などを知ることにより、「どういった記事が儲かるのか」などを分析することができます。記事を読む政府機関や大学のような権威性の高いサイトからのみGoogle検索する方法Googleのオプション検索で大学や、学校法人、日本の政府機関のみから検索結果を抽出する方法も紹介です。ブラウザ用のプラグインを作成して、手軽に検索できます。記事を読むTV由来の大量アクセスが運んできたもの。エックスサーバーのアクセス制限対策。ID:8f3550913simplicity使わせてもらっています。この記事を参考にレスポンシブ広告をレクタングルで表示することができました。ありがとうございました。auto;」になっていました。単なるタイプミスだと思いますが、念のためレポートしました。ID:996fc8e18本当だ。完全にタイプミスってますね;記事の方修正しておきます。いった誤字は、自分では、まず気づかないので、本当に助かります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。使える会計ソフト「MFクラウド」は零細個人事業主には神ツールなのではないかコスパ無双サーバー「カラフルボックス」レビュー。CocoonSimplicityの後継テーマを作りました。Cocoonにて無料配布しています。Simplicityシンプルな無料Wordpressテーマを自作してみました。簡素好きな人におすすめ。Simplicityにて無料配布しています。Echoどちらがうまい返しが出来るか?アシスタント能力比較会。Miniを利用した方がいい人とは。方はサイトの始め方参照。