WordPressでは、テーマスタイルシートとして、style.cssをテーマファイルディレクトリの直下に必ず設置します。
テーマスタイルシートは、スタイルの指定だけでなく、テーマの名称など、テーマファイルに関する情報を定義します。
テーマに関する情報の定義
テーマスタイルシートでは、先頭の文字コード宣言に続き、以下のようにテーマに関する情報を記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@charset "UTF-8"; /* Theme Name: テーマ名 Theme URI: テーマURI — テーマの配布ページなど Description: テーマの解説 Author: 作者の名前 Author URI: 作者のURI Version: バージョン Tags: テーマに関するタグ(キーワード)をカンマ区切りで記述(オプション) License: ライセンス License URI: ライセンスURI コメント (オプション) */ |
一応、Tags
とコメント
がオプション扱いとされていますが、実際にはTheme Name
(テーマ名)の行だけがあれば問題無く動作するので、その他は必要に応じて記述してください。
Version
(バージョン)は、テーマファイルを管理する上で、しっかりと記述して随時更新する事をお薦めします。
必ずスタイルを定義するクラス
テーマ情報の後は、通常のCSSファイルと同じようにスタイルを記述します。
自由に記述して構いませんが、WordPressのシステム側で自動的に与えられるclassがいくつかあるので、それらに関するスタイルを定義しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { } .wp-caption-text { } .gallery-caption { } |
.align-center, .align-left, .align-right
は、投稿内で中央寄せ、左詰め、右詰めをした時に自動的に与えられます。基本的に上記の物をそのまま利用すれば良いです。
.wp-caption, .wp-caption-text
は、投稿内で画像を配置し、さらに画像のキャプションも設定した場合に与えられるクラスです。比較的使用しやすい部分ですので、使用される可能性がある場合は必ず定義しましょう。
.gallery-caption
は、ギャラリー機能を使用した場合に、画像のキャプションに与えられるクラスです。ギャラリー機能を使用する場合には定義しましょう。
clearfixを必ず設定する箇所
上記の.align-left, .align-right
はフロート要素なので、その外側のボックス、つまり投稿本文を表示するボックスには、clearfix
を設定する必要があります。
HTML側かCSS側で、投稿本文のボックスにclearfix
を適用します。
HTML側でclearfixを指定する例(CSSでもclearfixクラスを定義しておく)
1 2 3 |
<div class="entry-box clearfix"> <?php the_content(); ?> </div> |
CSS側でclearfixを指定する例
1 2 3 4 5 6 7 8 9 |
.entry-content:before, .entry-content:after { content: ""; display: table; } .entry-content:after { clear: both; } |
まとめ
テーマスタイルシート (style.css) のテンプレートです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
@charset "UTF-8"; /* Theme Name: テーマ名 Theme URI: テーマURI — テーマの配布ページなど Description: テーマの解説 Author: 作者の名前 Author URI: 作者のURI Version: バージョン Tags: テーマに関するタグ(キーワード)をカンマ区切りで記述(オプション) License: ライセンス License URI: ライセンスURI コメント (オプション) */ /* WordPress Required Classes */ .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { } .wp-caption-text { } .gallery-caption { } |