Kanamii

伝えたい想いを自分らしく・・・

kanamii-2150-1

スポンサーリンク

STINGERカスタマイズ

【STINGER PLUS】記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法

2016/12/05

STINGER8・AFFINGER4でのカスタマイズ方法を追加しました。

ブログ記事を作成している途中に、「ここにこんなカスタマイズを入れてみたいなぁ。」とふと感じることがあります。

「それよりも中身でしょっ!」って自分にツッコミを入れるんですが、やっぱり色々と『見た目』を変えるのが好きなんですね。

欲望のままに行動すると、まるで「散らかった部屋」のようなページになってしまいますので(笑)、それでもかなり我慢しつつ。

今回は、記事下のアドセンス(レクタングル大)を横並びに配置するカスタマイズに挑戦してみました。

カスタマイズ後、パソコンとタブレットでは横並びに「レクタングル大(336×280)」が2つ、スマホでは「レクタングル中(300×250)」が1つ表示されるようになります。

カスタマイズにあたり、Twitterでお世話になっている 鳥取もん様 @tottorimon のブログ記事を参考にさせていただきました。

STINGER標準のアドセンス用ウィジェットをそのまま利用できるようにカスタマイズされたPHPコードを公開して下さっているので、大変助かりました。
また、記事作成をご快諾下さり本当にありがとうございます。

STINGER PLUSでアドセンスを横並び(ダブルレクタングル)にする方法

文末では、さらに追加のカスタマイズとして、サムネイル付きのページナビゲーションについてもご紹介します。

スポンサーリンク

ウィジェットへのアドセンスコード追加

まずは事前準備として、WordPressダッシュボード→外観→「ウィジェット」をクリック→「広告-Googleアドセンス用336px」と「広告-Googleアドセンスのスマホ用300px」内に、左側にある「テキスト」をドラッグ&ドロップして各サイズのアドセンスコードをそれぞれ追加しておきます。

スマホ用のみ広告がセンタリングされるように指定する場合は、下記のようにコードを追加します。
左寄せで表示する場合は、アドセンスで取得したコードをそのままペーストすればOKです。

記事エリアの横幅変更

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

次に、アドセンスのレクタングル大(336×280)に合わせてパソコン表示のみ記事エリアの横幅を広げます。

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加してください。

STINGER PLUSの場合

STINGER8の場合

AFFINGER4の場合

AFFINGER4の場合は、WordPressダッシュボード→外観→カスタマイズ→「基本エリア設定」→「PC時の記事エリアの幅を広げる」の指定が優先されてしまうのでそのままのコードは反映されません。

kanamii-2150-as-1

なので、追加したコードの優先順位をさらに上げるために「!important」を追加します。
もしくは、「PC時の記事エリアの幅を広げる」にチェックを入れて、テーマ側でコンテンツ幅を700PXに設定します。(この場合は下記コードの追加は不要です。)
左右の広告のバランスを見てお好みで選択してくださいね。

デフォルトでは、記事エリアの横幅は640PX。余白は「上下:30PX」「左右:50PX」となっています。

今回のカスタマイズで、幅336PXのアドセンス広告を2つ、間の余白を10PX入れるように計算すると、必要な記事エリアの横幅は682PXとなりますので、左右の余白を21PXずつ減らして「29PX」に変更しました。

・・計算。合ってますか?(笑)

さらに、当ブログのように投稿記事の最上部にアイキャッチ画像を表示している場合に記事エリアの余白を変更すると、アイキャッチ画像が左右にはみ出してしまいますので、アイキャッチ画像の左右の余白もデフォルトの「-50PX」から「-29PX」に変更しました。(STINGER8を除く)

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

single.phpの編集

STINGER PLUSの場合

WordPressダッシュボード→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「広告枠」と入力してマークされる部分、<!-- 広告枠 --><!-- /広告枠 -->内のコードを<?php /**/ ?>で囲んでコメントアウト。(削除せず、コメントアウトしておくとコードを元に戻したくなった場合に便利です。)

kanamii-2150-2-2

さらに、<!-- /広告枠 -->のすぐ下に、下記コードを追加しました。

「スポンサーリンク」のラベル表記以下は、参考サイト様に掲載されているコードをそのままコピーさせていただいています。

STINGER8の場合

広告表示の指定先となる「st-ad-on.php」を編集する方法もありますが、ここではより簡単に「single.php」に直接コードを追加するカスタマイズ方法をお伝えしています。

