WordPress テーマの詳説：第一章

２００７年７月７日

新しいサイト”わーどぷれすっ！”をオープンしました。

今後はWordPress関連の話題は全部このサイトに投稿していきます。プラグイン一覧もこの新サイトに移しましたので、ドウゾよろしくお願いします。

WordPress テーマの詳説：第一章

2005年 5月 8日 · コメント5個 | とらっくばっくURL

デザインの選択

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

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

サイドバー

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

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

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

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

#sidebar
{
  float: right;
  width: 190px;
}

これを三つに分けてみる

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

ページ： 1 2 3 4 5 6 7 8

カテゴリー： WP ヒント · WordPress

コメント/トラックバック5個 ↓

1 UrbanGiraffe » Japanese translation // 2005年 5月 11日＠ 5:07 AM

[...] Japanese translation of part one of the WordPress theme dissection, written by Tai over at Tekapo. Nice work Tai, and thanks for the translation! Leave a Reply [...]
2 Standing Tall // 2005年 10月 28日＠ 4:20 PM

WordPress テーマの詳説：第二章

「Dissection of a WordPress theme: Part 2」の訳「WordPress テーマの詳説：第二章」がやっと終了。
この章では第一章の修正から入って、CSSのちょっとした解説やら各ブラウザーへの対応やらで個…
3 WordPress導入レポ・テーマ | 12-09.net // 2008年 4月 24日＠ 4:15 PM

[...] WordPress テーマの詳説：第一章 [...]
4 テーマ作成、修正の参考和訳ページ | setting_web // 2008年 5月 28日＠ 11:14 AM

[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]
5 がじゅまろの樹» ブログアーカイブ » 必須情報は忘れるためにある // 2008年 6月 22日＠ 11:24 AM

[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]