デザインの選択
沢山のコードの中でウェブサイトを見失う前に、何か実践的なことをしてみよう。いまのところ、私たちのサイトには一番上にタイトルがあり、真ん中に投稿、下にサイドバー、その下にフッターがある。スタイルを取り除くと自動的に可変幅のデザインになる。というわけで、こうした各部分を自分のサイト用にアレンジしなくてはならない。このガイドでは標準的な2列レイアウトを作成していく:
このデザインをスクリーン上に実現させるためには、いうまでも無いが、サイドバーを右側に移動させなければならない。
サイドバー
このサイドバーの中身はsidebar.phpファイルにある。このファイルをのぞいてみるとたくさんのコードが有るが、次のもの以外は無視してよい:
<div id=”sidebar”> … sidebar code … </div>
ID「sidebar」を持った一つのdivセクションにすべてがきれいに収まっている。これこそが必要なもので、sidebar.php内のコードを一行たりとも触らずに、CSSファイルに適切なスタイルを追加するだけでサイドバーの外観を変更することができる。
ではstyle.cssを編集してヘッダーの次に次のスタイルを追加してみよう:
1 2 3 |
#sidebar { float: right; width: 190px; } |
これを三つに分けてみる
- ‘
#sidebar
‘ – これはこのスタイルが、サイドバーのIDを持った要素のためのものであることをブラウザに伝える(「.sidebar」ならサイドバーのクラスを意味する) - ‘
float: right
‘ – これは画面右側にサイドバーを「float」させる(浮かせる)。左側に浮かせたければ「left」を同じように使うことができる。 - ‘
width: 190px
‘ – 可変幅のデザインではあるがサイドバーのサイズは変更させたくない。これはサイドバーの幅を190ピクセルに固定する(好みに合わせて変更すると良い)
「WordPress テーマの詳説:第一章」への7件のフィードバック
コメントは停止中です。