Twentytenの横幅を広げ、3カラムにする方法




WordPressのTwentyTenを使うときに、ヘッダー・フッター部分をブラウザの横幅いっぱいに広げて使いたいと思う時があります。

今回は、TwentyTenを横幅いっぱいに広げる方法を記載します。

デフォルトのデザインだけだと面白みが無いし、

でも、レイアウトを改造するのは難しそうだし、

という方のために、できる限り細かく記載してみます。

はじめてこの作業を行ったとき、途中でわからなくなり

何度かレイアウトが崩壊しました。(挫折)

いろいろな手順がありますが、まずここに記載する方法で

やってみると良いでしょう。

 

全体の構成を把握

TwentyTenのレイアウトがどのような構成になっているかを

図にしてみました。

こちらでまず、構成を把握して下さい。↓↓

Wordpress twenteyten css 構成図

twenteyten-css構成図


 

wrapperの変更

TwentyTenはこんな構成になっているんです。

一度覚えてしまえば、あとは楽です。

まず、全体は「body」となっているので、「body」に変更は加えません。

横に大きく広げるには、どうすればよいか?

図を見ると「wrapper」を広げる必要があることがわかりますね。

「wrapper」を横幅いっぱいに伸びるように設定を変えましょう。

【変更前】

【変更後】

※元のソースに「wrapper」が2つあるので、上の部分からはずし、下にまとめる。
※下にまとめた「wrapper」にwidth:100%;を加える。

↓下記のように横幅が広がりましたか?

wordpress twenteyten-css wrapperを広げた図

twenteyten-css wrapperを広げた図

 

グローバルナビ(#acccess)の変更

グローバルナビの横幅を100%に変更して横に伸ばします。
【変更前】

【変更後】

↓下記の画像のようになったでしょうか?ナビの背景が画面横幅と同じになればOKです。
※左側が少し空いていますがこれは後ほど修正します。

メニューを中央に変更

メニューを中央に変更


 

グローバルナビを中央に移動

画面では見にくいかもしれませんが、ナビ部分が左に寄っています。

下記のように中央に表示させるように変更します。

「margin : 0 auto;」と変更するのがポイントです。
【変更前】

【変更後】

左側の空いている部分をなくす。
【変更前】

【変更後】

※paddingを0に変更。

わかりやすいように色をつけてみましょう。

※mastheadは色が変わらない(IE8とFirefox。IE6とIE7は表示される。CSS強くないので原因不明)

twenteyten-css ワイド 識別色付き

twenteyten-css ワイド 識別色付き

headerの高さを調整

twenteyten-css ヘッダの高さを調整した画像

twenteyten-css ヘッダの高さを調整

ここで一息つきましょう。

これで横に広げるという目的は達成できました。

2カラムで使う場合もありますが、

3カラムで使いたい場合も多いですよね?

さて、次に3カラムに変更してみましょう。

両サイドにサブメニュー、真ん中にメインコンテンツという形にします。

 

「container」のマージンを0にし、「content」の両脇を空ける

【変更前】

【変更後】

※「content」の240pxは自分の好きなサイズに調整しましょう。

下図のように「content」が中央にきて、「primary」「secondary」が下に落ちているような形になります。

twenteyten-css primary secondary落下画像

twenteyten-css primary secondary 落下画像

「primary」の幅をwidthで指定し、floatをleftにします。

「container」の右端にひっかかるような形になるので、

マイナスマージンを利用して、左側に持ってきます。

「margin: 0 0 0 -940px;」

「secondary」も同様の考え方です。

【変更後】

フッター

twenteyten-css 3カラム完成画像

twenteyten-css 3カラム完成画像

さてこれで横幅が広がり、3カラムになりました。

あとは、幅や高さ、カラーを設定して

自分好みのデザインに変更しましょう。
 

【その他カスタマイズ】

グローバルナビを自分で作ったものに変更してみましょう。
ナビの幅は横1120px、縦40pxです。
画像を作るときは
1120×120(縦は3段)で作成します。

header.phpを

のように変更。
デフォルトでヘッダ画像が管理画面から設定できるようになっているが、
それを削除して、上のような形に入れ替えてしまう。

上記のCSS




人気記事一覧


関連記事一覧

This entry was posted in TwentyTenカスタマイズ and tagged , , , , , , , , . Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">