メインスタイルシート(style.css)

2020.03.31 2020.04.02

TOPICS

翻訳元記事はこちらです。

style.cssは、すべてのWordPressテーマに必要なスタイルシート(CSS)ファイルです。ウェブサイトのページの表示(ビジュアルデザインやレイアウト)を制御します。

場所

WordPressがテーマのテンプレートファイルのセットを有効なテーマとして認識するためには、style.cssファイルがサブディレクトリではなく、テーマのルートディレクトリにある必要があります。

テーマにstyle.cssファイルをインクルードする方法の詳細な説明は、スクリプトとスタイルの読み込みの「スタイルシート」のセクションを参照してください。

基本構造

WordPressでは、外観(テーマ)ダッシュボードパネルにテーマに関する情報を表示するために、style.cssのヘッダーコメント部分を利用しています。

以下は、style.cssのヘッダーコメント部分の例です。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

WordPress Theme Repositoryでは、このファイルの「バージョン」の後の数字を使って、テーマに新しいバージョンがあるかどうかを判断しています。

(*)が付いている項目は、WordPressテーマリポジトリのテーマに必要な項目です。

Theme Name(*)テーマの名前
Theme URIユーザーがテーマについての詳細を知ることができるWebページのURL
Author(*)テーマを開発した個人または組織の名前。テーマ作成者のwordpress.orgのユーザー名を使用することをお勧めします。
Author URI作成者の個人または組織のURL。
Description(*)テーマの簡単な説明
Version(*)テーマのバージョン。X.X、X.X.Xの形式で記述します。
Lisence(*)テーマのライセンス
Lisence URI(*)テーマのライセンスのURL
Text Domain(*)翻訳に使用するテキストドメインの文字列
Tagsユーザーがタグフィルターを使ってテーマを見つけられるようにするための言葉やフレーズ。タグの完全なリストは、テーマレビューハンドブックを参照してください。
Domain Pathテーマが無効化されている場合に、WordPressにどこに翻訳があるかを通知するために使用します。デフォルトは/languagesです。

必要なヘッダーセクションの後、style.cssは通常のCSSファイルが持っているものを何でも含むことができます。

子テーマのStyle.css

テーマが子テーマの場合は、style.cssヘッダーにTemplate行が必要です。

/*
Theme Name: My Child Theme
Template: Twenty Seventeen
*/

子テーマの作成についての詳細は、子テーマのページを参照してください。