カスタマイズ

【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

更新日:

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法

こんにちは。SHINです♪

 

Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・

  • めんどくさい!
  • ややこしい!
  • むずかしい!
  • わからない!
  • 情報が少ない!

こんな理由で悩んでいませんか?

 

AFFINGER5なら簡単にアドセンスは横並び表示で設置できます♪もちろん他WordPressテーマでも、表示したい場所のウィジェットに「テキスト」をドラッグして挿入すれば、キレイに表示設置できますので安心してください。

 

さらに今回は、プラス横並び表示するアドセンスの下に「リンク広告」をセットでユニット表示する方法をお伝えします。

【広告ユニット完成イメージ 】

アドセンスリンク広告 (2)

 

では早速実装していきましょう。

 

Googleアドセンス広告コードを準備しよう

横並び表示用アドセンス広告コード取得方法

まずレクタングル広告(横2つ並び)用で「336 × 280」サイズの広告ユニットを準備します。

すでにこのサイズユニット広告があれば、飛ばしてくださいね。

 

step
1
GoogleAdSenseにログインして「広告ユニット」>「新しい広告ユニット」をクリック

アドセンス,広告作成

 

step
2
広告の種類は「テキスト広告とディスプレイ広告」で選択をクリック

アドセンス広告1

 

step
3
広告ユニットに分かりやすい名前を付けて「336×280 レクタングル大」を選び「保存してコードを取得」をクリック

アドセンス広告2

 

step
4
アドセンス広告コードが表示されたら、コピーしてメモ帳などに保存しておきましょう

アドセンス広告4

 

リンク広告コード取得方法

step
1
(横並び「レクタングル用広告」のステップ2までは一緒)ここで「リンク広告」>「レスポンシブリンク」を選んでコードを取得します

アドセンス広告5

同じように広告コードが表示されたら、メモ帳などに分かるように保存します。

これで広告コードの取得が完了。次に「ウィジェット」に行き、「テキスト」を使って広告ユニットを作成していきます。

 

ウィジェット内「テキスト」を使ってテキスト/イメージ広告を作る【AFFINGER5編】

step
1
「利用できるウィジェット」にある「テキスト」を選び、さらに「投稿記事の下に一括表示」を選んで追加します

 

step
2
追加した「テキスト」へ下記コードをテキストモードに切り替えてマルッと記述して「336×280アドセンスコード」という場所にアドセンスコードをコピペします

テキストへコピペするHTMLコード

<div class="clearfix responbox50 smart50"><div class="lbox"><p>336×280アドセンスコード</p></div><div class="rbox"><p>336×280アドセンスコード</p></div></div>

これで完了!簡単でしょ笑

では次に、ダブルレクタングル下に設置する横長の「リンク広告」を作っていきましょう。

 

ウィジェット内「テキスト」を使ってリンク広告を作る【AFFINGER5編】

step
1
テキストをもう一つ「投稿記事の下に一括表示」へウィジェット追加して、アドセンス「リンク広告」のコードをテキストモードに切り替えてコピペします

これで広告ユニット完成!下の画像のように、「投稿記事の下に一括表示」内へテキストが2つ入っている状態ですね。

ポイント

テキストは上下ドラッグして配置も換えられます♪またアドセンス広告は、これ以上は掲載しないようにしましょう。アドセンス広告を1箇所縦に掲載するのは「1種類~2種類まで」がベターです。

これ以上増やすと、クドい感じられて逆にCTR(クリック率)が下がるで要注意です!

 

まとめ

アドセンス広告の横並びは、ウィジェットの「テキスト」をフル活用すれば簡単に表示できます♪

また広告種類の違う「リンク広告」を設置することで、より強力なアドセンス広告ユニットが出来上がります。

 

今回はAFFINGER5のウィジェットを例に解説しましたけど、他WordPressテーマでも簡単に作れます。

ぜひ参考にしてみてください♪

ではまた(*´∇`)ノ

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】サイトアイコンとロゴ画像をかっこいいデザインに変更しよう!

こんにちは。SHINです♪   つい先日、やっとこさサイトアイコンとロゴ画像を変更!何がやっとこさかと言うと、気に入ったロゴ探しにかなり時間を費やしてしまった…! 記事を書くことが最優先のサ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【AFFINGER5】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。   AF ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-,

Copyright© WordPress theme NAVI , 2019 All Rights Reserved Powered by AFFINGER5.