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

    初めまして!
    最近ワードプレスを始めて、ほとんどの設定をこちらのしげぞうさんのサイトを見てさせていただき、行いました。とても丁寧な説明をありがとうございますm(__)m

    twentytwelveを使用していますが、PC・タブレットのヘッダー画像とスマホのヘッダー画像を違うものにしたいのですが、どのようにしたらよいのでしょうか?

    お忙しいところ申し訳ございませんが、アドバイスをいただけたらと思います。
    よろしくお願いいたします。

  2. しげぞう より:

    MARY様

    コメントありがとうございます。私の場合はずっとTwentyTwelve使っているのであまり別のテーマ使った事がありません。Selaというテーマもよくわかりませんが、URLを教えてもらえたら実際にチェックして原因が探せるかもしれません。

    TwentyTwelveはシンプル過ぎるテーマでそのままでは使いにくいテーマだと思ってます。練習には最適ですが、あまりカスタマイズに時間を使いたくないという場合にはすでにある程度カスタマイズされているテーマを選ぶべきと思います。

  3. MARY より:

    しげぞう様、こんにちは。今日はこのサイトを熟読しながら、ワードプレスをやっと触ってみたのですが、幅の変更がうまくできなかったので教えてほしいです。
    具体的にはSelaというテーマで作ってみたのですが、左の余白が消せないので、コンテンツとウィジェットの幅が調整できませんでした。しげぞう様おすすめのTwentyTwelveにすればよかったと今更すごく後悔しているのですが、もしおすすめの方法があれば少しアドバイスをいただけると助かります。よろしくお願いいたします。

  4. gura より:

    しげぞう様

    返信ありがとうございます。私のPC上でズームが90%になっており、100%にすることで改善されました。一人で何日も悩んでいたので、本当に助かりました。

    知らないうちに90%になっていたみたいです。こういうものはブラウザを閉じたりPCの電源を切れば100%にリセットされるものと思い込んでいました。当初、私も「倍率が違うのかな?」と思ったので確認していましたが、ブラウザ(クローム)を立ち上げてGoogle検索画面(ホーム)でまず100%になっていることを確認してから自分のサイトへ検索していったので、てっきりそのままの100%表示になっていると思っていました。90%に勝手に変わるみたい…。

    一度90%にしたら同じサイトを開くときは、ズーム機能が戻らないということを初めて知る事ができました。初歩的な確認ミスで申し訳ございませんでした。しかし1人だったらもっと悩んでいたので、助かりました。本当にありがとうございます。

  5. しげぞう より:

    gura様

    コメントありがとうございます。URLまで!助かります。サイトチェックしてみましたが、サイトの幅は860pxでサイドバーも300pxになっていると思います。

    ピクセル定規って私は使った事ないのですが、特にサイドバーは狭い感じには見えませんし、検証ツールでも上記の幅になっていました。もし、gura様のPCの設定だとすると、多分ブラウザとかの設定にある「ズーム」とかの機能ではないかと思います。ブラウザで拡大も縮小もできるのでその辺もチェックしてみて下さい。あ、でもそれだと他のサイトとか見た時にも同じ縮小率になりますよね?

    サイドバーに「日本ブログ村のバナー」がありますよね、これ日本ブログ村で取得した所でサイズって調べる事ができますよね?多分これ234pxのバナーだと思うんですが、ピクセル定規で幅調べてもらえますか?

  6. gura より:

    しげぞう様

    いつもお世話になっております。以前も質問させていただいたguraといいます。

    サイトの幅について質問があります。
    現在、私のサイトではこの記事と同じ幅設定にしていてずっと問題なく表示されていると思っていました。今回、記事幅やサイドバーの幅を広げようと思い色々見ていたら、サイトの幅が指定している幅860px(記事530px+サイドバー300+余白30)になっていないと分かりました。

    サイト幅が反映されていないのは何故でしょうか?

    サイト内で「右クリック」→「検証」だと横幅は指定した530pxにしっかりなっています。
    ですが、ピクセル定規などのツールで幅を計ると480pxぐらいしかなく、サイドバーも270pxぐらいで明らかに横幅が小さいです。見た感じも小さいと思います。なのでピクセル定規の方が間違っているのかと思い、他のサイトの幅を調べてみましたがピクセル定規は正しいんです。CSSが悪いのか自分のPC設定が悪いのか何なのか訳が分からず、失礼かと思いましたが質問させていただきました。

    お忙しい中大変申し訳ございませんが、ご回答いただけると幸いです。

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