Stinger3の記事下アドセンスを横並びに変更! | ニュース特報館

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>

<div style=”padding:20px 0px;”>
<?php get_template_part(‘ad’);?>
</div>

<div class=”kizi02″>
<?php get_template_part(‘sns’);?>
</div>
<?php endwhile; else; ?>
<p>記事がありません</p>
<?php endif; ?>
<!–ループ終了–>

グレーの背景色の部分を差し替えます。

<!– 本文記事下のアドセンス(スマホ/PC切り替え) –>
<?php if (wp_is_mobile()) :?>

ここにスマホ用(300×250)のコードを挿入

<?php else: ?><div style=”padding:20px 0px;”>
<div id=”ad-bottom-oya”><div id=”ad-bottom-left”>

ここにPC用・左(300×250)コードを挿入

</div><div id=”ad-bottom-right”>

ここにPC用・右(300×250)コードを挿入

</div></div></div><?php endif; ?>

 

PC用CSS(style.css)に追記します。

/* 本文記事下アドセンス用 */
div #ad-bottom-oya{
padding:5px 0px 5px 0px;
color: #FF0099;
font-weight:bold;
height:250px;
margin-bottom: 30px;}

div #ad-bottom-left{
float:left;}

div #ad-bottom-right{
float:right;}

 

もともとあった記事下表示を消します。

「外観 ⇒テーマ編集」 ⇒「単一記事の投稿(single.php)」を開いて、以下を削除します。

<div style=”padding:20px 0px;”>
<?php get_template_part(‘ad’);?>
</div>

以上で、変更終了です。

参考:http://webdesign-ginou.com/stinger_ads

 

未分類
スポンサーリンク
管理者をフォローする
ニュース特報館