• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

CSS

提供: WordPress Codex 日本語版
移動先: 案内検索

WordPress は、表示スタイルを CSS に大きく依存しています。WordPress v1.5 テーマの導入以来、レイアウトオプションは拡張というより、爆発的に広がりました。WordPress は、あなたのウェブサイトの見栄えを簡単に変更できるだけでなく、オリジナルテーマを作る、ページレイアウトするのに、大きな助けとなるでしょう。

CSSCascading 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 でいくつか導入されました。: aligncenteralignleftalignright です。これに加えて、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 Codex » CSS最新版との差分