【おっさんにも出来た】STINGER3カスタマイズアドセンス広告を並べる収益アップ【シリーズ】

皆さん、こんにちわ。

STINGER3のカスタマイズを色々と実施しています。
そこでお気づきだとは思いますが、素人ですので、初歩の初歩の方用というか自分の記録用とし記事にします。

スポンサーリンク



STINGER3のカスタマイズ・AdSense(アドセンス)広告を横に並べる!

いやはや遂にここまで来ましたよ。広告を並列するというとんでもない技を体得しました!

(本当は記事の中に広告を入れたかったのですが。。。)

はい、それでは行きたいと思います。(勿論バックアップしてくださいよ!)

今回は4ステップで出来ました!(メチャクチャ難しそうでしたが、意外とノーミスで出来ました)

その①style.cssをイジって全体を広げる!

はい、もうビビりませんよ~ってことで、

【管理画面】⇒【外観】⇒【テーマ編集】までサクッと行きます。

そして『style.css』をチョイス!というか『style.css』が出てますね。

SnapCrab_NoName_2014-3-6_9-53-8_No-00

でここを見つけます↓でイジります。4つイジイジ。

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
    width: 986px; ⇒1000px
    margin-right: auto;
    margin-left: auto;
}
#wrap #wrap-in #main {
    float: left;
    width: 550px; ⇒605px 
    padding-right: 39px; ⇒20px
    padding-left: 39px; ⇒20px
    padding-top: 20px;
    border: 1px solid #ccc;
    background-color: #FFF;
    border-radius: 4px 4px 4px 4px;
    padding-bottom: 20px;
}
でこうなります。↓
SnapCrab_NoName_2014-3-6_9-54-24_No-00
自分でも画像を取る余裕が出来てきましたよ。嬉しいです。
出来ましたでしょうか?出来ますよね(^-^;

その②single.phpをイジって広告を入れる!

ちょっとややこしかった箇所です。丁寧に行きたいと思います。

先程、『style.css』を『更新』したら、『single.php』をクリックします。
(ページ右下にあります。もちろんこちらもバックアップしてくださいね!)

「<?php get_template_part(‘ad’);?>」

を見つけて下さい。

SnapCrab_NoName_2014-3-6_10-21-33_No-00

画像にあるのが見えますか?

見つけたら↓↓↓これをコピるっ!!↓↓↓これは『広告の切り替えコード』というものらしいです。

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマホ用の記述
<?php else: ?>
PC用の記述
<?php endif; ?>

コピーしましたか?コピーしたら、先程の<?php get_template_part(‘ad’);?>を勇気を持って消します(滝汗

バックアップしてますか?してから挑んでくださいよ

そして、『広告の切り替えコード』を消したところに貼り付けますっ!!

SnapCrab_NoName_2014-3-6_10-32-38_No-00

↑張替えたのがわかりますか???ここまでくれば今回のカスタマイズの山場を越えたと言っても過言ではありません。

その③アドセンスを貼る!

今回のカスタマイズの花と言っても過言ではありません!

『スマホ用の記述』と『PC用の記述』にアドセンスの300×250pixelコードを貼り付けます。もちろん『スマホ用の記述』と『PC用の記述』は消してくださいね。

当然『PC用の記述』は2コ貼り付けます!
2コ貼り付けないと2コ並びませんからね!!

これで完成です!(人によってはです)あと少しです。

その④何故かはみ出るh2と引用とコメントを直す!

そうです。何故かはみ出ます。先輩たちもはみ出ますので、サクッと直します。

『style.php』をイジリます。

まずははみ出た<h2>

SnapCrab_NoName_2014-3-6_10-37-32_No-00

そしてはみ出た<コメント欄>

SnapCrab_NoName_2014-3-6_10-37-11_No-00

あと<引用>もはみ出ているらしいので直します。

まずは<h2>

h2 {
    font-size: 24px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 35px;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #1a1a1a;
    color: #333;
    line-height: 30px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: -40px; ⇒-20px
}

直すとこうなります(^^)わかりますか?『黒いしるし』の場所がかわっています。

SnapCrab_NoName_2014-3-6_10-50-21_No-00

続いて<コメント欄>です。
#comments {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #EDF2FA;
    margin-left: -40px; ⇒-20px
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 50px;
    margin-bottom: 20px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #5484D2;
}
で直すとこんな感じに収まります。あと<引用>も同じようにして下さい。

SnapCrab_NoName_2014-3-6_10-51-33_No-00

あと少しです。

その⑤多過ぎる広告を消す!

どうやら、アドセンスは3つまでしか貼れない様です。お~知らなかった(^^;

なので、広告を1つ消しちゃいます。

『single.php』をイジリます。

はい。あいつです。

<?php get_template_part('ad');?>

こいつを見つけ出して消しちゃって下さい。コレにて完了です。

上にある画像はちょうどメッセージの上の広告がまだある状態ですね。

まとめ

いやはや大手術をしたような思いです。ですが、1つづつ壁を乗り越えている気がします。ちなみにこの記事を書くのも疲れました(^^;

【参考にさせて頂いたサイト様の記事】

アドセンス収益が2倍に!STINGER3でブログ収益アップするためのカスタマイズ #Stinger-WP

STINGER3 カスタマイズ→記事下にAdSenseを並べてみた

超初心者のためのWordPressスタートの記録~アドセンスを並べました→見出しのズレを直しました

ここまで60分

これで80記事1,000記事まで920記事

ブログのアクセスアップにはブログ村
にほんブログ村 その他スポーツブログ トライアスロンへ にほんブログ村 自転車ブログ ロードバイクへ にほんブログ村 その他スポーツブログ マラソンへ


『【おっさんにも出来た】STINGER3カスタマイズアドセンス広告を並べる収益アップ【シリーズ】』へのコメント