今回はワードプレステーマ「SWELL」でアドセンス広告のダブルレクタングルを記事下やトップページ下など好きなところに設置する方法を紹介します。
読者の中にはブログパーツでダブルレクタングルを作ってみたけど、公開ボタンを押したら「公開に失敗しました。返答が正しいJSONレスポンス対応ではありません。」が表示されてしまった方がいると思うので、そんな方向けの対照法についても紹介します。
また、ダブルレクタングル広告を中央に表示させる「CSSコード」も作ったのでぜひ使ってみてください。
SWELLでアドセンスのダブルレクタングルを設置するまでの流れ
上記のステップでアドセンス広告のダブルレクタングルを「記事下」に設置していきます。
ブログパーツでアドセンスのダブルレクタングルを
「ブログバーツ」＞「新規追加」をクリックします。
「リッチカラム」を作ります。
「リッチカラム」に「カスタムHTML」を2つ横並びに設置します。
Googleアドセンスから表示させたい広告コードを両方の「カスタムHTML」コピペし「公開」をクリックします。
エラーが出ずに無事ブログパーツを公開できた方は次の「記事下に作ったブログパーツを設置する」をお読みください。
エラーが表示された場合「公開に失敗しました。」
読者の中にはブログパーツの公開ボタンをクリックすると「公開に失敗しました。返答が正しいJSONレスポンス対応ではありません。」とエラーが表示され、公開できない場合があります。
このエラーの対処法として使用しているサーバーの「WAF」をブログパーツを公開するときだけ「OFF」にすることで、エラーを対処できる可能性が高いと思われます。（私の場合はこれで解決できた！）
「Conohaサーバー」を使用している場合は「サイト管理」＞「サイトセキュリティ」＞「WAF」>「利用設定」を一時的にOFFにしてブログパーツを公開します。
必ずブログパーツを公開した後で「ON」に戻すのを忘れないようにしましょう。
恐らくこれで、エラーなくブログパーツを公開できるはずです。
記事下に作ったブログパーツを設置する
アドセンス広告のダブルレクタングルのブログパーツを公開できたら「呼び出しコード」をコピーして、「外観」＞「カスタマイズ」からブログパーツを記事下に設置します。
「カスタマイズ」を開いたら、投稿ページの「ウィジェット」＞「記事下部」に「カスタムHTML」を追加し先ほどコピーしておいたブログパーツをペーストします。
そして「公開」をクリックすれば無事、記事下にダブルレクタングのアドセンス広告が表示されているはずです。しかしながら、アドセンス広告が「左寄りに表示」されてしまっているので「追加 CSS」で広告が中央に表示されるようにカスタマイズします。
追加CSSにコピペ
.swell-block-columns__inner{
text-align: center;
}「追加 CSS」に上記のCSSコードをコピペすれば、ダブルレクタングのアドセンス広告が中央表示されるようになります。
これでダブルレクタングルの設置は完了です！
ブロガー必見！ブログ×プログラミングは相性抜群
ブログ運営しているとプログラミングに興味が湧いてくる方が多いはずです！
けど、プログラミングに一度も触れたことがない方にとって「難しいから自分にはどうせプログラミング無理」と思ってしまっている方がほとんどだと思いますが、実際は違います。
３日あればブログ運営に必要なプログラミングスキルは身につきます！
「嘘でしょ！」と思うかもしれませんが、私を含め一般的なブロガーに必要なプログラミングスキルとは、本記事でも紹介した「CSS」だけでなので早い人なら1日、長くても3日あれば基本的なCSSのスキルは習得できます。
また、プログラミングを知ることで「高単価案件」プログラミングスクールのアフィリエイト記事が書けるようになるのでブログネタを作るのにも役立ち「一石二鳥」です！
こんな感じのアフィリエイト記事が書ける↓
読者の方で「プログラミングとは何か？」「効率的な学習方法は？」など気になる方はプログラミングスクールの無料カウンセリングで相談してみるのがオススメです！
私は現時点で8つのプログラミングスクールの無料カウンセリングで話を聞いてきましたが、優良プログラミングスクールではカウンセラーさんの対応が丁寧で何度も質問できるので情報収集をするのにとても重宝しました。
未経験者で教養（ブログのため）でプログラミングを学ぶことに興味がある方は「侍エンジニア塾」または「テックアカデミー」の無料カウンセリングで話を聞いてみるのがオススメです！
