Stinger8で記事下広告をダブルレクタンブル。結構簡単。

Stinger8のカスタマイズの一つに、記事下にGoogleAdsenseの広告を横並びに2つ設置するカスタマイズをされている人が多いです。

色々とサイトをみていると、あんまり難しくないカスタマイズみたいなので、僕も行ってみることにしました。

記事の幅を広げて広告が設置できる幅を確保する

まずは広告が横並びに並ぶように記事の幅を調整してあげる必要があります。

僕が記事の下に配置しているのは、幅が336pxの広告です。

これが2つ並ぶ訳ですから、672pxの幅が最低ないといけません。

記事のエリアは、660pxの幅なので、広告が横並びでは表示できません。

ということで、記事のエリアを広げてあげる必要があるのですが、Stinger8では、記事エリアと左サイドバーの両方のpxを変更するのではなく、全体のpxを変更することによって、記事エリアの幅を変えることができます。その際に右サイドバーは固定されているので、300pxのままです。

今回は、全体を1100pxにして、記事のエリアを800pxに、右サイドバーを300にしました。

結果としてこんな感じの画面になりました。

これだけあれば、広告が横一列に並ぶはずです。

ちなみに、全体の幅を定義している場所ですが、stinger8の親テーマの中にあるstyle.cssファイルの2855行目あたりに、「#content」というidがあり、そこで、max-widthプロパティがあります。そこには1060pxと記載があるので、全体の幅は1060pxあるという訳です。

下の画面にソースコードを貼りますが、style.css全てのコードを表示させると膨大になるので、PCのレイアウトを示している部分だけを表示させます。style.cssの2840行目から2878行目です。それを下のソースコードは、1行目から39行目で表しています。

書き忘れてしまっていましたが、全体の幅を変えるためのコードは、stinger8の子テーマの中のstyle.cssに記載をしています。

場所は特に限定しません。コードは以下になります。

僕は幅は1200pxnにしました。

Stinger8の記事エリアの幅が広がったら、次はGoogleAdsenseの広告を設置する作業に移ります。

CSSで細かい配置を決めることになるのですが、現時点では記事下にある広告にクラスが定義されていませんので、定義をしてからCSSで変更をしたいと思います。

まず、WordPressの管理画面から外観→ウィジェットから広告・Googleアドセンス用336pxを選択してください。

GoogleAdsenseのコードにクラスを定義します。具体的にはこんな感じです。クラス名はunderadにしました。

作ったunderadを使って、CSSで位置を決めます。

今回は、子テーマのstyle.cssファイルに書いていきます。

ここで出てきた、floatプロパティですが、横並びにする際に使用するプロパティだそうです。

今回はfloatプロパティはleftとなっていますので、左から順に横並びになるということです。

つまり、クラスunderadは、横並びに左から並ぶという位置情報をCSSに書いた訳です。

結果として画面は以下のようになります。

でもなんかちょっと二つ目のレクタングル広告のサイズが微妙に下がっているように見えます。というか実際に下がっています。

これを修正する方法ですが、PHPファイルを修正します。修正するファイルは、st-ad-on.phpです。

具体的には42行目のdivクラスのCSSをコメントアウトします。その際には、divクラスが閉じられている44行目もコメントアウトしてください。

具体的にはこんな感じです。以下は42行目から45行目を記載していますが、番号は1〜4行目となっています。

これで、広告がきちんと並んで横並びで表示されます。