Adsense広告最適化に必須!Stingerブログの横幅を変更する方法

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

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

wordpressブログで横幅を変える方法
Stingerの記事コンテンツエリアの横幅はデフォルトだと狭め(560pxくらい)に設定されています。なので、記事コンテンツエリアに「336 × 280」のAdsenseを横並びに配置することができません。

他にも「いろいろとカスタマイズしたい」など横幅の狭さがネックになるケースがあります。
そんな不便を解消するために有効なのが、記事コンテンツエリアの幅自体を広げることです。横幅を変更するのは簡単にできますので、ぜひお試しあれ。

記事コンテンツエリアの横幅を変える方法

まずは、こちらの幅を変えていきましょう。
wordpressブログで横幅を変える方法
なお、事前にブラウザの開発ツールで設定すべき横幅の値を求めておきましょう。
Chromeの場合、開発ツールは「右クリック」→「要素の検証」で使うことができます。
開発ツールを開いたら、「div id=”main”」の部分をクリックしてwidthの値を調整しておきます。
ブログで横幅を変える方法。chromeの開発ツールを使う。

調整がすんだら、本番です。
ダッシュボードの「テーマ編集」からstyle.cssを開きます。
そこで、「cotrol + f」を使って「#main」と検索します。
すると、以下のコードにヒットするので、widthの数字を好きなように変更します。

#wrap #wrap-in #main {
	float: right;
	width: 730px; /* ここを設定したい幅に変える */
	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;
}
1
一般的なブログでは600~750で設定されています。
「ファイルを更新」すれば、記事コンテンツ幅を変更することができます。

しかし、ここで注意が必要です。
記事コンテンツエリアの幅を変更すると、サイト全体のレイアウトが崩れる場合があります。そのためサイト全体の幅も変更してあげる必要があります。

<h2>サイト全体の横幅を変更する方法</h2>

<img src="https://laugh-raku.com/wp-content/uploads/2014/03/94fba3e409f7ecf75e5e503c68ea4fc31.png" alt="wordpressブログで横幅を変える方法" title="wordpressブログで横幅を変える方法.png" border="0" width="600" height="95" />
style.cssにて「#wrap-in」で検索すると、以下のコードにヒットしますので、widthの数字を好きな値に変更します。
1
#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 1160px; /* ここを設定したい幅に変える */
	margin-right: auto;
	margin-left: auto;
}

これでブログ全体のレイアウトも整うはずです。

最後にせっかくですからサイドバーの横幅を変える方法も紹介しておきます。

スポンサーリンク

サイドバーの横幅を変更する方法

style.cssにて「#side」と検索してください。
すると、以下のコードにヒットしますのでこれまで通りwidthの値を変更しましょう。

#wrap #wrap-in #side {
	float: left;
	width: 336px; /* ここの値も変更する */
}

これでサイドバーの横幅も変更することができます。

スポンサーリンク

まとめ

・Adsenseを横並びにするためにもブログコンテンツエリアの幅は広げたい
・style.cssにて簡単に変更できる
・コンテンツエリアの横幅を変えたら、サイト全体の幅も変えないとレイアウトが崩れてしまうかも

これを知っているだけで、ブログカスタマイズのできる範囲が広がりますので覚えておきましょう。

WordPressでカスタマイズしたいなら読んでおきたい

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

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

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

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

最新情報をお届けします

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

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

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

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

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