WordPress テーマの詳説:第一章

デザインの選択

沢山のコードの中でウェブサイトを見失う前に、何か実践的なことをしてみよう。いまのところ、私たちのサイトには一番上にタイトルがあり、真ん中に投稿、下にサイドバー、その下にフッターがある。スタイルを取り除くと自動的に可変幅のデザインになる。というわけで、こうした各部分を自分のサイト用にアレンジしなくてはならない。このガイドでは標準的な2列レイアウトを作成していく:

Layout

このデザインをスクリーン上に実現させるためには、いうまでも無いが、サイドバーを右側に移動させなければならない。

Current layout

サイドバー

このサイドバーの中身はsidebar.phpファイルにある。このファイルをのぞいてみるとたくさんのコードが有るが、次のもの以外は無視してよい:

	<div id=”sidebar”>
        … sidebar code …
	</div>

ID「sidebar」を持った一つのdivセクションにすべてがきれいに収まっている。これこそが必要なもので、sidebar.php内のコードを一行たりとも触らずに、CSSファイルに適切なスタイルを追加するだけでサイドバーの外観を変更することができる。

ではstyle.cssを編集してヘッダーの次に次のスタイルを追加してみよう:

1
	
2
3
	
#sidebar
{
  float: right;
  width: 190px;
}

これを三つに分けてみる

  1. #sidebar‘ – これはこのスタイルが、サイドバーのIDを持った要素のためのものであることをブラウザに伝える(「.sidebar」ならサイドバーのクラスを意味する)
  2. float: right‘ – これは画面右側にサイドバーを「float」させる(浮かせる)。左側に浮かせたければ「left」を同じように使うことができる。
  3. width: 190px‘ – 可変幅のデザインではあるがサイドバーのサイズは変更させたくない。これはサイドバーの幅を190ピクセルに固定する(好みに合わせて変更すると良い)