【style.css記述ガイド】WordPress自作テーマでcssに書くべき内容まとめ

サムネイル
               

WordPressの自作テーマ開発時には、`style.css`ファイルに以下の情報を記述する必要があります。

 

CSSはWordPressのテーマとして認識させるために超重要な部分です。

 

 

 

キニナリ
悩む人
テーマにCSSが必要？全然意味がわからない

 

moridai
moridai
WordPressにはCSSはとても重要な意味があるから、絶対に外せない知識なんだよね！

 

この記事ではWordPressのStyle.cssで書くべきことをまとめました。

 

WordPressのテーマ開発で、style.cssファイルに最低限な必要な情報

WordPressのテーマを開発する際、style.cssファイルには最低限以下の情報を記載すべきです。これらの情報はWordPressによってテーマを正しく認識し、管理画面でテーマが適切に表示されるために必要です。

 

 

WordPressは、ウェブサイトを作成するための非常に強力なプラットフォームであり、その柔軟性と多様性は、大部分がテーマによって支えられています。

 

 

 

 

WordPressテーマとは

WordPressテーマは、ウェブサイトのデザイン、外観、およびレイアウトを制御するためのファイルと設定の集合です。

 

 

これは、WordPressウェブサイトの外観を簡単にカスタマイズし、ユーザーエクスペリエンスを向上させるために不可欠な要素です。

 

 

テーマは、ウェブサイトの見た目と感じを定義し、ブログ、ビジネス、オンラインショップ、ポートフォリオなど、さまざまな種類のウェブサイトに適したスタイルを提供します。

 

 

テーマの重要性

WordPressテーマはウェブサイトの成功において非常に重要な要素です。テーマは次のような4点で重要な役割を果たします。

 

①ブランドアイデンティティの構築

テーマは、ウェブサイトが訴求するブランドやイメージを反映するための重要なツールです。

 

カスタムデザインやカラースキームを使用することで、ブランドのアイデンティティを強化できます。

 

②ユーザーエクスペリエンスの向上

ユーザーはウェブサイトの外観に敏感であり、魅力的で使いやすいテーマはユーザーエクスペリエンスを向上させます。

 

これはウェブサイトの訪問者を引き寄せ、滞在時間を増やし、コンバージョン率を向上させるのに役立ちます。

 

③SEO対策

ウェブサイトのテーマは、検索エンジン最適化（SEO）にも影響を与えます。適切なコーディング標準を遵守し、高速な読み込み速度を提供するテーマは、検索エンジンランキング向上に貢献します。

 

この章の内容を通じて、WordPressテーマの基本とその重要性についての理解が深まり、ウェブサイトの成功に向けて重要な第一歩となるでしょう。

 

 

moridai
moridai
テーマの重要性について理解できましたか？次に最低限必要なCSS情報について解説していきます。

 

style.cssファイルに最低限な必要な情報

 

WordPress公式で推奨されているものです。

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: 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.
Tags: 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
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
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.
*/

 

キニナリ
悩む人
こんなに書かないといけないの？

 

 

moridai
moridai
公式で推奨されていることを全て記述する必要はありません。

 

ここからは必要最低限のことを紹介していきます。

 

1. テーマ名 (Theme Name)

テーマの名前を指定します。これはテーマを識別するための重要な情報です。

 

/*
Theme Name: My Custom Theme
*/

 

2. テーマURI (Theme URI)

テーマに関する詳細情報が提供されているウェブページやサイトのURLを指定します。

 

/*
Theme URI: http://example.com/my-custom-theme
*/

 

3. 作者 (Author)

テーマの作者や制作者の名前を指定します。

 

/*
Author: John Doe
*/

 

4. 作者URI (Author URI)

テーマの作者に関する詳細情報が提供されているウェブページやサイトのURLを指定します。

 

/*
Author URI: http://example.com/johndoe
*/

 

5. バージョン (Version)

テーマのバージョン番号を指定します。これはテーマのアップデートやバージョン管理に役立ちます。

 

/*
Version: 1.0
*/

 

6. 説明 (Description)

テーマの簡単な説明を提供します。これはテーマがどのような特徴やスタイルを持つかを要約します。

 

/*
Description: A clean and minimalist WordPress theme with a focus on readability.
*/

 

7. テーマのカテゴリ (Theme Category)

テーマが属するカテゴリを指定します。一般的なカテゴリには “blog,” “portfolio,” “business,” などがあります。

 

/*
Theme Category: Blog
*/

 

これらの情報をstyle.cssファイルのヘッダーコメントに記載することで、WordPressはテーマを正しく認識し、テーマ管理画面でテーマの情報を表示できます。また、この情報はユーザーにとっても役立ちます。さらに、テーマの外観やカスタマイゼーションに関連するスタイル情報もstyle.cssファイルに含まれますが、これらの基本情報は最低限必要です。

 

 

私の作成したテーマは

moridai
moridai
ちなみに👆は私が作成したWordPressテーマです。
/*
Theme Name: flower
Theme URI: https://moridai-dev.com/
Author: moridai
Author URI: https://moridai-dev.com/
Version: 1.0
Description: 本テーマは幅広いビジネスサイトに活用できます。
Theme Category: business
*/

 

まとめ

 

WordPressの自作テーマ開発時には、`style.css`ファイルに以下の情報を記述する必要があります。

– **テーマ名 (Theme Name):**
– テーマを識別する名前。

– **テーマURI (Theme URI):**
– テーマに関する詳細情報が提供されているウェブページやサイトのURL。

– **作者 (Author):**
– テーマの作者や制作者の名前。

– **作者URI (Author URI):**
– テーマの作者に関する詳細情報が提供されているウェブページやサイトのURL。

– **バージョン (Version):**
– テーマのバージョン番号。アップデートやバージョン管理に利用。

– **説明 (Description):**
– テーマの簡単な説明。特徴やスタイルの要約。

– **テーマのカテゴリ (Theme Category):**
– テーマが属するカテゴリ。例: “blog,” “portfolio,” “business” など。

 

 

これらの基本情報を`style.css`に含めることで、WordPressがテーマを正しく認識し、管理画面で適切に表示されます。