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. より:

    しげぞう様

    お返事ありがとうございます。ブログのURLはコチラです。

    スマホ表示だとヘッダーが小さく表示されるのも気になっていますが、CSSやHTMLの事はわからない事だらけで修正しようにも何もできない状況です。

    難しいと思うのですが、宜しくお願い致します。

  2. しげぞう より:

    翔様

    コメントありがとうございます。何となくは想像できるのですがやはり実際に見てみないとハッキリ原因が分かりません。私自身もRMAテンプレートというのは試した事がないので、原因が特定できるかは分かりませんが、HTMLとCSSに原因はチェックできるかなと思います。なのでもし良かったらURL教えて下さい。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  3. より:

    ご無沙汰しおります。心配しておりました。無事退院されてなによりです。

    2ヶ月ほど前にワードプレスで作成したブログで改善したい点があるのですが、やり方がわからず大変困っております。

    CSSに関する事なのですが、自分なりにどれだけ調べてやってみても上手くいきません。ワードプレス自体初めてで、かなり悪戦苦闘しております(泣)

    言葉で説明するのが難しいので、分かりにくいかもしれないのですが

    スマホで表示した際、メインコンテンツの横にブログの背景が映ってしまい、そのせいで本文の文字横にある余白がほとんどないのです。

    時々横ズレもしてしまうので、この2つを合わせて修正したいと思っています。

    こんな説明でわかりますでしょうか?

    メディアクエリ?とかいうのも試しましたが、上手くいきませんでした。スマホだけテーマを変えたりもしたのですが、今のテーマが1番しっくりくるので、できれば変えたくはありません。

    RMAテンプレートという、少し特殊なテーマを使っており、ワンカラムなのが特徴です。その為なのか、スマホでもPCとほとんど同じ表示です。

    恥ずかしいですが、ご要望とあればブログをお見せするのも可能です。

    ブログのテーマ上、スマホからのアクセスの方が多くなると思うので、スマホ表示が不細工なのはマズイんですよね…

    難しいかと思うのですが、どうぞ知恵をお貸しくださいませ

  4. gori より:

    しげぞうさま

    バッチリ反映されましたー。これでスマホからとても見やすくなりました。ほんと何から何までありがとうございます!

  5. しげぞう より:

    gori様

    コメントありがとうございます。そうです、スマホで表示された時の横幅などは変更してます。文字の大きさとかはスマホの「フォントサイズ」で各自見やすい大きさに変更されます。端末で設定できる部分なので、文字の大きさなどは反映されない場合がありますが、横幅は変更できます。

    以前の記事で紹介してますので、参考にしてみて下さい。結構長い記事の途中に書いてます。
    劇的改善!ブログのアクセスアップにつながった6つの施策を全部公開

  6. gori より:

    しげぞう様

    このサイトを見ていてふと気づいたのですが、スマホで表示された時のコンテンツの横幅やリンク文字の大きさなどをpcで表示される時と変えていますか?
    と言うのも、しげぞうさんのサイトだとすまほで表示すると文字が1列18文字並んでいるのですが、自分のサイトだと17文字になっていてリンクの文字も小さいです。
    これはまた何か問題が発生しているのでしょうk?
    もし変えているのであればコードを教えて頂けれませんか?

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