【AFFINGER4】アドセンスの広告が横並びにならない時の対処方法

スポンサーリンク

【AFFINGER4】アドセンスの広告が横並びにならない時の対処方法

 

以下の記事でもご紹介しましたが、

有料テーマを買ってみた!【AFFINGER4】
WordPressで作成したサイトを簡単かつデザイン性のあるものにすることができる「テーマ」ですが、無料で利用できるものと有料で利用できるものがあります。 そんな有料で利用できるテーマ、いわゆる「有料テーマ」を購入して...

つい先日、WordPressの有料テーマの一つ「AFFINGR4」を購入しました。

さっそく、当ブログのテーマに適応してみたところコンテンツ下部に表示されるPC用のアドセンス広告が横並びにならない現象が起きました。

この現象については、「AFFINGER4」の公式ホームページでも触れていましたが、

公式の方法では解決することができませんでした。

 

そこで、CSSで自前で修正をしましたのでご紹介します。

※広告の載せ方は今回は紹介しません。「AFFINGER4」の公式ホームページに記載されてますので参考にしてください。

 

スポンサーリンク

詳しい現象と完成イメージ

 

現象

現象

投稿した記事の下のほうに表示される広告が縦並びになってしまっています。

 

完成イメージ

完成イメージ

このように、よくある横並びに修正できました。

 

解決方法

解決方法

 

手順1 幅を広げる

 

AFFINGER4」の公式ホームページを見たところ、

コンテンツ(投稿の本文)の幅がデフォルトでは少し狭いので広くしてください。

と記載されていたので、まずは幅を広げます。

 

AFFINGER4 管理を選択してください

ダッシュボードから「AFFINGER4 管理」→「AFFINGER4 管理」を選択してください。

 

サイト全体の設定をクリックしてください

上部に目次が表示されますので「サイト全体の設定」をクリックしてください。

 

PC閲覧時のサイトの幅に1114と入力

PC閲覧時のサイトの幅」の入力個所に1114以上を入力してください。

今回は、1114pxで行います。

入力できたら、「Save」ボタンをどこでもいいので押してください。

 

これで、記事本文の幅が広くなりました。

 

が…横並びになっていない…

公式にはなるって書いてあるんだけど

 

仕方がないので次です。

 

手順2 CSSを追加する

 

必ず子テーマで行ってください

 

テーマの編集を選択してください。

ダッシュボードから「外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)を選択してください。

右のほうにある「スタイルシート(style.css)」を選択してください。

 

/*media Queries PCサイズ(960px以上)
—————————————————-*/
@media print, screen and (min-width: 960px) {

上記のコードの直後に以下のコードを追記してください。

 

 

.adbox .textwidget:first-child { margin-right: 22px; }

の部分は、設定したコンテンツの幅に合わせて適時設定を行ってください。

 

追記ができたら「ファイルを更新」を押せば完成です。

 

ちょっとしたこと

 

アドセンスの広告を追加するウィジェットに「カスタムHTML」をドロップしてと記載されていますが、テキストでないと動作しません。

 

他のテーマでもちょくちょく見かけますがアドセンスはJavaScriptなので 「カスタムHTML」では保存できません。

 

アドセンスのコードは「テキスト」ウィジェットを使う

まとめ

 

AFFINGER4」を適用してすぐに

広告が横並びにならない

現象にぶち当たりましたがすぐに対応できるもので助かりました。

 

稼ぐサイトの設計図(PDFマニュアル)+AFFINGER4」購入は以下から可能です。↓

コメント