今回は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の横幅を変更するカスタマイズは終了です。
りょりょまる様
コメントありがとうございます。どこかCSSにミスがあるか、設置した画像など色々原因が考えられるので一度URL教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
コメント失礼します。
最近WordPressを利用し始めたものなのですが、スマートフォンで自分のサイトを表示すると左側に寄ってしまって背景画像が右側に大きく表示されるような状態になってしまうのですがどのようにすれば背景画像などがうつることなくスマートフォンでも正しく表示されますか？？
しげぞう様
ありがとうございます！教えていただいたCSSで背景画像を無くすことができました。
今まで何度トライしてもできなかったので感動しています。お忙しいのにお手間を取らせてしまって申し訳ございませんでした。
翔様
返信ありがとうございます。CSSの優先順位みたいなやつが邪魔しているかもなので、昨日のCSSのコードをこちらに変更してみて試してもらえますか？「!important」をつけて優先的に反映されるようにしてます。
@media screen and (max-width: 599px) { body.custom-background { background-image: none !important;} }おそらくこれで反映されると思います。
しげぞう様
お手間をとらせてしまい、申し訳ございません。
早速style.cssの最下部に書き込んでみたのですが、今の所変化がないようです(泣)
キャッシュ系プラグインというのを初めて聞いたので少し調べましたが、そういったプラグインは一つも使っていないので、恐らく問題はないと思います。
ヘッダーの件は、言われてみると自分で余白を作った記憶があります。一度余白のない元の画像を入れて確認してみます。
相変わらず横ズレもありますが、今確認したら固定ページはズレないようです。投稿ページだけのようですね。
せっかくCSSまで教えていただいたのですが、特に変化は見られない状況です。何度も再読み込みしているのですが…
翔様
返信ありがとうございます。早速チェックしてみたのですが、これはスマホの場合だけ背景画像を無くして白色に変更する事で解決するような気がしました。それで、ちょっと扱った事のないテーマで上手くいくかはわからないのですが、下記のコードをそのままコピーしてスタイルシート（CSS）の一番最後に貼り付けて保存してみてください。
@media screen and (max-width: 599px) { body.custom-background { background-image: none;} }それでですね、保存してすぐにスマホから確認しても反映されてないかもしれません、というのも、しばらくは以前のデータや情報がブラウザに残っている事があるためです（キャッシュ）。そのため、もしキャッシュ系のプラグインなどを使われている場合には一度キャッシュをクリアする事ができますので、設定などでクリアして下さい。キャッシュ系のプラグインを使っていない場合はそのままでもOKです。
それでスマホなどで表示してみてからリロード（再読込）をして反映されているか確認してみて下さい。
もし確認が出来ない場合や反映されてない場合にはまたコメントもらえたら私の方でも確認してみてみますね。
それからヘッダー画像の件ですが、これは設定されている画像自体に白い余白が少しあります。つまり元画像の左右に白い余白があるので、小さくなったように見えますが、これが画像そのままの見え方じゃないかと思います。なので、どうしてもそれが嫌という場合にはその画像を一度編集して周り（左右）の余白をカットしてから再度ヘッダー画像をアップして設定する必要があると思います。
しげぞう様
お返事ありがとうございます。ブログのURLはコチラです。
スマホ表示だとヘッダーが小さく表示されるのも気になっていますが、CSSやHTMLの事はわからない事だらけで修正しようにも何もできない状況です。
難しいと思うのですが、宜しくお願い致します。
翔様
コメントありがとうございます。何となくは想像できるのですがやはり実際に見てみないとハッキリ原因が分かりません。私自身もRMAテンプレートというのは試した事がないので、原因が特定できるかは分かりませんが、HTMLとCSSに原因はチェックできるかなと思います。なのでもし良かったらURL教えて下さい。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
ご無沙汰しおります。心配しておりました。無事退院されてなによりです。
２ヶ月ほど前にワードプレスで作成したブログで改善したい点があるのですが、やり方がわからず大変困っております。
CSSに関する事なのですが、自分なりにどれだけ調べてやってみても上手くいきません。ワードプレス自体初めてで、かなり悪戦苦闘しております(泣)
言葉で説明するのが難しいので、分かりにくいかもしれないのですが
スマホで表示した際、メインコンテンツの横にブログの背景が映ってしまい、そのせいで本文の文字横にある余白がほとんどないのです。
時々横ズレもしてしまうので、この２つを合わせて修正したいと思っています。
こんな説明でわかりますでしょうか？
メディアクエリ？とかいうのも試しましたが、上手くいきませんでした。スマホだけテーマを変えたりもしたのですが、今のテーマが１番しっくりくるので、できれば変えたくはありません。
RMAテンプレートという、少し特殊なテーマを使っており、ワンカラムなのが特徴です。その為なのか、スマホでもPCとほとんど同じ表示です。
恥ずかしいですが、ご要望とあればブログをお見せするのも可能です。
ブログのテーマ上、スマホからのアクセスの方が多くなると思うので、スマホ表示が不細工なのはマズイんですよね…
難しいかと思うのですが、どうぞ知恵をお貸しくださいませ
しげぞうさま
バッチリ反映されましたー。これでスマホからとても見やすくなりました。ほんと何から何までありがとうございます！
gori様
コメントありがとうございます。そうです、スマホで表示された時の横幅などは変更してます。文字の大きさとかはスマホの「フォントサイズ」で各自見やすい大きさに変更されます。端末で設定できる部分なので、文字の大きさなどは反映されない場合がありますが、横幅は変更できます。
以前の記事で紹介してますので、参考にしてみて下さい。結構長い記事の途中に書いてます。
⇒劇的改善！ブログのアクセスアップにつながった６つの施策を全部公開
しげぞう様
このサイトを見ていてふと気づいたのですが、スマホで表示された時のコンテンツの横幅やリンク文字の大きさなどをpcで表示される時と変えていますか？
と言うのも、しげぞうさんのサイトだとすまほで表示すると文字が1列18文字並んでいるのですが、自分のサイトだと17文字になっていてリンクの文字も小さいです。
これはまた何か問題が発生しているのでしょうk？
もし変えているのであればコードを教えて頂けれませんか？
Kita様
コメントありがとうございます。ブログも確認させて頂きましたが、スタイルシートで記述ミスがあるようです。具体的にはコンテンツの幅を広げるコード自体はOKなのですが、そのコードの前に書かれている「サイドバー文字にリストマークを付ける」という部分でコードの閉じタグ「 } 」 がありませんので、閉じタグで閉じて試して見てください。
また、前回返信したように、A8のタグにはimgタグが２つあり、これが余白を１行分だけ下にずらしている可能性があります。なので、サイドバーの幅を300PXにしても余白の改善ができるかどうかはちょっとやってみないと分かりません。一度試してみて、それでも余白が空くという場合には別のASPの広告を使った方が良いかもしれません。
先ほどはありがとうございます。
広告サイズが幅300pxなので、サイドバーも300pxか320pxとしようかと思い、やってみましたが、下記コメントにもあるように、なぜか反映されません。
コンテンツ(本文)とサイドバーの余白が80px？ほどあると思いますが、50pxサイドバーに持っていこうと思ってます。自分でも「要素を検証」で見てみたんですが、わかりませんでした。
すいません、再度になってしまいますが、よろしくお願い致します。
＞non様
コメントありがとうございます。わざわざ報告して頂きありがとうございました。テーマは違うので若干違う部分もでてくると思いますが、また分からない部分などコメント頂けたら嬉しいです。どうぞよろしくお願い致します。
Webサイト作成初心者のものです。
Twenty Fourteenを初めて使い、スタイルシートなるものからスタートしております。
全体像を把握でき、仕組みと計算の仕方を知ることができました。
本当に助かりました。
ありがとうございます。
＞sai様
コメントありがとうございます。sai様のコメントでのソースをそのまま貼り付けてみましたが、私のサイトでは上手く反映されましたので、ソース自体は間違っていないと思います。ちょっと原因がよく分からないのでもしよければURLを教えて頂けないでしょうか？コメント公開時にはURLは削除しますので。
はじめまして。
こちらのサイトを参考にwordpressでブログを作っており、いつもお世話になっています。
質問なのですが、サイドバーの幅を250px→300pxに変更したいのですが、上手く反映されません。
上の記事のソースをコピー、一部変更し使ってみたのですが…。
幅は、「全体960px = コンテンツ630px + 余白30px + サイドバー300px」で計算しました。
ソースコードは以下のようになっています。
@media screen and (min-width: 600px) {
.site {max-width: 960px;}
.widget-area {width: 31.250%;}
.site-content {width: 65.625%;}
}
@media screen and (min-width: 600px) {
.ie8 .site {max-width: 960px;}
.ie8 .widget-area {width: 31.250%;}
.ie8 .site-content {width: 65.625%;}
}
ソースコードがおかしいのでしょうか？それとも、style.css以外にも変更しなければならない部分があるのでしょうか？
@media screen and (min-width: 600px){}を外すと、パソコンでは綺麗に表示されましたが、スマホだと崩れてしまいました。
他のサイトも見てみたのですが、自分ではよくわからなくなってしまいました…。
どうぞよろしくお願いします。