WordPressテーマ「Stinger」にて記事エリアの横幅を広げる方法

公開日: : 最終更新日:2015/08/10 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

いろんなブログの広告位置を見ていて、そろそろ自分も改良してみるかと思い、Adsenseの配置を最適化する事にしました。いままで記事下に縦2つで置いていた336×280広告を横並びで表示させる事にしたのですがめいん、ここで問題が。。。Stingerはメインコンテンツの横幅が狭めに設定されているので、横2つを並べられないのです。そこで、これから紹介する方法を使ってメインコンテンツエリアの幅を変更しました。

非常に簡単にできる方法ですので、ぜひご参考に。

他のブログテーマよりもメインエリアが狭目なStigner

他のWordPressテーマに比べると、Stingerは記事本文を載せるメインコンテンツが狭目に設定されています。
デフォルトだと、記事を載せるエリアの横幅は550pxくらいで、サイドバーを含めても全体の横幅が1000pxもありません。
stingerの横幅を広くする方法
一般的のブログだと、記事エリアが650~700くらいでサイドバーも含めて1050~1150くらいです。

メインエリアの横幅が狭いことでネックになっていたのが、336×280サイズのAdsense広告を横に並べられなかった事です。Stinger以前はWordPressテーマの横幅も広かったので横に並べる事ができていたのですが、Stignerになってからは縦に並べざるを得ませんでした。

クリック率など数字の面でもそれほど違いはなかったのですが、やはり横に並べた方が若干いい結果が出ていたので横並びに戻す事にしたのです。

スポンサーリンク

ブログの横幅は簡単に変えられる

実はめちゃくちゃ簡単で、style.cssをいじるだけです。
まずは記事エリアの横幅から。
style.cssにて「#main」で検索すると以下のようなコードが見つかります。

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	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;
}

ここの「width: 550px;」の数字を設定したい数字に変更してあげるだけです。
今回は「670px」に設定しました。

次に、サイドバーも含めたコンテンツ全体の横幅。
※記事エリアの横幅を変えたら、必ずコンテンツ全体の幅も変えましょう。
そうしないと、レイアウトが崩れて、記事エリアとサイドバーが重なってしまうなどしますので。
エリア全体の幅を変える時は、style.cssにて「#wrap-in」を検索してください。すると以下の部分がヒットするので

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

「width: 980px;」の数字を好きなものに変更してください。私は1110pxにしています。
これでOKです。
あとは、Adsenseを横に並べればOK。

スポンサーリンク

Adsense広告を横並びにする方法

こちらも簡単で、Adsenseを表示させたい位置に以下のコードを追加するだけ。

<table>
<tr>
<td>
アドセンスコード
</td>
<td>
アドセンスコード2
</td>
</tr>
</table>

アドセンスコードには

<script type="text/javascript">

で始まるコードを挿入してください。そうすると

adsense広告を横並びに表示する方法
こんな感じで横に2つ並べて表示する事ができます。

まとめ

・Stingerのメインコンテンツエリアは横幅が狭いので注意
・横幅を広げたい場合はCSSをいじりましょう
・幅を広げればAdsenseも簡単に横並び表示できる

以上です。それでは。

ブログをやるんだったら知っておきたいHTML、CSS

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!