当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「CSS」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
({{原文|CSS|82051}}<!-- 01:24, 12 January 2010 Luheou 版 -->)
(翻訳済み、div は付けていない)
 
1行目: 1行目:
{{NeedTrans}}
+
WordPress は、表示スタイルを CSS に大きく依存しています。[[テーマの使い方|WordPress v1.5 テーマ]]の導入以来、レイアウトオプションは拡張というより、爆発的に広がりました。WordPress は、あなたのウェブサイトの見栄えを簡単に変更できるだけでなく、[[テーマの作成|オリジナルテーマを作る]]、ページレイアウトするのに、大きな助けとなるでしょう。
WordPress relies heavily on the presentation styles within CSS. With the introduction of [[Using Themes|WordPress v1.5 Themes]], your layout options haven't just expanded, they've exploded!  WordPress has made it easier than ever to change your website look, and opened up the field even more to help you [[Theme Development|create your own Theme]] and page layout.
+
  
[[Glossary#CSS|CSS]] stands for '''Cascading Style Sheets'''.  It allows you to store style presentation information (like colors and layout) separate from your HTML structure.  This allows precision control of your website layout and makes your pages faster and easier to update.
+
[[用語集#CSS|CSS]] '''Cascading Style Sheets''' を意味します。スタイル表示情報(色やレイアウト等)を蓄積し、HTML 構造から分離します。ウェブサイトのレイアウトの正確な制御が可能になり、更新が素早く、かつ容易に行えます。
  
This article briefly describes the use of CSS in WordPress, and lists some references for further information.  For information on CSS itself, see [[Know Your Sources#CSS]].
+
ここでは WordPress での CSS 使用について簡単に説明し、詳細情報へのリファレンスリストを紹介します。CSS 自体についての情報は、[[:en:Know Your Sources#CSS]] を参照してください。
  
==WordPress and CSS==
+
==WordPress CSS==
  
WordPress Themes use a combination of [[Templates|template files]], [[Template Tags|template tags]], and CSS style sheets to generate your WordPress site's look.
+
WordPress テーマは、[[テンプレート|テンプレートファイル]][[テンプレートタグ|テンプレートタグ]]、CSS スタイルシートを組み合わせて WordPress サイトの見栄えを作成します。
  
;Template Files :[[Stepping Into Templates|Template files]] are the building blocks which come together to create your site. In the [[Site Architecture 1.5|WordPress Theme structure]], the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, [[Creating_an_Archive_Index|archives]], and [[Creating_a_Search_Page|search]] web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can [[The Loop in Action|choose which parts and pieces appear]] on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see [[Stepping Into Templates]].
+
;テンプレートファイル :[[テンプレート入門|テンプレートファイル]]は、サイトを作成するブロックです。[[:en:Site Architecture 1.5|WordPress テーマ構造]]では、ヘッダ、サイドバー、コンテンツ、フッターがそれぞれ個別のファイルに含まれます。これらを組み合わせてページを作成します。こうすることで、ブロックをカスタマイズできます。例えば、デフォルトテーマ(訳注:2.9まで同梱 --[[利用者:Mizuno|Mizuno]] 2010年4月18日 (日) 13:01 (UTC))では、フロントページ、カテゴリーアーカイブ、[[:en:Creating_an_Archive_Index|アーカイブ]][[Creating_a_Search_Page|検索結果]]ページで複数の投稿が表示され、サイドバーが表示されます。いずれかの投稿をクリックすると個別投稿記事が表示され、サイドバーは表示されません。[[:en:The Loop in Action|どの部分を表示させるか選択する]]ことができ、個別にカスタマイズでき、特定のカテゴリーで異なるヘッダやサイドバーを表示させる、などといったことができます。テンプレートについてのより詳細な解説は、[[テンプレート入門]]を参照してください。
;Template Tags :Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in [[Stepping Into Template Tags]].
+
;テンプレートタグ :テンプレートタグは、WordPress データベースに蓄積されている情報に指示/要求するコードです。いくつかのタグはいろいろな設定が可能で、日付、時間、リスト、ウェブサイトに表示する他の要素をカスタマイズすることができます。テンプレートタグについてのより詳細な解説は、[[テンプレートタグ入門]] を参照してください。
;CSS Style Sheets :This is where it all comes together. On every template file within your site, there are [[Site Architecture 1.5|XHTML tags and CSS references]] wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page.  With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the <tt>style.css</tt> file within each Theme folder.
+
;CSS スタイルシート :全てはここに来ます。どのテンプレートファイルでも、[[:en:Site Architecture 1.5|XHTML タグと CSS リファレンス]]がテンプレートタグやコンテンツを囲んでいるでしょう。各テーマのスタイルシートには、ページ構造の命令が記述されています。これらの指示がなければ、長々とタイプされたページとして表示されるでしょう。これらの指示により、ブロック構造を移動し、ヘッダはグラフィックまたは画像で満たされ、あるいはシンプルで狭くされます。訪問者の画面上で、左右に空白があって中央で "float" させることができます。あるいは画面全体に広がらせることができます。サイドバーは右にも左にも配置でき、画面下部中央にさえ配置できます。スタイル方法はあなた次第です。 スタイルの指示は、テーマフォルダの <tt>style.css</tt> ファイルにあります。
  
==WordPress Generated Classes==
+
==WordPress が生成するクラス==
  
Several classes for aligning images and block elements (DIV, P, TABLE etc.) were introduced in WordPress 2.5: <tt>aligncenter</tt>, <tt>alignleft</tt> and <tt>alignright</tt>. In addition the class <tt>alignnone</tt> is added to images that are not aligned, so they can be styled differently if needed.
+
画像やブロック要素(DIV, P, TABLE ) を整列するクラスが、WordPress 2.5 でいくつか導入されました。: <tt>aligncenter</tt><tt>alignleft</tt> <tt>alignright</tt> です。これに加えて、<tt>alignnone</tt> が整列されない画像に追加され、必要なら異なるスタイルにできます。
  
The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, together the alignment and caption classes are:
+
キャプション付き画像を整列するときにも同じクラスを使用します(WordPress 2.6 時点)。キャプションには追加の CSS クラスが 3 つ必要です。alignment と caption クラスは、以下のとおりです。
  
 
  .aligncenter,
 
  .aligncenter,
61行目: 60行目:
 
  }
 
  }
  
Each theme should have these or similar styles in its <tt>style.css</tt> file to be able to display images and captions properly.
+
各テーマは、<tt>style.css</tt> ファイルでこれらのスタイルあるいは類似のスタイルで、画像とキャプションが適切に表示されるようにすべきです。
  
Additionally, there are a few more WordPress class tags that you may optionally wish to style because they are generated by default:
+
さらに、WordPress がデフォルトで生成するクラスタグがあり、これらのスタイルを指定したいこともあるでしょう。
  
 
  .categories {...}
 
  .categories {...}
80行目: 79行目:
 
  .linkcat{...}
 
  .linkcat{...}
  
==See also==
+
==参考資料<!-- See Also -->==
  
To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:
+
ウェブページにおける CSS の働きについてもっと理解するには、以下のリストの記事を参照してください。
  
* [[Templates]] - Comprehensive list of WordPress Theme and Template articles (a good starting point is [[Using Themes]], and there are also many advanced articles in this list)
+
* [[テンプレート]] - WordPress テーマとテンプレートの包括的リスト。([[テーマの使い方]]から読み始めるとよいでしょう。このリストには上級記事も多くあります。)
* [[Blog Design and Layout]] - Comprehensive list of resources related to site design in WordPress
+
* [[WordPress サイトデザイン リファレンス]] - WordPress のサイトデザインに関連する包括的リスト。
* [[WordPress Lessons]] - Lessons on all aspects of WordPress
+
* [[:en:WordPress Lessons]] - Lessons on all aspects of WordPress
  
== WordPress Layout Help ==
+
== WordPress レイアウトのヘルプ ==
  
If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other resources:
+
WordPress テーマあるいはレイアウトについて質問/疑問があるときは、テーマ作成者のウェブサイトをまずチェックし、アップグレードや、質問の答えがあるかどうか調べてください。その他のリソースは以下のとおりです。
  
* [[WordPress Lessons#Designing Your WordPress Site|Lessons on Designing Your WordPress Site]]
+
* [[:en:WordPress Lessons#Designing Your WordPress Site|Lessons on Designing Your WordPress Site]]
* [[Site Architecture 1.5]]
+
* [[:en:Site Architecture 1.5]]
* [[CSS Troubleshooting]]
+
* [[:en:CSS Troubleshooting]]
* [[Finding Your CSS Styles]]
+
* [[:en:Finding Your CSS Styles]]
* [[CSS Fixing Browser Bugs]]
+
* [[:en:CSS Fixing Browser Bugs]]
* [[Validating a Website]]
+
* [[:en:Validating a Website]]
* [[FAQ Layout and Design]]
+
* [[FAQ/レイアウトとデザイン]]
* [[Templates]]
+
* [[テンプレート]]
 
* [http://www.wordpress.org/support/ WordPress Support Forums]
 
* [http://www.wordpress.org/support/ WordPress Support Forums]
 
* [http://www.tamba2.org.uk/wordpress/graphicalcss/ WordPress CSS Guides by Podz]
 
* [http://www.tamba2.org.uk/wordpress/graphicalcss/ WordPress CSS Guides by Podz]
* [[CSS Shorthand]]
+
* [[:en:CSS Shorthand]]
* [[HTML to XHTML]] <span style="color:red">NEW!</span>
+
* [[:en:HTML to XHTML]] <span style="color:red">NEW!</span>
  
[[Category:Design and Layout]]
+
[[Category:デザインとレイアウト]]
  
 
{{原文|CSS|82051}}<!-- 01:24, 12 January 2010 Luheou 版 -->
 
{{原文|CSS|82051}}<!-- 01:24, 12 January 2010 Luheou 版 -->

2010年4月18日 (日) 22:01時点における最新版

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最新版との差分