今回はTwentyTwelveの全体の幅、記事コンテンツの横幅とサイドバーの横幅を広くしたり、狭くするカスタマイズを紹介します。
TwentyTwelveの初期状態ではコンテンツ全体の横幅が960pxになっています。以前無料ブログでブログを作成していた私にはこの幅が広すぎると感じたのでこのブログでは全体の幅を860pxに変更しています。
TwentyTwelveの全体の構造を把握しておく
最初にTwentyTwelveの全体の構成を見ておくとスムーズに変更できると思いますので、まずはこの図を見てください。
参考：work.log様
全体図としてはこのようになっています。
- コンテンツ領域（記事の部分）：625px
- ウィジェット領域（サイドバー）：250px
- 中間余白（中間の余白）：85px
この３つの合計が960pxになる訳ですね。TwentyTwelveの横幅を変更する場合は最初に全体の幅を指定して、コンテンツ領域とサイドバーの領域をそれぞれパーセントで指定します。
例えば全体の幅を100%としてコンテンツ領域を60パーセント、サイドバーを35パーセントと指定すれば残りの5パーセントが中間の余白として指定されます。
先に各領域の幅を決めておく
先ほどそれぞれの領域をパーセントで指定すると書きましたが最初に「px」で各領域の幅を決めておきます。順番としてはこのような順番で決めるといいです。
- 最初に全体の幅
- コンテンツ領域の幅
- サイドバーの幅
私の場合は「全体の幅」を860pxにして「コンテンツ領域」を530px、「サイドバー」を300pxにする事にしました。これで中間の余白は残りの30pxになります。このように先に全体の幅とそれぞれの領域の幅を考えてみて下さい。
領域の幅が決まったらパーセントの計算をしていきます。注意点としては「コンテンツ領域」＋「サイドバー」が全体の幅より大きくならないようにしてくださいね。
各領域の幅を計算する
それぞれの領域の幅を決めたら今度はそれをパーセントに変換しますので、電卓を用意します。そしてそれぞれ計算をしていきます。計算式は次の通りです。
■コンテンツ領域の幅の計算
コンテンツ領域の幅（px）÷全体の幅（px）×100
■サイドバー領域の幅の計算
サイドバー領域の幅（px）÷全体の幅（px）×100
私の場合（全体が860pxでコンテンツが530px、サイドバー300pxの場合）
コンテンツ領域 530÷860×100＝61.62790698(%)
サイドバー領域 300÷860×100＝34.88372093(%)
このように計算してコンテンツ領域とサイドバー領域の幅をパーセントで計算しておきます。ここまで出来たらあとはスタイルシートに記述するだけです。
子テーマのスタイルシートに記述する
最後に子テーマのスタイルシート(style.css)に変更の記述をしておきましょう。私の場合の記述を例にしてます。
@media screen and (min-width: 600px) {
.site {max-width: 860px;}
.widget-area {width: 34.88372093%;}
.site-content {width: 61.62790698%;}
}- 「.site」が全体の幅（ここは「px」で記述）
- 「.site-content」がコンテンツ領域の幅（%）
- 「.widget-area」がサイドバー領域の幅（%）
このようになります。それから別のブラウザで反映されるか心配だったので、次の記述も追加しています。
@media screen and (min-width: 600px) {
.ie8 .site {max-width: 860px;}
.ie8 .widget-area {width: width: 34.88372093%;}
.ie8 .site-content {width: 61.62790698%;}
}内容は同じです。一応これも追加してます。以上でTwentyTwelveの横幅を変更するカスタマイズは終了です。
コメント
返信ありがとうございます！！
二つとも解決しました！
スッキリしました！
しげぞうさのおかげで
楽しくブログが出来ています☆
マイペースにやっていきますので今後ともよろしくおねがいします！
財津様
お久しぶりです！スマートフォンの隙間の問題ですが、これは記事下のFacebookとツイッターの部分が横幅をはみ出しているのが原因ですね、厳密に言うとTwitterの部分は問題なくて、Facebookの部分です。一度、このFacebookとTwitterの部分を外してからリロード（再読込み）して確認してみてください。
外してみて隙間がなくなったらFacebookページのやつが原因なのでこれ、再度フェスブックページ作成した所からコードを再取得してみて下さい。私のやつは幅が280pxくらいになってたのでその横幅で作ってみたら良いかもしれません。
⇒https://affiliate150.com/wordpress-page-plugin
それからアドセンスの横並びに関してですが、財津様のサイトのコンテンツ部分の横幅が616pxくらいなので設置する広告は300pxで用意して広告間の余白を15px以内くらいで設定すればOKかなと思います。
もう1点。。。
続けて申し訳わりません。
記事下のアドセンス広告が上手く横並びにできないので、そちらも合わせてアドバイス頂けと嬉しいです。
よろしくお願いします！
お久しぶりです。
お世話になっております。
先日、スマートフォンをXperiaからiPhone８に替えて気付いたことなのですが、(Xperiaの時はそんな事なかったのですが)右端に隙間があり、背景画像(PC用の)が数ミリ覗いてしまっているようなのです。
おそらくこちらのコメント欄に投稿されてます『りょりょまるさん』と同じ状態かと思うのですが、解決編の回答が見当たりませんので投稿させていただきました。
ご返答いただけると幸いです☆
よろしくお願いします
ｃｍｊｎ様
コメントありがとうございます。Twenty Twelveのヘッダー画像の件ですが、コメントで回答するにはちょっと長くなりそうだったので記事にしてみました。ちょっと急ぎで書いたのでもし上手く行かない部分があれば再度コメント下さい。
⇒https://affiliate150.com/proper-use
初めまして！
最近ワードプレスを始めて、ほとんどの設定をこちらのしげぞうさんのサイトを見てさせていただき、行いました。とても丁寧な説明をありがとうございますm(__)m
twentytwelveを使用していますが、PC・タブレットのヘッダー画像とスマホのヘッダー画像を違うものにしたいのですが、どのようにしたらよいのでしょうか？
お忙しいところ申し訳ございませんが、アドバイスをいただけたらと思います。
よろしくお願いいたします。
MARY様
コメントありがとうございます。私の場合はずっとTwentyTwelve使っているのであまり別のテーマ使った事がありません。Selaというテーマもよくわかりませんが、URLを教えてもらえたら実際にチェックして原因が探せるかもしれません。
TwentyTwelveはシンプル過ぎるテーマでそのままでは使いにくいテーマだと思ってます。練習には最適ですが、あまりカスタマイズに時間を使いたくないという場合にはすでにある程度カスタマイズされているテーマを選ぶべきと思います。
しげぞう様、こんにちは。今日はこのサイトを熟読しながら、ワードプレスをやっと触ってみたのですが、幅の変更がうまくできなかったので教えてほしいです。
具体的にはSelaというテーマで作ってみたのですが、左の余白が消せないので、コンテンツとウィジェットの幅が調整できませんでした。しげぞう様おすすめのTwentyTwelveにすればよかったと今更すごく後悔しているのですが、もしおすすめの方法があれば少しアドバイスをいただけると助かります。よろしくお願いいたします。
しげぞう様
返信ありがとうございます。私のPC上でズームが90％になっており、100％にすることで改善されました。一人で何日も悩んでいたので、本当に助かりました。
知らないうちに90％になっていたみたいです。こういうものはブラウザを閉じたりPCの電源を切れば100％にリセットされるものと思い込んでいました。当初、私も「倍率が違うのかな？」と思ったので確認していましたが、ブラウザ（クローム）を立ち上げてGoogle検索画面（ホーム）でまず100％になっていることを確認してから自分のサイトへ検索していったので、てっきりそのままの100％表示になっていると思っていました。90％に勝手に変わるみたい…。
一度90％にしたら同じサイトを開くときは、ズーム機能が戻らないということを初めて知る事ができました。初歩的な確認ミスで申し訳ございませんでした。しかし1人だったらもっと悩んでいたので、助かりました。本当にありがとうございます。