WordPress公式テーマTwenty Twelveの改造 Google Adsenseのレクタングル大をサイドウィジェットエリアに表示する。

ほんとうは噂のStinger3を導入して、どんな感じなのか分析したかったのですが、僕の環境ではプラグインが競合してるのかfunction.phpの不具合が多いので断念しました。デフォルトのTwenty Twelveを改造していって、Wordpressを学びつつオリジナルテーマ作成まで進みたいと思っておりまする。ちなみにtwenty twelveなどのオリジナルテーマは、Wordpressアップデートの際に、一緒にバージョンアップされることが多いので、子テーマでの改造をおすすめします。

in44yさんのサイトを参考にして、最後にちょっと追加しています。

NewImage

Race engine / darren_curtis

スポンサードリンク




Google Adsenseのレクタングル大

Google Adsenseでは、勝手に広告枠の形を変えるのは規約違反となります。そこで与えられているサイズの中から選んで配置することになります。子テーマ内のstyle.cssに下記コードを追加して、上書きする形で編集します。

@media screen and (min-width: 600px) {
		.site {
		margin: 0 auto;
		/*max-width: 960px;*/
		/*max-width: 68.571428571rem;*/
		max-width: 1000px;
		overflow: hidden;
	}
	.site-content {
		float: left;
		/*width:65.104166667%; /*625px*/
		width: 62.5%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
 		/* width:31.25%; /*width 300px; */ 
 		width: 33.6%; /*width 336px*/
	 }
	 .widget-text {
		 width: 366px;
	 }
}

こちらがデフォルトのtwenty twelveのサイズです。in44yさんからお借りしてます。

NewImage

全体の幅を変更

サイト全体のクラスですので、こちらを960pxから1000pxに変更します

.site {
		margin: 0 auto;
		/*max-width: 960px;*/
		/*max-width: 68.571428571rem;*/
		max-width: 1000px;
		overflow: hidden;
	}

メインの幅、ウィジェットの幅を変更

.site-contentと.wigdet-areaでメインカラムの幅と、サイドバーの幅を指定し直します。

.site-content {
		float: left;
		/*width:65.104166667%; /*625px*/
		width: 62.5%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
 		/* width:31.25%; /*width 300px; */ 
 		width: 33.6%; /*width 336px*/
	 }

ウィジェットの幅を指定

ここまでは、in44yさんのやり方でよかったのですが、ウィジェット自体の幅がデフォルトでは250のままでしたので、ここをサイド指定しておきます。

.widget-text {
		 width: 366px;
	 }

これでレクタングル大がちゃんと表示されました。

参照:in44y WordPress TwentyTwelveテーマ「Google AdSense」ビッグバナー、レクタングル(大)を配置する方法