WordPressダッシュボード→テーマ→テーマの編集→「single.php」を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「広告」と入力してマークされる部分の<?php のすぐ後ろに //(半角)を入力してコメントアウト。

そのすぐ下に下記コードを追加します。

STINGER8でこのコードを利用すると「スポンサーリンク」のラベル表記が自動で挿入されます。
デフォルトのラベル表記をお使いの場合は、5行目の<!-- 広告枠 -->以下をコピーペーストしてください。

下記コードの下に追加すると、ソーシャルボタンの下に表示させることも可能です。

自動挿入される「スポンサーリンク」のラベル表記を消す方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-ad.php」を開きます。

下記のコードを、<?php /**?>で囲んでコメントアウトするとラベル表記を消すことができます。横並びのアドセンスそれぞれのラベル表記ではなく、中央に1つだけ表示させたい場合にお試しください。
(投稿ページ・固定ページの他の場所にショートコードを使って追加したアドセンスのラベル表記も非表示となりますのでご注意ください。)

AFFINGER4の場合

AFFINGER4でsingle.phpの編集をする場合は、子テーマに「single.php」と「single-type1.php」の2つのファイルをアップロード(コピー)します。
さらに、「single.php」内の下記コードを2か所編集してください。

編集前(TEMPLATEPATH)

編集後(STYLESHEETPATH)

こちらの対処法については、下記ページを参考にさせていただきました。
ありがとうございます。

▶Affinger4で子テーマを使って個別記事をカスタマイズしても反映されない時の対処法 | なちブ〜living freely〜

AFFINGER4の場合は、「single-type1.php」に広告を指定するコードがあります。
デフォルトの広告コードのコメントアウト方法と追加箇所はSTINGER8と同じですが、追加コードはSTINGER PLUSのラベル表記がつかない方を使用できます。

・・わかりにくいですね・・(笑)

もう一度同じコードを載せておきます。

アドセンス表示のスタイルの指定

STINGER PLUS・STINGER8・AFFINGER4共通

WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加。

参考サイト様に習い、広告の下に40PXの余白を入れ、左右の広告を左寄せ、右寄せに配置。

当ブログの場合は、パソコンとタブレット(スマホ以外)で、レクタングル大のアドセンス広告を横並びに表示させるようにしました。

各端末での表示確認をパソコン(Google Chrome)で行う方法は下記ページ内で説明しています。

▶パソコンでレスポンシブサイトのスマホ表示を確認する方法

また、「端末別サイズのアドセンスをアイキャッチ画像の下・見出し(h2)の前・記事下中央に1つだけ配置する方法」は下記ページをご参照ください。

【STINGER PLUS】アドセンスをアイキャッチ画像の下・見出し(h2)の前・記事下に設置する方法

さらに追加のカスタマイズ

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。

アドセンス表示とは無関係ですが、さらに追加のカスタマイズ記録です。

前の記事と次の記事へのページナビゲーションをサムネイル付きの表示に変更しました。

kanamii-2150-3

こちらのカスタマイズ、度々見かけることはあったのですが、「テーマの仕様かプラグインなのかな?」と思っていました。

ところがびっくり!
主婦の方が独自に公開されているカスタマイズ方法なのですね。
感動・・♪

参考にさせていただいたのはこちらのページです。
ありがとうございます。

▶【WordPress】前の記事・次の記事にサムネイル画像を表示する - shufulife

スタイルをほんの一部ですが変更させていただいたので、当ブログでの表示例としてstyle.cssに追加したCSSコードのみを掲載させていただきます。
※single.phpに追加するコードは、参考サイト様にてご確認ください。

STINGER PLUSでの、single.phpの編集箇所がわかりにくいというご指摘がありましたので追記します。
当ブログでは、下記<!--ページナビ-->以下、<!--/post-->直前までのコードを<?php /**/ ?>で囲んでコメントアウト。その直後に新しいコードを入れています。

kanamii-2150-4

全体のスタイル

ホームへのアイコンフォントの背景色とマウスホバー時の背景色を変更しました。

端末ごとのスタイル

スマホ表示時のサムネイルを左右寄せにしてタイトルの文字の回り込みを解除、余白を調整しました。

以上、STINGER PLUS 追加のカスタマイズとして、記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに表示する方法とサムネイル付きページナビゲーションのスタイルについてご紹介しました。

最後までお付き合い下さりありがとうございます。

そして、カスタマイズのヒントを下さった、鳥取もん様、ちゅんこ様へ、この場をお借りして心より感謝御礼申し上げます。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