WordPressで広告を横並び（ダブルレンタグル）にする簡単な方法

WordPress（賢威８テーマ）でアドセンス広告を横並びにしたくて、色々調べながらやってみたんですが・・・全然うまくいかないんです。プラグインを使わずにPHPやCSSへのコード追加でアドセンス広告を追加したいんですが、どうしたら良いですか？

アドセンス広告などを横並び（ダブルレンタングル）にするためのコードを追加方法は、意外とシンプルなので一緒にやってみましょう！！

色んなブログを見ていると、記事下や記事の中でアドセンス広告を横並び（ダブルレンタングル）にしている事が多く見られます。もちろん、ブログによって様々ですが、横並びにしているブログは多いですね。

そんな中、上記のようなメッセージを頂きましたので、ブログにて共有する事にしました。

この記事ではWordPressでアドセンス広告を横並びにするためのコードを記載するとともに、更に賢威８での設置方法を詳しく記載します。

はじめに

今回、この記事で私が紹介する方法は「このブログでは、こんな方法を使ってますよ」という、いくつもある方法の内のひとつです。ブログを運営する人によって、広告を横並びにする方法（コード）は様々ですので、あくまでも”方法のひとつ”と捉えてください。

広告を横並びにする時の注意点

アドセンス広告を横並びにする時に注意しなくてはいけないのが、コンテンツの横幅です。

横並びで設置するアドセンス広告の横幅は、少なくとも300pxは欲しいところです。更に、最近は横幅336pxと言うのが主流になっていますから、２つ並べると672pxになります。しかもアドセンス広告の場合は、広告どうしが近すぎたりくっついたりする事はNGですので、広告と広告の間は20px程度はあける事になりますし、左右の余白も欲しいところです。そうなってくると、コンテンツの横幅は最低でも700px必要です。

もしも、あなたのブログのコンテンツ幅が狭い場合は、横並びの広告設置の際に注意が必要ですので確認をしておきましょう。

また、パソコンでは横並びの広告表示で問題なくても、スマホでは横並びにしている広告は縦に２つ並ぶ事になります。現在のアドセンスのルールでは、これも問題ではないのですが、ユーザビリティを考えるとスマホなどのモバイルの場合は表示する広告を１つにする方が良いでしょう。

今回はパソコンでは広告を横並びに表示、スマホでは広告を１つにする方法で解説していきます。

WordPressで広告を横並びにする方法

WordPressでアドセンス広告を横並びにするためのコードは、これがシンプルで初心者さんにもわかりやすい方法ではないでしょうか。下記のコードをアドセンス広告を横並びに設置したい場所に貼り付けるだけです。

基本的にアドセンス広告を横並びに設置したい場所は、記事中か記事下が一般的ですのでsingle.php（個別ページ）の希望箇所にコードを貼りつければOKです。テーマによってはsingle.phpという名称では無い場合もありますので、その辺りは各テーマの該当phpに貼り付けてください。

「ここにスマホ用広告コード」の部分にはスマホ用のアドセンス広告コード、「ここにPC左側用広告コード」「ここにPC右側用広告コード」の部分にはパソコン用のアドセンス広告コードを貼ります。

アドセンス広告の作成については下記を参考にしてください。

アドセンス広告のおすすめサイズと作成方法

アドセンス広告のおすすめサイズ

アドセンス広告を横並びにする場合、広告のサイズを指定しましょう。良く分からない場合は、パソコン用「幅336px・縦280px」、モバイル用「幅300px・縦250px」が一般的ですので参考にしてください。

アドセンス広告の作成方法

1. グーグルアドセンスから「広告」→「広告ユニットごと」→「ディスプレイ広告」を選択します。




2. タイトルはわかりやすいように任意で付けます。ブログ名と使用場所を記載するとわかりやすいです。

例：Decolabox（記事下）



3. 広告サイズを「固定」にして、パソコン用であれば『幅336px・縦280px』、モバイル用であれば『幅300px・縦250px』を指定して、「作成」をクリックします。




4. 広告のコードが表示されます。

賢威８の記事下に広告を横並びに設置する方法

今回は記事の下、SNSボタンの上に広告を横並びに設置する方法を解説します。phpを触りますので、バックアップを忘れないようにしてください。また、賢威８では子テーマを使用してのカスタマイズを推奨されていますので、子テーマを使用してのカスタマイズを前提に説明していきます。

1. まずは賢威8の親テーマの「template-parts」ディレクトリから「content-post.php」をコピーします。
2. コピーした「content-post.php」を開いて、下記の部分を探します。
3. ②のコードの下に下記を追加します。
下記の要領で自分のアドセンス広告コードを貼ります
・「ここにスマホ用広告コード」→「スマホ用のアドセンス広告コード」
・「ここにPC左側用広告コード」→「パソコン用のアドセンス広告コード」
・「ここにPC右側用広告コード」→「パソコン用のアドセンス広告コード」
4. FTPを使って、子テーマに「template-parts」ディレクトリを作成します。

既に子テーマの中に「template-parts」があればこの作業は必要ありません。

5. 作成した「template-parts」ディレクトリの中に、上記で編集した「content-post.php」をアップロードします。
6. ブログを更新して、広告が表示されている事を確認してください。

この時点で、広告の周りに枠線が表示されている場合は、更に下記の作業をしてください。

7. 次にCSSをカスタマイズします。「カスタマイズ」→「追加CSS」を選択します。




8. 追加CSSの一番下に下記のコードを追加して「公開」してください。
9. ブログを更新して、広告の表示が綺麗になっている事を確認出来たら完了です。

まとめ

賢威８の場合は「content-post.php」に下記のコードを貼りつけて、

追加CSSに下記を追記します。

これで、WordPressで広告を横並び（ダブルレンタグル）に設置する事ができます。難しいコードではなく、シンプルにしていますのでわかりやすくなっているとは思いますが、不明な点がありましたらコメントくださいね。




合わせて読みたい