久しぶりのStinger3カスタマイズネタです。
ブログを始めた時からずっとお世話になっておりますStinger3。
以前も書きましたが僕がStinger3に惚れたのは圧倒的なサイトデザインと醸し出すその雰囲気でした。
僕はSEO何ちゃらかんちゃらってゆーのは全く無知で無関心で、ブログカスタムといってもあくまで自分ができる範囲で一番カッコいいモノを目指しているつもりで「優先すべきは見た目」なのです。
で、今回のカスタマイズは「トップページの記事と記事の間にアドセンスを配置する」というもので、カッコいいポイントは"個別記事の本文の間"ではなく"トップページのタイトルとタイトルの間"ということ。
▼PCの完成形はこちら
▼スマフォの完成形はこちら
ちなみに本文の中にアドセンスを仕込む方法は「moreタグで記事内にアドセンスをセンタリングで設置する方法［Stonger3］」に書いてるので気になる方はチェックしてみてください。
気を付けて頂きたいのは、クリック率がどうだとか収益がどうだとか全く気にしてないし、調べてません。アドセンスのサイズも単に自分のサイズに合わせただけです。本当にビジュアルを優先しただけなので、Stinger3でやりたいなーって思っていた方のお役に立てれば幸いです！
トップページの記事と記事の間にアドセンスを差し込む方法
まず挿入するコードはこちら。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?> <?php if ( $loop_count == 4 || $loop_count == 8 ) : ?> <?php if (wp_is_mobile()): ?> /*スマフォで表示したいアドセンスコード*/ <?php else: ?> /*PCで表示したいアドセンスコード*/ <?php endif; ?> <?php endif; ?>
ネットに潜ると圧倒的に「index.php」を変更しましょう的なことだったんですが、Stinger3ではうんともすんとも言わなくてプチハマりしました。同じ様な記述がないか調べたところ「home.php」に上記のコードがあるんですね、ビンゴでした。
もしご自分で方法を探される場合は「WordPress 記事間 アドセンス」みたいな感じで潜ると、とても有益な先達のブログが解説を踏まえて出てくるのでこちらの方が勉強になります。
僕の場合、というかStinger3の場合？はこちらのサイトがとても参考になりました。参考というか丸パクリでした。
 |
