備考録的に残しておきますが、AFFINGERのカスタマイズで気になったら参考にしてください!

※ただし、カスタマイズ前には必ずバックアップを取っておくようにして下さい!&自己責任でお願いします!

STEP-1 AFFINGERの記事横幅を広げる!

style.cssの下記の部分を変更して、まずは記事の横幅を広げます!「max-width: 980px;」のところを「max-width: 1110px;」に変更します!

▼修正前

[html]/*レイアウト スマートフォン
—————————————————-*/
#wrapper {
max-width: 980px;
padding: 0 15px;
margin: 0 auto;
background-color: #fff;
}[/html]

 

▼修正後

[html]/*レイアウト スマートフォン
—————————————————-*/
#wrapper {
max-width: 1110px;
padding: 0 15px;
margin: 0 auto;
background-color: #fff;
}[/html]

 

STEP-2 AFFINGERのsingle.php(単一記事の投稿)を修正するよ!

single.php(単一記事の投稿)の下記の部分を修正するよ!

▼修正前

[html]

<div style="padding:20px 0px;">
<?php get_template_part( ‘ad’ ); //アドセンス読み込み ?>
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:10px;">
<?php get_template_part( ‘ad’ ); //アドセンス読み込み ?>
</div>
<?php } ?>[/html]

 

▼修正後

[html]
<div class="clearfix" style="margin-bottom:20px;">
<script>document.write(‘スポンサーリンク’);</script>
<?php if(st_is_mobile()) { //モバイルの場合 ?>
<?php } else { //PCの場合 ?>
<div id="adsense-bottom">
<div id="adsense-left">
<?php get_template_part( ‘ad’ ); //アドセンス読み込み ?>
</div>
<div id="adsense-right">
<?php get_template_part( ‘ad’ ); //アドセンス読み込み ?>
</div>
</div>
<?php } ?>
</div>[/html]

※念のため「スポンサーリンク」の表示をするようにしています。

 

STEP-3 最後はCSSに追記をするよ!

最後にstyle.cssの一番最後の方の下記の部分に「▼これを追記してね!」の記述を追加するよ!

 

▼これを追記してね!

[html]
/*—————————————————-
アドセンス横並び
—————————————————-*/
#adsense-bottom { padding: 5px 0px; }
#adsense-left { float:left;margin-right:26px;margin-top:8px; }
#adsense-right { margin-top:8px; }[/html]

 

★追記する部分はここ!

[html] .pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}

【ここの辺りに上の追記する部分をコピペしてね!】

/*– ここまで –*/
}[/html]

 

▼追記するとこうなるよ!

[html] .pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}

/*—————————————————-
アドセンス横並び
—————————————————-*/
#adsense-bottom { padding: 5px 0px; }
#adsense-left { float:left;margin-right:26px;margin-top:8px; }
#adsense-right { margin-top:8px; }

/*– ここまで –*/
}[/html]

追記が終わったらファイルを更新してね!

 

完成図はこうなります!

副業ママLOG アフィンガーカスタマイズ2

※クリックすると大きく表示されるよ!

これは、STINGER5でも同じことができます。というか、むしろSTINGER5でこのカスタマイズができる人はそのままAFFINGERでもやればいいんですが、STEP-2のところで、いろいろ調べたらこの記述だとうまくいったので自分が忘れないためにも記事にしました(笑)

誰かのお役に立てば、なお幸いです!

 

けど…

 

バックアップは絶対に

とっておいてくださいね(;’∀’)

 

ここまで読んでいただき、ありがとうございました!