TwentyTwelveのサイトの幅やサイドバーの幅を変更する方法

WordPressの始め方や使い方まとめ

今回はTwentyTwelveの全体の幅、記事コンテンツの横幅とサイドバーの横幅を広くしたり、狭くするカスタマイズを紹介します。

TwentyTwelveの初期状態ではコンテンツ全体の横幅が960pxになっています。以前無料ブログでブログを作成していた私にはこの幅が広すぎると感じたのでこのブログでは全体の幅を860pxに変更しています。

スポンサーリンク

TwentyTwelveの全体の構造を把握しておく

最初にTwentyTwelveの全体の構成を見ておくとスムーズに変更できると思いますので、まずはこの図を見てください。

横幅変更-1
参考:work.log様

全体図としてはこのようになっています。

  • コンテンツ領域(記事の部分):625px
  • ウィジェット領域(サイドバー):250px
  • 中間余白(中間の余白):85px

この3つの合計が960pxになる訳ですね。TwentyTwelveの横幅を変更する場合は最初に全体の幅を指定して、コンテンツ領域とサイドバーの領域をそれぞれパーセントで指定します。

例えば全体の幅を100%としてコンテンツ領域を60パーセント、サイドバーを35パーセントと指定すれば残りの5パーセントが中間の余白として指定されます。

先に各領域の幅を決めておく

先ほどそれぞれの領域をパーセントで指定すると書きましたが最初に「px」で各領域の幅を決めておきます。順番としてはこのような順番で決めるといいです。

  1. 最初に全体の幅
  2. コンテンツ領域の幅
  3. サイドバーの幅

私の場合は「全体の幅」を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の横幅を変更するカスタマイズは終了です。

コメント

  1. しげぞう より:

    Kita様

    コメントありがとうございます。ブログも確認させて頂きましたが、スタイルシートで記述ミスがあるようです。具体的にはコンテンツの幅を広げるコード自体はOKなのですが、そのコードの前に書かれている「サイドバー文字にリストマークを付ける」という部分でコードの閉じタグ「 } 」 がありませんので、閉じタグで閉じて試して見てください。

    また、前回返信したように、A8のタグにはimgタグが2つあり、これが余白を1行分だけ下にずらしている可能性があります。なので、サイドバーの幅を300PXにしても余白の改善ができるかどうかはちょっとやってみないと分かりません。一度試してみて、それでも余白が空くという場合には別のASPの広告を使った方が良いかもしれません。

  2. Kita より:

    先ほどはありがとうございます。
    広告サイズが幅300pxなので、サイドバーも300pxか320pxとしようかと思い、やってみましたが、下記コメントにもあるように、なぜか反映されません。

    コンテンツ(本文)とサイドバーの余白が80px?ほどあると思いますが、50pxサイドバーに持っていこうと思ってます。自分でも「要素を検証」で見てみたんですが、わかりませんでした。
    すいません、再度になってしまいますが、よろしくお願い致します。

  3. しげぞう より:

    >non様

    コメントありがとうございます。わざわざ報告して頂きありがとうございました。テーマは違うので若干違う部分もでてくると思いますが、また分からない部分などコメント頂けたら嬉しいです。どうぞよろしくお願い致します。

  4. non より:

    Webサイト作成初心者のものです。
    Twenty Fourteenを初めて使い、スタイルシートなるものからスタートしております。
    全体像を把握でき、仕組みと計算の仕方を知ることができました。
    本当に助かりました。
    ありがとうございます。

  5. しげぞう より:

    >sai様

    コメントありがとうございます。sai様のコメントでのソースをそのまま貼り付けてみましたが、私のサイトでは上手く反映されましたので、ソース自体は間違っていないと思います。ちょっと原因がよく分からないのでもしよければURLを教えて頂けないでしょうか?コメント公開時にはURLは削除しますので。

  6. sai より:

    はじめまして。
    こちらのサイトを参考に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){}を外すと、パソコンでは綺麗に表示されましたが、スマホだと崩れてしまいました。
    他のサイトも見てみたのですが、自分ではよくわからなくなってしまいました…。

    どうぞよろしくお願いします。

タイトルとURLをコピーしました