素人がブログの改造をする記録（A8.netの導入と検索窓の移動）

また、素人がブログをいじったので、記録しておきます。

これをしておかないと、後で何を変えたのか分からなくなってしまいます。

今回は、サイドバー右上のアドセンス（AdSense）を外し、A8.net（楽天広告）を入れました。

今までは、サイドバー上に検索窓もあったのですが、これもヘッダー枠の右下に置きます。

AdSenseインフィード広告を入れると、サイドバーに同じ AdSense広告は入れてはならないと知りました。

検索窓の移動

いつものように、「ロリポップ！ＦＴＰ」にて、header-logo.php ファイルを simplicity2の親から Simplicity2 child にコピーします。

ＰＣ編

header-logo.php の最終行に以下の文面を書き加えます。

<!– ヘッダー内へ検索窓 –>

<form method=”get” id=”searchform” action=”<?php echo home_url(‘/’); ?>”>
<input type=”text” placeholder=”<?php echo get_theme_text_search_placeholder();//検索ボックスのプレースホルダテキストを取得 ?>” name=”s” id=”s”>
<input type=”submit” id=”searchsubmit” value=””>
</form>

まだ、何が書いてあるのかよく分からないのが現実です。

（WEBを検索して見つけてきました。）

次に、Simplicity2 child の スタイルシート (style.css)を書き加えます。

/* ——————————-
* ヘッダー内に検索窓
*——————————- */
#h-top #searchform {
position: absolute;
right: 05px;
bottom: 0;
width: 300px;
}
#h-top #s {
margin-bottom: 10px;
border-radius:07px;
border : 2px solid #ff69b4 ;
}

右下に300pxの幅で、角を丸くして、ピンク色で枠を囲ってみました。

モバイル編

スマホ用にも書き加えますが、これは苦労しました。

自分は xperia ですが、家内が Iphone を持っているので、確認すると端が切れていました。

枠を縮めるか、センターに置くか悩んだあげく、結局センタリングすることにしました。

Simplicity2 child の mobile.css に書き加えます。

/* ——————————-
* ヘッダー内に検索窓
*——————————- */
#h-top #searchform {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
}
#h-top #s {
margin-bottom: 01px;
border-radius: 07px;
margin: 0 auto;
border : 2px solid #ff69b4 ;
}

これで何とか出来ましたが、センターリングに苦労しました。

A8.netの導入

これは簡単です。

サイドバー上

A8.netにログインして、楽天の広告から、楽天モーションウィジェット（A8.net版）を使います。

バナーサイズは300＊160にして、サイドバーにウィジェットのテキストを使って置きました。

投稿ＳＮＳボタン上

投稿ＳＮＳボタン上には、同じく楽天モーションウィジェット（A8.net版）にバナーサイズ600＊200を置きました。

同じく、テキストのウィジェットを使用しました。

これもセンターリングしたいのですが、出来ていません。

最後に

今回は、割と簡単でしたが、見た目はかなり変わりました。

ヘッダー内に検索窓を置くと、雰囲気がかなり変わってきて、自分では気に入っています。

最初は、このヘッダー内に広告を入れようかと思いましたが、やはり広告は本文を読み終えた後がいいとのことで止めました。

これが楽しいのですが、一向にＰＶは増えません。従って、目標とする、関連コンテンツ広告はまだ現れません。

悲しいです。