2018年11月1日こんにちは、ボム君です。はてなブログでアドセンス広告を貼っている方の場合、こんなことで悩んだことありませんか?記事下の広告の種類をPCとスマホで表示を切り替えたいPCで表示するが、スマホでは表示したくないスマホでは表示するが、PCでは表示したくないこんな方のために、今回ははてなブログの方を対象にPCとスマホで記事下アドセンス広告の種類を切り替える方法を教えますね。手順4:編集済みコードを記事下設定にコピペ手順5:デザインCSS設定に以下をコピペ完成時イメージ最初に完成時のイメージを見せておきますね。私のブログでは今Adsense広告の貼り方は以下のような設定にしています。記事下にPC版ではダブルレクタングル、スマホ版ではレスポンシブって感じですね。いいでしょ?PC版PC版はこのように記事下に300×250のサイズの広告を横並びで2つ貼っています。スマホ版スマホ版は記事下にレスポンシブ広告を貼っています。※レクタングルと同じ位のサイズが表示されていますが、レスポンシブ広告を設定しています。設定の仕方はてなブログの設定は以下の箇所を変える必要があります。広告ユニットの準備デザイン変更:記事下デザイン変更:デザインCSSそれじゃすごくていねいに解説していきますね。いくぜ!手順1:広告準備まずは設定するための広告を準備しましょう。今回使用するのは以下の3つのタイプの広告です。レクタングル(300×250)1つ目レクタングル(300×250)2つ目レスポンシブレクタングルの2つの広告がPC用、レスポンシブの広告がスマホ用になります。広告作成はアドセンスの画面から作成してください。次の画面からレクタングルの広告を2つ、レスポンシブの広告を1つ作成してくださいね。レクタングルの広告を作る時はこちらを選択し、保存してコードを取得ボタンから広告を作成。↓レスポンシブの広告を作る時はこちらを選択、保存してコードを取得ボタンから広告を作成。↓これで以下の3つの広告が作成できていれば広告準備はOKです。以下の挿入用のコードを一旦エディタ(メモ帳等)にコピーしてください。次は手順2でエディタ(メモ帳等)にコピーした挿入用コードを編集していきます。手順2のコード内の以下の文字列の箇所をアドセンスコードで置換してください。ここに1つ目レクタングルのアドセンスコードを入れるここに2つ目レクタングルのアドセンスコードを入れるここにレスポンシブのアドセンスコードを入れる広告ユニットの準備の際にレクタングル広告×2、レスポンシブ広告×1を作成したはずなので、各々のアドセンスコードこ対してコピペしてくださいね。コードの場所はここをクリックしこのコードをコピーして使ってください。次に、スマホとPCで表示を切り替えるようにおまじないコードを追記します。↑でコピペした3つのアドセンスコードを以下のように修正します。今回の場合、PC版はダブルレクタングルでスマホ版はレスポンシブという表示のため、PC版ではレスポンシブ広告を非表示にするようにおまじないを追記します。レスポンシブ広告のアドセンスコードを以下のように修正します。class="synConstant">"adsbygoogle"</span>この部分のコードを以下のように変更する。widedisplay"</span>PC版で非表示にしたい広告へおまじない追記スマホ版ではPC版と逆で、ダブルレクタングル広告を非表示にするようにおまじないを追記します。レクタングル広告各2つのアドセンスコードを以下のように修正します。"</span>この部分のコードを以下のように変更する。mobile"</span>手順4:編集済みコードを記事下設定にコピペ編集が終わったら、はてなブログの設定画面の以下の箇所にコピペしてください。手順5:デザインCSS設定に以下をコピペデザインCSS設定で以下のコードをコピペしください。class="synIdentifier">}</span>※内容としては画面サイズに応じて表示・非表示を切り替えるためのコードです。ディスプレイサイズが680Pixelより上か下かで切り替えてます。デザインCSSここ↓この手順が終わったら、変更を保存しPCとスマホそれぞれで表示を確認してください。最初の画面イメージのような表示になっていればOKです。ブロガーボムクン技術系ブログを中心とした雑記を書いています。