【自作サイト制作入門02】WordPressで使う style.css の基本と具体的なコード例

style.css は、WordPressテーマのスタイルを管理するための主要なCSSファイルです。このファイルには、サイト全体のデザインに関わるスタイルルールが含まれており、テーマの見た目を大きく左右します。また、style.css はWordPressテーマの必須ファイルの一つであり、テーマの情報を含む特別なコメントブロックも必要です。

以下では、style.css ファイルに含めるべき必要な情報と、具体的なコード例について解説します。

1. テーマ情報のコメントブロック

style.css ファイルの冒頭には、テーマの基本情報を記述するためのコメントブロックを含める必要があります。この情報は、WordPress管理画面でテーマが表示される際に使用されます。以下に、その例を示します。

/*
Theme Name: My Custom Theme
Theme URI: http://example.com/my-custom-theme
Author: John Doe
Author URI: http://example.com
Description: A custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: light, dark, two-columns, right-sidebar, responsive-layout
*/

解説:

Theme Name：テーマの名前を指定します。管理画面に表示されます。
Theme URI：テーマに関連するウェブサイトのURLを指定します（任意）。
Author：テーマの作者の名前を指定します。
Author URI：作者のウェブサイトのURLを指定します（任意）。
Description：テーマの簡単な説明を記述します。
Version：テーマのバージョンを指定します。管理画面に表示されます。
License：テーマのライセンスを指定します。通常はGPL（General Public License）を使用します。
License URI：ライセンスの詳細情報を示すURLを指定します。
Text Domain：テーマの翻訳ファイルで使用されるテキストドメインを指定します。
Tags：テーマの特性を示すタグを指定します（任意）。

このコメントブロックは必須であり、これがないとテーマとして認識されないことがあります。

2. 基本的なCSSルール

style.css には、サイト全体に適用する基本的なスタイルルールを記述します。以下は、WordPressテーマにおける基本的なCSSの例です。

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ボディの基本スタイル */
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f5f5f5;
    line-height: 1.6;
}

/* ヘッダーのスタイル */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

/* ナビゲーションメニューのスタイル */
nav {
    background-color: #444;
    text-align: center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

nav ul li a:hover {
    background-color: #555;
}

/* コンテンツエリアのスタイル */
.content {
    margin: 20px auto;
    width: 90%;
    max-width: 1200px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.content h2 {
    color: #333;
    margin-bottom: 15px;
}

/* フッターのスタイル */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

解説:

リセットCSS：異なるブラウザ間での表示の違いを減らすために、全ての要素の余白とパディングをリセットしています。
ボディのスタイル：サイト全体で使用する基本的なフォントや背景色、行間を設定します。
ヘッダーのスタイル：サイトのヘッダー部分の背景色やテキストの色、パディングを設定します。
ナビゲーションメニュー：リストアイテムをインライン表示し、リンクにホバー時のスタイルを設定しています。
コンテンツエリア：メインコンテンツのスタイルを設定し、適度な余白と影をつけて強調します。
フッターのスタイル：ページの最下部に配置されるフッターのスタイルを設定します。

3. レスポンシブデザインの追加

現代のウェブデザインにおいて、レスポンシブデザインは欠かせません。style.css では、メディアクエリを使用して異なるデバイスに応じたスタイルを指定することができます。

/* モバイルデバイス用のスタイル */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    header h1 {
        font-size: 2em;
    }

    nav ul li {
        display: block;
        margin: 5px 0;
    }

    .content {
        width: 95%;
        padding: 10px;
    }
}

解説:

メディアクエリ：@media を使って、画面幅が768px以下のデバイスに対してスタイルを指定しています。
フォントサイズの調整：モバイルデバイスではフォントサイズを少し大きくすることで読みやすさを向上させています。
ナビゲーションメニュー：リストアイテムをブロック表示に変更し、縦に並べています。
コンテンツエリア：モバイルデバイスに合わせて、コンテンツの幅とパディングを調整しています。

4. WordPress特有のクラスやIDのスタイル

WordPressでは、投稿やページ、ウィジェットなどに特有のクラスやIDが自動的に割り当てられます。これらを使って、より具体的なカスタマイズが可能です。

/* 投稿ページのスタイル */
.single .content {
    background-color: #f0f0f0;
    padding: 25px;
}

/* ウィジェットのスタイル */
.widget {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e0e0e0;
    border-radius: 5px;
}

.widget-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}