WordPressのトップページで記事と記事の間に広告を表示する方法 |
僕は完全素人なのでコードが何を意味するのか、という説明はできませんが完成形のコードを書かせてもらいますのでコピペでいけると思います。
当ブログはPCとスマフォで表示するアドセンスを変えているので、表示を変える場合のコードと表示を同じにするコードの2つを貼らせてもらいます。使用したいアドセンスによって決めてください。またdiv classとdiv idを付けているのはcss調整用ですので、ご自分で書き換えてもらってもいいですし、下に書いてますcssのコードをコピペする方はそのままでも大丈夫です。
▼PCとスマフォで表示を切り替える
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>
<?php if ( $loop_count == 4 || $loop_count == 8 ) : ?>
<?php if (wp_is_mobile()): ?>
<div class="splk">SPONSORED LINK</div>
<div class="acad1">
<div style="margin-left: -10px !important;">
/*スマフォで表示したいアドセンスコード*/
</div>
</div>
<hr style="border-top: 1px dotted #ccc; width: 100%;">
<?php else: ?>
<div style="text-align:center; margin-bottom: 10px;">
<div class="splk3">SPONSORED LINK</div>
</div>
/*PCで表示したいアドセンスコード*/
<br />
<br />
<hr style="border-top: 1px dotted #ccc; width: 100%;">
<?php endif; ?>
<br />
<?php endif; ?>
▼PCとスマフォの表示を同じにする
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>
<?php if ( $loop_count == 4 || $loop_count == 8 ) : ?>
<div class="splk">SPONSORED LINK</div>
<div class="acad1">
<div style="margin-left: -10px !important;">
/*スマフォで表示したいアドセンスコード*/
</div>
</div>
<br />
<br />
<hr style="border-top: 1px dotted #ccc; width: 100%;">
<br />
<?php endif; ?>
アドセンスを準備する
僕はstinger for FANSを使っているのでPCトップページで表示するアドセンスは610×90。これはカスタムサイズで入手できます。stinger3スタンダードの場合は550×90ぐらいでキレイにはまります。カスタムサイズのコードは以下の方法で入手してください。
▼推奨の部分をカスタムサイズに変更
▼任意のサイズに設定
これでコードをコピーしてください。入手できましたら次にPCとスマフォで表示を変えるコードを準備します。コードは以下ですが、これはいつもこのサイトからコピペさせてもらってまして、本当にお世話になっています。
|
StingerのSNSボックス表示をスマホとPCで切り替え | ウィンドミル いわしブログ |
home.phpに記述する
では以上の素材を実装しましょう！書き加える場所はhome.phpです。念のため元のコードはコピーして、メモアプリやエディタなどにペーストして保存しておくと万が一の復旧時に便利かつ安心です。
home.phpの上から3行目あたりにある
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
の部分に上に書いたコードを丸々貼付けてください。
わかりやすいように前後を含んだhome.phpの完成型はこちら（stinger for FANSの場合）
<?php get_header(); ?>
<div class="post kizi smart">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>
<?php if ( $loop_count == 4 || $loop_count == 11 ) : ?>
<?php if (wp_is_mobile()): ?>
<div class="acad1">
<div style="margin-left: -10px !important;">
/*スマフォで表示したいアドセンス*/
</div>
</div>
<hr style="border-top: 1px dotted #7A7B7D; width: 100%;">
<?php else: ?>
<div style="text-align:center; margin-bottom: 10px;">
<div class="splk3">SPONSORED LINK</div>
</div>
/*PCで表示したいアドセンス*/
<br /><br />
<hr style="border-top: 1px dotted #7A7B7D; width: 100%;">
<?php endif; ?>
<br />
<?php endif; ?>
<!--ループ開始-->
<?php if(is_mobile()) { ?>
<dl class="clearfix">
$loop_count++;というのが今回のメインコードですね。ここでループをカウントしているそうです。
次に$loop_count == 4 || $loop_count == 8の4と8っていうのが4つ目と8つ目にアドセンスを表示するとうコードなので、ここを書き換えることで好きな所にアドセンスを表示させることができます。すごいですねー。
表示を確認してCSSで調整する
stinger3をがっつりカスタムしてない（というか出来ない）原型をとどめてる僕みたいな人は、以下のコードが通用すると思うので、style.cssとsmart.cssの一番下にコピペしてもらうといい感じで調整出来ると思います。もし表示が崩れた場合はChromeやSafariの「要素の確認」を使って調整してください。
.splk{
font-size:13px;
text-align:center;
margin-top: 10px;
margin-bottom: 5px;
}
.splk3 {
font-size:13px;
text-align:center;
margin-top: 10px;
}
.acad1{
text-align: center;
}
以上でアドセンスがトップページの記事と記事の間に設置できると思います！お疲れ様でした。
今回のマジで
僕が使ってるテーマはstinger for FANSですが、stinger3スタンダードの場合でも対応は確認済みです！
何遍も言いますが、あくまで「見た目」を優先したカスタマイズですので収益が上がる上がらないは責任は負いかねますので自己責任でお願いしますm(_ _)m
とはいえ、SEOなんちゃらかんちゃらがわからない僕でさえ、当ブログは月間1万5千以上のPVをキープしつつ、毎月PV数は上がってきています。
アドセンスに関しても微々たるものですが、それでも黒字運営させてもらっており、対策など何もしていないのにこの結果はstinger3の恩恵以外何物でもないと感じます。
無知でも調べればカスタマイズできて、高アクセス率もキープできる。さらに製作者のENJIさんはマメにメンテナンスもしてくれて至れり尽くせり。本当にstinger3は上級者だけでなくWordPress初心者・入門にもピッタリな最強無敵な無料テーマです！
これを機にまた色々カスタマイズして、どうかみなさん楽しいstinger3ブログライフを！
