賢威7カスタマイズ一覧StingerXeoryお問い合わせHome賢威7.0賢威7:記事本文の後にアドセンス広告を横並び表示する方法(ダブルレクタングル)賢威7.0賢威7:記事本文の後にアドセンス広告を横並び表示する方法(ダブルレクタングル)こんにちは、ぶどうサワーです。サイトの閲覧ありがとうございます。今回の記事では、WordPressテーマ:賢威7サイトの記事本文の後に、広告を2つ横並びにする方法を紹介したいと思います。「ダブルレクタングル」なんて呼ばれたりもしているみたいですが、ブログサイトでよく見かけるやつです。広告を横に2つ並べたらクリック率が上がった!という話も聞いたりしますし、追加する広告コードを変えればアドセンス以外の広告も表示させることもできます。ここではテーマファイルを編集して広告コードを追加していくので、一記事ずつ広告コードを追加していく手間もかかりません。なんだかセールストークみたいになってしまいましたけど、自分的には結構オススメなカスタマイズなので、よかったら参考にしてみて下さい。読者の方から336✕280(レクダングル大)の場合について質問をいただいたので、336✕280のサイズでダブルレクタングルにする方法を追記しました。編集まずは個別記事(投稿)に広告を表示させる方法です。?>このコードの下に、以下のコードを追加します。下のコードにある「広告コード(300px*250px)」の部分には、広告を表示させるコードを入力して下さい。サイズが合えば、アドセンス以外のコードを入力しても大丈夫です。保存してページを読み込むと下の画像のようになりました。広告はどの個別ページにも表示されるようになりましたが、縦に2つ並んだ状態です。本文の後に広告を2つ表示させることができたので、今度はCSSファイルを編集して見た目を整えていきます。お使いのCSSファイルに以下のコードを追加します。}}保存・更新すると、広告が2つ横並びで表示されるようになりました。ブラウザの幅を狭めると、縦に中央配置されるようになります。PCサイズは左寄せ、それ以外は中央寄せにするには先ほどのコードは、PCサイズでもそれ以外でも中央寄せにしましたが、「PCサイズでは左寄せ」、「それ以外のサイズでは中央寄せ」にするには、先ほどのCSSコードを以下のコードで置き換えます。}}違いが分かりにくいかもしれませんが、左側の広告がTwitterや「タグ」と書かれた文字の左端に揃いました。ブラウザの幅を狭めると、先ほどと同じように中央配置されます。固定ページにも同じように広告を表示させるには今度は固定ページにも広告を横に2つ表示させる方法です。「方法」と言っても、個別記事でも固定ページでもテーマファイルはあまり変わらないので、ここでの編集内容は全く同じです。?>このコードの下に、以下のコードを追加します。下のコードにある「広告コード(300px*250px)」の部分には、アドセンスなどの広告を表示させるコードを入力して下さい。編集後これで固定ページにも同じようにダブルレクタングルの広告が表示されるようになりました。最後はPHPファイルを編集せずに、それぞれの記事ごとに広告コードを追加する方法です。この場合でも、PHPファイルを編集する場合とはコードを追加する場所が違うだけなので、広告を表示させたい位置で以下のコードを追加します。</div></div>上のコードを本文などに追加すると、下のような感じで横並びの広告を表示させることができます。336✕280(レクダングル大)を使用する場合2016年3月12日追記336✕280(レクダングル大)を使用する場合については余白がかなり狭くなってしまうので、下のように広告と広告の間の余白を広めに開けるコードを追加すると良いかもしれません。}}ちなみにメインコンテンツの横幅を広げるともっと横幅に余裕ができるので、336✕280のような大きめサイズでは下のような横幅を広げるカスタマイズもオススメです。良かったら試してみてください。今回のカスタマイズは以上です。最後まで閲覧ありがとうございました。PMいつも参考にしています。素晴らしいコンテンツで助かってます。今回の場合、表示させるアドセンス336✕280の場合はどのようにしたらよいでしょうか。今は1番最初のH2の上にダブルレクタングルにするのも流行っています。そちらのやりかたも教えて頂けると嬉しいです。さんコメントありがとうございます。336✕280の場合については、この記事に追記しておきましたので確認をお願いします。今は1番最初のH2の上にダブルレクタングルにするのも流行っています。確かに最近よく見かけますね。広告コードを一記事ずつ編集→追加する場合」で紹介しているコードを使ってもらえば大丈夫です。JavaScriptを使えば一記事ずつ編集せず一気に広告コードを追加できる気がするので、時間ができたら別の記事に書いてみようと思います。PM早速ありがとうございます!試してたらまた書き込みますね。※この書き込みは削除で構いません。さんお待たせしました。「一番最初のh2の手前に...」の記事が出来上がりました。賢威7:一番最初のh2タグの前にダブルレクタングルを表示させる方法また何かあればお気軽にコメントして下さい。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。