万が一、当サイトで重大な問題を発見した際などは、フォーラムや WordSlack #docs チャンネルでお知らせください。</p>
CSS
WordPress は、表示スタイルを CSS に大きく依存しています。WordPress v1.5 テーマの導入以来、レイアウトオプションは拡張というより、爆発的に広がりました。WordPress は、あなたのウェブサイトの見栄えを簡単に変更できるだけでなく、オリジナルテーマを作る、ページレイアウトするのに、大きな助けとなるでしょう。
CSS は Cascading Style Sheets を意味します。スタイル表示情報(色やレイアウト等)を蓄積し、HTML 構造から分離します。ウェブサイトのレイアウトの正確な制御が可能になり、更新が素早く、かつ容易に行えます。
ここでは WordPress での CSS 使用について簡単に説明し、詳細情報へのリファレンスリストを紹介します。CSS 自体についての情報は、en:Know Your Sources#CSS を参照してください。
WordPress と CSS
WordPress テーマは、テンプレートファイル、テンプレートタグ、CSS スタイルシートを組み合わせて WordPress サイトの見栄えを作成します。
- テンプレートファイル
- テンプレートファイルは、サイトを作成するブロックです。WordPress テーマ構造では、ヘッダ、サイドバー、コンテンツ、フッターがそれぞれ個別のファイルに含まれます。これらを組み合わせてページを作成します。こうすることで、ブロックをカスタマイズできます。例えば、デフォルトテーマ(訳注:2.9まで同梱 --Mizuno 2010年4月18日 (日) 13:01 (UTC))では、フロントページ、カテゴリーアーカイブ、アーカイブ、検索結果ページで複数の投稿が表示され、サイドバーが表示されます。いずれかの投稿をクリックすると個別投稿記事が表示され、サイドバーは表示されません。どの部分を表示させるか選択することができ、個別にカスタマイズでき、特定のカテゴリーで異なるヘッダやサイドバーを表示させる、などといったことができます。テンプレートについてのより詳細な解説は、テンプレート入門を参照してください。
- テンプレートタグ
- テンプレートタグは、WordPress データベースに蓄積されている情報に指示/要求するコードです。いくつかのタグはいろいろな設定が可能で、日付、時間、リスト、ウェブサイトに表示する他の要素をカスタマイズすることができます。テンプレートタグについてのより詳細な解説は、テンプレートタグ入門 を参照してください。
- CSS スタイルシート
- 全てはここに来ます。どのテンプレートファイルでも、XHTML タグと CSS リファレンスがテンプレートタグやコンテンツを囲んでいるでしょう。各テーマのスタイルシートには、ページ構造の命令が記述されています。これらの指示がなければ、長々とタイプされたページとして表示されるでしょう。これらの指示により、ブロック構造を移動し、ヘッダはグラフィックまたは画像で満たされ、あるいはシンプルで狭くされます。訪問者の画面上で、左右に空白があって中央で "float" させることができます。あるいは画面全体に広がらせることができます。サイドバーは右にも左にも配置でき、画面下部中央にさえ配置できます。スタイル方法はあなた次第です。 スタイルの指示は、テーマフォルダの style.css ファイルにあります。
WordPress が生成するクラス
画像やブロック要素(DIV, P, TABLE 等) を整列するクラスが、WordPress 2.5 でいくつか導入されました。: aligncenter、alignleft と alignright です。これに加えて、alignnone が整列されない画像に追加され、必要なら異なるスタイルにできます。
キャプション付き画像を整列するときにも同じクラスを使用します(WordPress 2.6 時点)。キャプションには追加の CSS クラスが 3 つ必要です。alignment と caption クラスは、以下のとおりです。
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
各テーマは、style.css ファイルでこれらのスタイルあるいは類似のスタイルで、画像とキャプションが適切に表示されるようにすべきです。
さらに、WordPress がデフォルトで生成するクラスタグがあり、これらのスタイルを指定したいこともあるでしょう。
.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}
参考資料
ウェブページにおける CSS の働きについてもっと理解するには、以下のリストの記事を参照してください。
- テンプレート - WordPress テーマとテンプレートの包括的リスト。(テーマの使い方から読み始めるとよいでしょう。このリストには上級記事も多くあります。)
- WordPress サイトデザイン リファレンス - WordPress のサイトデザインに関連する包括的リスト。
- en:WordPress Lessons - Lessons on all aspects of WordPress
WordPress レイアウトのヘルプ
WordPress テーマあるいはレイアウトについて質問/疑問があるときは、テーマ作成者のウェブサイトをまずチェックし、アップグレードや、質問の答えがあるかどうか調べてください。その他のリソースは以下のとおりです。
- Lessons on Designing Your WordPress Site
- en:Site Architecture 1.5
- en:CSS Troubleshooting
- en:Finding Your CSS Styles
- en:CSS Fixing Browser Bugs
- en:Validating a Website
- FAQ/レイアウトとデザイン
- テンプレート
- WordPress Support Forums
- WordPress CSS Guides by Podz
- en:CSS Shorthand
- en:HTML to XHTML NEW!
最新英語版： WordPress Codex » CSS （最新版との差分）
