Twenty Twelveのコンテンツ領域変更法

Twenty Twelveでのカスタマイズ方法なんですが、他のテーマでも考え方は多分そうは変わらないかと思うので、覚えておいてと言うか、ほとんど自分用の記事ですw

やっぱりTwenty Twelveは編集しやすい!

スポンサーリンク

コンテンツ領域を変える

まずですね、子テーマを作っている事を前提に書いて行くので、子テーマを作っといて下さいな。

子テーマの作り方

ハイそれでは進みますね。百聞は一見に如かずです。

これは当ブログの幅を指定したものです。これを子テーマの【style.css】に書き込みます。

まあここまでしなくても、フッターエリアだけ300pxに変更したかったんですけど、きちっと表示していた方が後々良いかなと思いこうなりました。

サイドバー幅だけだと

これだけで済みます。

計算方法

さて、計算方法なのですが、面倒ならさっさとコピペで済ませて下さい。

自分に合ったサイズに変更するには、まずTwenty Twelveの構造を知っておきましょう。

wwyt

全幅=メインコンテンツ+ウィジェット+間の余白

つまり、625+250+85=960pxになる訳です。これを好きな幅にしていく訳ですが、先に各幅を指定します。

私の場合は、そのまま全体の幅が960px、コンテンツ領域もそのまま625pxウィジェットだけ300pxに変更だけなので、中間の余白が狭まり35pxになっただけです。

※コンテンツとウィジェット幅が全体の幅(この場合960px)より大きくならない事。

知っておけば楽!計算方法

一番初めに私の記述を晒した訳ですが、この様にパーセント表示にして記入するので、その計算式を書いて行きます。

コンテンツの幅÷全体の幅×100

簡単ですよね。これを私の場合に当てはめると

コンテンツ幅 625÷960×100=65.1041666666%

ウィジェット幅 300÷960×100=31.25%

ハイこれでパーセント数値が出ました。後は子テーマに記述するだけで完了です。

このまま、子テーマに張り付けます。

ie8は私はクロームで見ているので、別ブラウザの為に一応記述しました。

  • 【.site】は全体の幅でpxで表記
  • 【.site-content】はメインコンテンツの数値をパーセント表記
  • 【.widget-area】はウィジェット幅の数値をパーセント表記

@mediaとは、簡単に言うと、この幅に対してはこう表示してね!という記述方法です。詳しくはまたいずれと言う事で。

Twenty Twelveでなくても覚えておいて損はないかと思います。有料テンプレート等を使っていても知っていて損はないですよ。

スポンサーリンク

シェアする

フォローする

スポンサーリンク