「【Wordpress】オリジナルテーマを作るために必要なファイル」で、オリジナルテーマを作るために必要なファイルが「style.css」「index.php」ということが分かりました。
今回はその内の「style.css」には何を書けばいいかを説明します。
スポンサーリンク文字コードを設定
通常のスタイルシート（cssファイル）と同じように文字コードを設定しましょう（@charset）。
基本的に文字コードは「utf-8」で問題ありません。注意点としては、phpやhtmlファイルの文字コードも「utf-8」で統一しましょう。
書き方
style.cssの最初に下記のように書きます。
@charset "UTF-8";
「テーマの名前」を書く
WordPressに必要な設定は「テーマの名前」だけ書けば良いかなと思っています。
「テーマのテンプレート」「テーマの制作依頼」であれば、その他のテーマ情報も記載した方が良いかと思いますが、通常のホームページだけどお知らせを更新したいなど、WPの機能を使いたいレベルであれば、「テーマの名前」だけがあれば十分かなと。
書き方
文字コードに続けて下記のように書きましょう。
/* Theme Name: テーマ名 */
具体的には、テーマの名前が「lucklog」だとすると、下記のような感じです。
@charset "UTF-8"; /* Theme Name: lucklog */
サイトに必要なスタイルを記述
以降は、必要なスタイルを記述していけばOKです。
@charset "UTF-8";
/*
Theme Name: lucklog
*/
html {
margin:0;
padding:0;
border:0;
outline:0;
}
・
・
・
以上が「style.css」に（最低限）記述する内容になります。Wordpress以外のcssファイルと大差ありません。
外観＞テーマ
外観＞テーマを確認します。
「style.css」に載せているテーマの情報はテーマの名前のみなので、下記のようにテーマの画像もなく、
「テーマの詳細」を見ても、テーマの名前以外の情報はありません。
クライアントが「外観」を編集することはありませんので、あまり気にする必要はないかと思います。もし見られたとしても、貧相ではありますが問題はありません。
その他のテーマ情報を掲載したい場合は下記を参考にしてみてください。
参考：外部CSSの読み込みは不要
好みもあるかと思いますが、僕は「@import」を使って外部cssは読み込みません。自分で編集するスタイルシートは「style.css」のみにしています。
理由は下記のとおりです。※大した理由ではありませんので、お好みで良いと思います
- １ファイルなのでキャッシュ対策が楽
- @importで読み込んでいるファイルの場合、キャッシュ対策が効きずらい気がする（過去の経験則なので、不確かです）
- ファイルを分けても結局あまり整理できない（既存のサイトを更新するときに感じます）
プラグインのcssについて
javascriptのプラグインに付属されているcssに関しては別途linkタグを使って読み込んでいます。
「style.css」より前に読み込むことで、調整が必要な場合は「style.css」にスタイルを上書いて対応しています
まとめ
「style.css」ファイルはかなりシンプルな形にできていると思います。
有難いことに、「ソースが綺麗」といっていただくことが多いので、１～２，３名で構築できる規模感であれば、このやり方がシンプルかつ管理もしやすいのでオススメです。
※数十ページ作る場合もありましたが、特に問題は起きていません。
ただ、組織でチームを組んでそれなりの人数でサイト構築をするのであれば、cssファイルを分けたり、ルール決めをする方がより効率的だと思いますので、適した方法を見つけていただければと思います。
スポンサーリンク