Stinger3の記事下アドセンスを横並びに変更！

記事下にアドセンスを1つしか表示していなったのを、2つ横並びに変更したので、忘れないうちに方法を備忘録として残します。

PC用アドセンスは、
本文記事下：300×250　300×250

Stinger3のデフォルトの横幅は、300pxのアドセンスを横に2つ並べられないので、まず、本文を広げ、サイドバーを狭くします。

今まで、本文とサイドバーの比率が不満だったでの、これは好都合の変更です。

記事を636px、サイドバーを250pxに変更します。

CSSの変更

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
width: 986px;
margin-right: auto;
margin-left: auto;
}

#wrap #wrap-in #side {
float: left;/* デフォルト：right(1) */
width: 250px;/* デフォルト：336px(1) */
}

#wrap #wrap-in #main {
float: right;/* デフォルト：left(2) */
width: 636px;/* デフォルト：550px(2) */
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}

/* 一覧表示時のタイトルと抜粋の幅(4) */

.post .entry .entry-content {
float: right;
width: 466px;/* デフォルト：380px */
padding-left: 20px;
}

/*—————————–
検索フォーム(3)
—————————–*/

#container #wrap #wrap-in #search {
padding-top: 20px;
padding-bottom: 0px;
}

#s {
width: 180px;/* デフォルト：266px */
height: 24px;
border: none;
color: #333;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
background-color: #CCC;
font-size: 14px;
border-radius: 0;
}

#searchsubmit {
position: absolute;
top: 0;
_top: 1px;
left: 200px;/* デフォルト：286px */
border-radius: 0;
}

*:first-child + html #searchsubmit {
top: 1px;
}

#container #wrap #wrap-in #side #search #searchform {
position: relative;
}

もう一つ、テーマのための関数:function.phpを変更します。

if ( ! isset( $content_width ) ) $content_width = 632;/* デフォルト：546 */

これで、横並びにする準備は整いました。

参考：http://webdesign-ginou.com/idea/post-2120.html

PC用に、300X250サイズを並べて2個設置、スマホ用は300X250サイズを1個設置するように設定します。

「外観 ⇒テーマ編集」 ⇒「単一記事の投稿(single.php)」を開きます。

<!–ループ開始–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class=”kizi”>
<h1 class=”entry-title”>
<?php the_title(); ?>
</h1>
<div class=”blogbox”>
<p><span class=”kdate”>公開日：
<time class=”entry-date” datetime=”<?php the_time(‘c’) ;?>”>
<?php the_time(‘Y/m/d’) ;?>
</time>
:
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ 最終更新日：’ , $mtime; ?>
</span>
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
<br>
</p>
</div>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>