WordPressのTwentyTenを使うときに、ヘッダー・フッター部分をブラウザの横幅いっぱいに広げて使いたいと思う時があります。
今回は、TwentyTenを横幅いっぱいに広げる方法を記載します。
デフォルトのデザインだけだと面白みが無いし、
でも、レイアウトを改造するのは難しそうだし、
という方のために、できる限り細かく記載してみます。
はじめてこの作業を行ったとき、途中でわからなくなり
何度かレイアウトが崩壊しました。（挫折）
いろいろな手順がありますが、まずここに記載する方法で
やってみると良いでしょう。
全体の構成を把握
TwentyTenのレイアウトがどのような構成になっているかを
図にしてみました。
こちらでまず、構成を把握して下さい。↓↓
twenteyten-css構成図
wrapperの変更
TwentyTenはこんな構成になっているんです。
一度覚えてしまえば、あとは楽です。
まず、全体は「body」となっているので、「body」に変更は加えません。
横に大きく広げるには、どうすればよいか？
図を見ると「wrapper」を広げる必要があることがわかりますね。
「wrapper」を横幅いっぱいに伸びるように設定を変えましょう。
【変更前】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* =Structure -------------------------------------------------------------- */ /* The main theme structure */ #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { margin: 0 auto; width: 940px; } #wrapper { background: #fff; margin-top: 20px; padding: 0 20px; } |
【変更後】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* The main theme structure */ #access .menu-header, div.menu, #colophon, #branding, #main { margin: 0 auto; width: 940px; } #wrapper { background: #CCC6C9; margin-top: 20px; padding: 0 0px; width:100%; } |
※元のソースに「wrapper」が２つあるので、上の部分からはずし、下にまとめる。
※下にまとめた「wrapper」にwidth:100%;を加える。
↓下記のように横幅が広がりましたか？
twenteyten-css wrapperを広げた図
グローバルナビ（#acccess)の変更
グローバルナビの横幅を100%に変更して横に伸ばします。
【変更前】
|
1 2 3 4 5 6 7 |
#access { background: #000; display: block; float: left; margin: 0 auto; width: 940px; } |
【変更後】
|
1 2 3 4 5 6 7 |
#access { background: #000; display: block; float: left; margin: 0 auto; width: 100%; } |
↓下記の画像のようになったでしょうか？ナビの背景が画面横幅と同じになればOKです。
※左側が少し空いていますがこれは後ほど修正します。
メニューを中央に変更
グローバルナビを中央に移動
画面では見にくいかもしれませんが、ナビ部分が左に寄っています。
下記のように中央に表示させるように変更します。
「margin : 0 auto;」と変更するのがポイントです。
【変更前】
|
1 2 3 4 5 6 |
#access .menu-header, div.menu { font-size: 13px; margin-left: 12px; width: 928px; } |
【変更後】
|
1 2 3 4 5 6 |
#access .menu-header, div.menu { margin: 0 auto; font-size: 13px; width: 940px; } |
左側の空いている部分をなくす。
【変更前】
|
1 2 3 4 5 6 |
#wrapper { background: #CCC6C9; margin-top: 20px; padding: 0 20px; width:100%; } |
【変更後】
|
1 2 3 4 5 6 |
#wrapper { background: #CCC6C9; margin-top: 20px; padding: 0 0px; width:100%; } |
※paddingを0に変更。
わかりやすいように色をつけてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
#body→#908C8C; #wrapper→background: #CCC6C9; #header→ background-color:#9999FF; #masthead→background-color:#7C7ECB; #main→background-color:#BEE3E3; #container→background-color:#86C9C8; #content→background-color:#27ACAA; #primary→background-color:#8FD6B0; #secondary→background-color:#5EB688; #footer→background-color:#BEBE96; #colophon→background-color:#C8C763; |
※mastheadは色が変わらない（IE8とFirefox。IE6とIE7は表示される。CSS強くないので原因不明)
twenteyten-css ワイド 識別色付き
headerの高さを調整
|
1 2 3 |
#header { height:270px; } |
twenteyten-css ヘッダの高さを調整
ここで一息つきましょう。
これで横に広げるという目的は達成できました。
2カラムで使う場合もありますが、
3カラムで使いたい場合も多いですよね？
さて、次に３カラムに変更してみましょう。
両サイドにサブメニュー、真ん中にメインコンテンツという形にします。
「container」のマージンを0にし、「content」の両脇を空ける
【変更前】
|
1 2 3 4 5 6 7 8 |
#container { float: left; margin: 0 -240px 0 0; width: 100%; } #content { margin: 0 280px 0 20px; } |
【変更後】
|
1 2 3 4 5 6 7 8 |
#container { float: left; margin: 0 0; width: 100%; } #content { margin: 0 240px 0 240px; } |
※「content」の240ｐｘは自分の好きなサイズに調整しましょう。
下図のように「content」が中央にきて、「primary」「secondary」が下に落ちているような形になります。
twenteyten-css primary secondary 落下画像
「primary」の幅をwidthで指定し、floatをleftにします。
「container」の右端にひっかかるような形になるので、
マイナスマージンを利用して、左側に持ってきます。
「margin: 0 0 0 -940px;」
「secondary」も同様の考え方です。
【変更後】
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#primary { background-color:#8FD6B0; float: left; width: 200px; margin: 0 0 0 -940px; } #secondary { background-color:#5EB688; float: left; width: 200px; margin: 0 0 0 -200px; } |
フッター
|
1 2 3 4 5 |
#footer { clear: both; width: 100%; background-color:#BEBE96; } |
twenteyten-css ３カラム完成画像
さてこれで横幅が広がり、3カラムになりました。
あとは、幅や高さ、カラーを設定して
自分好みのデザインに変更しましょう。
【その他カスタマイズ】
グローバルナビを自分で作ったものに変更してみましょう。
ナビの幅は横1120px、縦40pxです。
画像を作るときは
1120×120（縦は3段）で作成します。
header.phpを
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
</head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <div id="header"> </div><!-- #header --> <div id="navi_box"> <div id="globalnavi2"> <ul> <li class="navi01"><span class="active">トップページ</span></li> <li class="navi02"><a href="index.php"></a></li> <li class="navi03"><a href="index.php"></a></li> <li class="navi04"><a href="index.php"></a></li> <li class="navi05"><a href="index.php"></a></li> <li class="navi06"><a href="index.php"></a></li> <li class="navi07"><a href="index.php"></a></li> </ul> </div><!--/globalnavi2 --> </div><!--navi_box--> <div id="main"> |
のように変更。
デフォルトでヘッダ画像が管理画面から設定できるようになっているが、
それを削除して、上のような形に入れ替えてしまう。
上記のＣＳＳ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/*glovalnavi2 -------------------------------------------------------------*/ div#navi_box { width:100%; background-color:#7AA3C2; clear:both; } *+ div#navi_box { width:100%; background-color:#7AA3C2; clear:both; } div#globalnavi2{ width: 1120px; margin: 0 auto; height: 40px; background-image: url("../twentyten/images/main_navi.jpg"); background-repeat: repeat-x; background-position: 0 0 0 0; clear:both; } *div#globalnavi2{ width: 1120px; margin: 0 auto; height: 40px; background-image: url("../twentyten/images/main_navi.jpg"); background-repeat: repeat-x; background-position: 0 0 0 0; } *+html body div#globalnavi2{ width: 1120px; margin: 0 auto; height: 40px; background-image: url("../twentyten/images/main_navi.jpg"); background-repeat: repeat-x; background-position: 0 0 0 0; } div#globalnavi2 ul{ width: 1120px; height: 40px; margin: 0 0 0 0 ; } div#globalnavi2 ul li{ float: left; width: 160px; height: 40px; margin: 0; padding: 0; list-style-type: none; border-bottom: 0px solid #696969; } div#globalnavi2 ul li a{ display: block; width: 160px; height: 40px; margin: 0; background-image: url("../twentyten/images/main_navi.jpg"); background-repeat: no-repeat; text-indent:-9999px; } div#globalnavi2 ul li a:focus{ outline: none; } div#globalnavi2 ul li span.active{ display: block; width: 160px; height: 40px; margin: 0; background-image: url("../twentyten/images/main_navi.jpg"); background-repeat: no-repeat; text-indent:-9999px; } div#globalnavi2 ul li.navi01 a { background-position: 0 0; } div#globalnavi2 ul li.navi02 a { background-position: -160px 0; } div#globalnavi2 ul li.navi03 a { background-position: -320px 0; } div#globalnavi2 ul li.navi04 a { background-position: -480px 0; } div#globalnavi2 ul li.navi05 a { background-position: -640px 0; } div#globalnavi2 ul li.navi06 a { background-position: -800px 0; } div#globalnavi2 ul li.navi07 a { background-position: -960px 0; } div#globalnavi2 ul li.navi01 a:hover { background-position: 0px -40px; } div#globalnavi2 ul li.navi02 a:hover { background-position: -160px -40px; } div#globalnavi2 ul li.navi03 a:hover { background-position: -320px -40px; } div#globalnavi2 ul li.navi04 a:hover { background-position: -480px -40px; } div#globalnavi2 ul li.navi05 a:hover { background-position: -640px -40px; } div#globalnavi2 ul li.navi06 a:hover { background-position: -800px -40px; } div#globalnavi2 ul li.navi07 a:hover { background-position: -960px -40px; } div#globalnavi2 ul li.navi01 span.active{ background-position: 0px -80px; } div#globalnavi2 ul li.navi02 span.active{ background-position: -160px -80px; } div#globalnavi2 ul li.navi03 span.active{ background-position: -320px -80px; } div#globalnavi2 ul li.navi04 span.active{ background-position: -480px -80px; } div#globalnavi2 ul li.navi05 span.active{ background-position: -640px -80px; } div#globalnavi2 ul li.navi06 span.active{ background-position: -800px -80px; } div#globalnavi2 ul li.navi07 span.active{ background-position: -960px -80px; } |
人気記事一覧
- MySQL 最大の値・最新の日付データを１つ抽出する方法（MAX）
- [CakePHP] XformHelperの使い方
- Linux: スワップファイル（swp）の削除方法
- HTMLのForm methodとactionについて
- PHPでカンマ区切りデータを配列に入れる方法 （explode）
- [エラー対処] failed to open stream: No such file or directory
- [CSS]ブロック要素（div）の高さを、内部のfloat要素に合わせて自動調整する
- [vsftp] FileZillaから接続できない場合の対処法
- PHP5.1→PHP5.3へバージョンアップする方法（CentOS）
- PHPでテキストを１行ずつ読み込む方法（file_get_contents,explode)
関連記事一覧
- [CakePHP2]フォームのチェックボックスの複数グループ化（二次元配列）
- 配列からランダムで値を取得（array_rand）
- WordPress Twentyten 子テーマの利用方法
- [CSS]ブロック要素（div）の高さを、内部のfloat要素に合わせて自動調整する
- WordPressのカテゴリーページの自動抜粋表示を全記事表示に
- [PHP] 画像の縦・横の数値(大きさ）を取得
- [CSS]長い文字列（text）を要素内で折り返す方法
- PHP 掛算の表の作成 （for構文）
- [CakePHP2]TwitterBootstrapのフォーム（input）の幅を変更する方法
- SSHのポートの変更