WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER3」の広告位置をプチカスタマイズ

      2015/06/01

STINGER3

出典:http://stinger3.com/

当ブログは、検索エンジン最適化(SEO)に強いと言われているWordPressテーマ「STINGER3」を使用しています。

また、別ブログの「俺の開発研究所」でも、よりアクセスアップを目指すべく、先日WordPressのテーマを「STINGER3」へと変更しました。

今回は、そのWordPressテーマ「STINGER3」のレイアウトを確認しつつ、少しカスタマイズしたいと思います。

なお、今回のバージョンは以下です。

  • WordPress 3.9
  • STINGER3_ver20140327

スポンサード リンク

「STINGER3」のデフォルトのレイアウト(PC)

まずは、WordPressテーマ「STINGER3」のレイアウトを確認してみる。

PCの場合の、投稿ページのレイアウトはこちら。

STINGER3 レイアウト

最もクリック率が高いと言われる「右上」、「記事下」と、そのもう少し下の3箇所にGoogle AdSenseが配置されるようになっている。

なお、スクロール広告にGoogle AdSenseを配置するとポリシー違反となるので、Amazonなどの広告を利用しよう。

ここで、カスタマイズしたい箇所の1つ目。

Google AdSense②、③の箇所の広告が、左揃えになっているので、中央揃えにしたい。

「STINGER3」のデフォルトのレイアウト(スマートフォン)

スマートフォンの場合の、投稿ページのレイアウトはこちら。

STINGER3 レイアウト

「記事下」と、そのもう少し下の2箇所にGoogle AdSenseが配置されるようになっている。

ここで、カスタマイズしたい箇所の2つ目。

スクロール広告①は、PCの場合と同様のものが表示されるので、幅336pxを設定していればスマートフォンの場合は少し大きすぎる。

なので、PC/スマートフォンで広告の表示を切り替えたい。

「STINGER3」の広告表示の仕組み

Google AdSense、Amazonなどのスクロール広告は専用のウィジェットに設定するだけで、上記で説明した効果の高い各位置に設定されるような作りになっている。

「外観」⇒「ウィジェット」より、以下の設定画面へ。

STINGER3

各ウィジェットと設定される位置の組み合わせは、以下である。

  • 「スクロール広告用」…PC/スマートフォンのスクロール広告①
  • 「Googleアドセンス用」…PCのGoogle AdSense①~③
  • 「Googleアドセンスのスマホ用width300」…スマートフォンのGoogle AdSense①~②

カスタマイズ1(Google AdSenseの配置を中央揃えに)

では、本題の「STINGER3」のカスタマイズへと入ろうと思う。

中央揃えにするのは至って単純。

以下のように、「Googleアドセンス用」にテキストウィジェットを追加し、設定する値にセンタータグ(

)を使用し、中央揃えにする。

STINGER3

カスタマイズ2(スクロール広告をPC/スマートフォンで切り替え)

PC/スマートフォンでウィジェットを切り替えるには、WordPressプラグイン「Widget Logic」を使用すると、簡単に行うことができる。

「Widget Logic」の使い方についてはこちらの記事参照⇒WordPressプラグイン「Widget Logic」でウィジェット単位で条件分岐

WordPressテーマ「STINGER3」では、「functions.php」(テーマのための関数)で用意されている「is_mobile()」関数を使用すれば、PC/スマートフォンを判定できる。

以下のように「スクロール広告用」にテキストウィジェットを2つ追加し、PC/スマートフォン用で使い分ける。

PC用は、幅336pxの広告で、条件に「!is_mobile()」を設定。

スマートフォン用は、幅300pxの広告で、条件に「is_mobile()」を設定。

STINGER3

なお、当ブログでは、PC用はAmazonのお買い得ウィジェットを。

スマートフォン用は、Amazonのお買い得ウィジェットが正しく表示されなかったので、AmazonのAmazonおまかせリンクを使用している。


「STINGER3」の新レイアウト

これまでの設定で、「STINGER3」の新レイアウトは以下のようになりました。

PCの場合はこちら。

STINGER3 レイアウト

スマートフォンの場合はこちら。

STINGER3 レイアウト

以上です。

 - STINGER3