「駅メモ!」もしかして普通に課金しているの?

【広告を2つ横に表示】ワードプレス「SANGO」の広告をダブルレクタングルにする方法

こんにちは、ロイです。この度ワードプレスのテーマを初めて変更し、今話題の「SANGO」にしました。デザインはもちろん最高ですが、表示速度とか豊富なショートコードなどあり、大変満足に使用させてもらっています。「サルワカ」さんありがとうございます!

カスタマイズしているうちに思ったのはこれ!

PCの記事コンテンツ下に広告を2つ横に表示させたいんじゃ!

そこで今回は私のようなWeb初心者やワードプレスに詳しくない方でもわかるようGoogleアドセンスの広告をダブルレクタングルで表示する方法を解説したいと思います。

僕自身今まで、「シンプリティ」という無料テーマを使っておりダブルレクタングルのウィジェットのがあったので簡単にできていました。しかし「SANGO」はダブルレクタングル用のウィジェットはありません。リリースされてまだ日が浅いので情報がなく苦労しましたが、ようやくできました。

MEMO
サーバーとかファイルの編集は必要なし!全てWordPress内でコピペだけで出来ます。初心者から苦手な人までわかりやすく解説しているので安心してください。

それでは、行きます!

ウィジェットを追加しよう


ウィジェットを追加する画面は画像の通りこの場所にあります。

ウィジェットの左側の利用できるウィジェットに「テキスト」があります。(結構下の方なのでスクロールして探しましょう)「テキスト」をクリックしてください。するとスクルール画面が出て来ます。その中に「記事コンテンツ後広告(PC)」があるのでそれをクリックしましょう。

最後に「ウィジェットを追加」のボタンがあるのでそこをクリックしてください。

クリック順番
  1. テキスト
  2. 記事コンテンツ後広告(PC)
  3. ウィジェットを追加

広告が2つ横に並ぶためのコードをコピペしよう

Googleアドセンスの広告をただ2つコピペするだけではPCで見たときに横に表示されません。なのでブラウザに「横に表示してください〜」っていう事を伝えるコードが必要になってきます。まずはこのコードをコピペします。

MEMO
なぜコードがいるのか?

ブラウザはhtmlやcssなどのコードを記述しなければ理解してくれません。なのでブラウザに「横に表示してください〜」っていう事を伝えるコードが必要になるのです。

テキストウィジェットのテキストにこのコードをコピペしましょう。そのまま間違ってビジュアルにコピペしてしまう人もいるので、必ずテキストにコピペするようにしてください。

先ほど追加したテキストウィジェットにコピペしてください。

コード
[yoko2 responsive]
[cell]AdSense広告1[/cell]
[cell]AdSense広告2[/cell]
[/yoko2]

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

PC表示の広告サイズはレクタングル大の336×280サイズを用意しましょう。PCサイトだとだいたいはこのサイズで合うはずです。僕のサイトでもこのサイズを使用させてもらってます。

クリック順番
  1. Googleアドセンスのホーム
  2. 広告の設定
  3. 広告ユニット

の順番でクリックしてコードをコピーしてください。

まだ「レクタングル大336×280」の広告ユニットがない人は新しく作っておきましょう。

すでに広告ユニットがある方はやらなくていい作業です。ここは読み飛ばしましょう。

クリック順番
  1. 広告の設定
  2. 広告ユニット
  3. 新しい広告ユニット
この順番でクリックして作成してください。できたら広告コードをコピーしておきましょう。

 

テキストウィジェットに広告コードをペーストしよう

AdoSens広告1
の間に先ほどコピーした広告コードをペーストしてください。広告は2つあるのでもう1つの
AdoSens広告2
の間にも同じコードをペーストしてください。

最後に更新をクリックしてください。

注意
ペーストする前にコードの間の「AdoSens広告1」と「AdoSens2」は消してから広告コードをペーストしてください。

タイトルは何でも構いません。私は「スポンサーリンク」にしています。

広告が2つ横並びになっているか確認してみよう。

 

お疲れ様でした。これで、ダブルレクタングルの作業は終了です。

最後に、しっかりと広告が横に2つ表示されているのか記事を更新して見てみましょう。広告の表示には時間がかかる場合もあるので、広告が表示されてない時は時間を置いて再度確認してみてください。

どうでしたか、以外とあっさり終わったのではないでしょうか?テーマによっては直接コードに難しいコードを記述しなければいけないのもあるので、このやり方はすごく簡単な方法です。そういった意味でも「SANGO」は使いやすいテーマだと言えます。

参考サイト
ダブルレクタングルの作成方法は「マサオカブログ」を参考にしています。僕も含めてワードプレスの「SANGO」のテーマのカスタマイズをしようと思ったらめちゃくちゃわかりやすいのでおすすめです!「SANGO」の解説サイトといっても過言ではないぐらい記事が充実しています。
参考

SANGOテーマのカスタマイズマサオカブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)