WordPressテーマStinger5に施した事まとめ!(備忘録)

こんにちは、管理人の@ha_takedenです。
今までお気に入りのテーマ”Stinger5″を色々カスタマイズしてきたので、備忘録的にこちらにまとめてみたいと思います。


slooProImg_20140914130407.jpg
photo credit: Peregrino Will Reign via photopin cc

スポンサーリンク

そもそもカスタマイズした所‼︎

まずは、Stinger5 ver20140902を使用してきましまが、ver20141227が出ていましたのでそちらを使用してみたくなりました。
こちらのサイトは、子テーマを使用していないので、PHPやCSSを直接編集している為、テーマ更新の際に度々修正するので備忘録的に記入しておきます。

1、header.phpにコードの記入

まずは、googleアナリティクスのトラッキングコード、nendの広告コードを”/head”の記述しました。
souce1

■スマートフォン、タブレットでの広告にnendを使っています。

2、サイトをPC表示した時に広告を並べて表示させたい!

まずは、末尾の広告を2つならべて表示をさせたいので、色々な記事を参考にさせて頂きまして、当サイトの横幅を980pxから1120pxに変更し、332x280のレクタングル広告を2つならべて表示させる様に変更いたしました。
スタイルシートの#Wrapper部分を1120pxに変更した後、スタイルシートの”/*レイアウト スマートフォン”部分末尾に下記の様に記述

広告を横並びにする為に”single.php”内に下記の様に記述
52行目

下記に変更

STINGER5でアドセンスの配置を記事下ダブルレクタングルに変更してみました
こちらのサイトを参考にさせて頂きまして無事広告を2つならべる事ができました。有り難う御座います。

これで、PC表示の広告を2つ並べて表示出来る様になりました。色々なサイトを参考にさせて頂きようやくここまで出来る様になりました。先人の皆様方に感謝致します。

3、本文中に広告を掲載する!

 今まで、”functions.php”の末尾にこちらのコードを挿入して、広告を挿入していましたが、なぜか”BLOCKQUOTE”や”h3″タグの表示がおかしくなっている事に気づいたので色々なサイトを確認して、コードを変更したら修正が出来ました。

変更前のコードです

今までこのコードを使用してきたのですが、なぜかこの広告表示の後の部分のスタイルがおかしな事になっていました。 そこで色々なサイトを確認しまして、以下の様に変更致しました。

変更後のコードです。

 
こちらの変更をして試してみた所、現在は問題が出ていない様子です。ついでにgoogleレスポンシブ広告を採用致しました。概ね満足です。

Stinger3の時からENJIさんのサイトを参考にさせていただき本文中に広告を表示させておりました。最近引用などのスタイル表示が出来ていない事に気がつきました。

STINGERでアドセンスをより効果的に貼る方法
Stingerの生みの親ENJIさんのブログを参考にさせていただきました。この方法でずっと記事中に広告を表示させておりました。

色々調べて”ちゅんこ@shufulife”さんのサイトにたどり着きましてスタイル表示が崩れる事がなくなりました。

STINGER5でアドセンスを記事内へ、サイドバーに別の広告をカテゴリ別に入れてみた – Shufulife
こちらのサイトのおかげでStinger5のスタイルが問題なく表示される様になりました。感謝!

変更まとめ

いままで、Stinger5を少しづつカスタマイズして使ってきましたが、まさか記事中の広告表示をする事で、Stinger本来のスタイルが崩れる事が発生していたとは全く気がついておりませんでした。本日ここまでカスタマイズができたので概ね満足であります。これからも色々な問題が出てくるとは思いますが、その都度に報告及び検証をしていきたいと思います。

ブログランキングに参加しております。記事が面白かったり、ご賛同頂けましたら清き一票頂けましたら嬉しいです!! ↓↓↓

インターネット・コンピュータ ブログランキングへ

今後少しずつですが、CSSやPHPも理解出来る様に頑張らねばと思います。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング, 仕事効率化

WordPress
カテゴリ: ソーシャルネットワーキング, 仕事効率化

ha-takeden.com Facebookページ『いいね!』
この記事をお届けした
Ha-takedenの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

フォローする

おすすめ記事