Webデザイナーに転職・就職するために必要なソフトは3つのみ
kanri
空創デザインオフィス
【5行だけ・コピペOK】自作WordPressテーマstyle.cssおすすめ記載方法
kanri
本記事はこんな方にオススメです
- 自作（オリジナル）WordPressテーマを作成したいとお考えの方
- WordPressテーマのstyle.cssについて詳しく知りたい方
- WordPressを利用している or 利用予定 の方
- Webデザイナーを目指している方
今回は、自作WordPressテーマを作る際に必要なstyle.cssの記載方法について解説します。
自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください！
あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
Contents
WordPressのstyle.cssとは：テーマの概要を記載するファイル
WordPressのstyle.cssには、テーマの概要を記載します。
WordPressのテーマはこのstyle.cssがないと動作しないので、必ず用意する必要があります。
とりあえず、『WordPressテーマにはstyle.cssが必要』とだけ覚えておけばOKです！
自作WordPressテーマ style.cssの必須項目は「Theme Name」のみ
1/*
2Theme Name: テーマ名
3*/
自作WordPressテーマのstyle.cssの必須項目は、「Theme Name: テーマ名」のみです。
コメントアウト（/* */）も記載する必要があります。
自作WordPressテーマ style.cssのおすすめ記載内容
1/*
2Theme Name: テーマ名
3Author: 作成者名
4Author URI: 作成者のURL
5Description: テーマの簡単な説明
6Version: 1.0
7*/
style.cssはテーマ名だけでも動作しますが、上記項目もあるとよりわかりやすいです。
上記コードは、コピーして自由にお使いください。
style.cssの記載例
1/*
2Theme Name: ●●様専用テーマ
3Author: 山田 花子
4Author URI: https://example.com/
5Description: ●●様専用のWordPressテーマです。
6Version: 1.0
7*/
（参考）WordPressテーマ style.cssの項目一覧
WordPressテーマのstyle.cssに記載できる項目は下記表のとおりです。
テーマを販売する場合や、WordPress公式ディレクトリにテーマを登録する場合は記載します。（今回の記事では詳細説明は割愛します。）
WordPressテーマ style.cssの項目一覧表
| 項目 | 項目の意味 |
| Theme Name | テーマ名 |
| Theme URI | テーマのURL |
| Author | 作成者名 |
| Author URI | 作成者のURL |
| Description | テーマの簡単な説明 |
| Tags | ユーザーがテーマを検索しやすいようにタグ（キーワード）を設定できる。 タグはカンマ区切りで複数設定可能。 |
| Version | テーマのバージョン （XX または XXX 形式） |
| Requires at least | 「少なくとも～が必要」 テーマが動作する最も古いWordPressのバージョン （XX 形式） |
| Tested up to | 「～までテスト済み」 テーマがテストされた最新のWordPressのバージョン （XX 形式） |
| Requires PHP | サポートされている最も古いPHPのバージョン （XX 形式） |
| License | テーマのライセンス |
| License URI | テーマのライセンスのURL |
| Text Domain | 多言語対応テーマの場合で、翻訳ファイルを参照させるために利用するドメイン名 |
例）WordPressテーマ『Twenty Twenty』のstyle.css
参考までに、WordPressテーマ『Twenty Twenty』のstyle.cssは以下のように書かれています。
1/*
2Theme Name: Twenty Twenty
3Theme URI: https://wordpress.org/themes/twentytwenty/
4Author: the WordPress team
5Author URI: https://wordpress.org/
6Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
7Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
8Version: 1.3
9Requires at least: 5.0
10Tested up to: 5.4
11Requires PHP: 7.0
12License: GNU General Public License v2 or later
13License URI: http://www.gnu.org/licenses/gpl-2.0.html
14Text Domain: twentytwenty
15This theme, like WordPress, is licensed under the GPL.
16Use it to make something cool, have fun, and share what you've learned with others.
17*/
まとめ：style.cssはWordPressテーマに必須。コピペで用意すればOK
WordPressのstyle.cssには、テーマの概要を記載します。
WordPressのテーマはこのstyle.cssがないと動作しないので、必ず用意する必要があります。
style.cssに必須の記載内容は以下のとおりです。
1/*
2Theme Name: テーマ名
3*/
また、style.cssにおすすめの記載内容は以下のとおりです。
1/*
2Theme Name: テーマ名
3Author: 作成者名
4Author URI: 作成者のURL
5Description: テーマの簡単な説明
6Version: 1.0
7*/
空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。
下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）
あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
