WordPress個別サポート

子テーマが作成できたら、簡単なCSSをstyle.cssに入力してみましょう。入力したコードに応じてデザインが変更される実感をつかむことが重要です。

サイト名のフォントサイズを変更するCSSを例に作業を紹介します。

この記事は、はじめてCSSを入力する方のための入門です。すでにCSSの入力経験があり、WordPressで「ここのデザイン(スタイル)を直したい!」を思い付いてから子テーマにCSSを入力するまでの手順を知りたい方は以下のページを参照してください。
既存スタイルの解析から子テーマへのCSS記述までの流れ
スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

記述するCSSの構成

具体的な作業をする前に、どのようなCSSを記述するのか一般的な話をします。

たとえば、ホームページのサイト名が次のようなデザインになっているとします。

現在のサイト名

現在のサイト名

開いているstyle.cssに次のようなCSSを入力します。

#header #site-title {font-size:40px;}

ダッシュボードで入力したイメージは次のようになります。サイト名のフォントサイズが大きくなります。

サイト名のフォントサイズを変更する

サイト名のフォントサイズを変更する

サイトの表示結果は次のようになります。

フォントサイズの変更結果

フォントサイズの変更結果

ここで重要なのはフォントサイズが変更できたことではありません。

記述したCSSの構成を理解することが重要です。

CSSの記述

CSSの構成(セレクタ+プロパティ)

セレクタは「どこのスタイルを設定するか」を示し、プロパティと値は「どのようなスタイルを指定するか」を示しています。

この例では

  • セレクタ(どこに) --- サイト名
  • プロパティ(何を) --- フォントサイズを40pxに

というCSSになります。

サイト名のフォントに限らず、他のCSSについても、どこを(セレクタ)どのようなスタイルにするか(プロパティ+値)という構成で指定します。すでに実戦経験のある方には初歩的な話かもしれませんが、まずは、この構成をしっかり理解することが重要です。

CSSのカスタマイズでつまづく原因

CSSを学び始めると「フォントサイズ変更のCSSはfont-size」など、「どのような命令を入力するのか」ばかりが気になるかもしれませんが、つまづく原因の多くは「どこを」のセレクタです。

つまり、WordPressのカスタマイズがうまくいかない原因の多くは「font-size」という命令がわからないことよりも「#header #site-title」というCSSセレクタを指定できないことです。

そもそも、サイト名の指定なのになぜ「#site-title」ではなく「#header #site-title」なのか、じっくり理解する必要があります。ただ、ここで説明していくと非常に長くなるので別のページに書きます(要はCSSセレクタの優先順位です)。

CSSセレクタの指定に注意が必要だと理解するため、個別のテーマを例に記述するCSSを見ていきましょう。

同じような作業をするときでもテーマが違えば記述するCSSセレクタが違う場合があるのだと理解することが重要です。実際に使用中のテーマがあればstyle.css(子テーマの)を修正してみてください。

余裕があれば、1つのサイトでテーマを切り替えながら同じCSSではうまくいかないことを確認してみましょう。

Twenty Fourteenの例

Twenty Fourteenのサイト名のフォントサイズは18pxです。

Twenty Fourteenのサイト名(変更前)

Twenty Fourteenのサイト名(変更前)

子テーマのstyle.cssに次のCSSを入力します。

.site-title {
    font-size: 30px;
}

サイト名のフォントサイズが大きくなります。

Twenty Fourteenのサイト名(変更後)

Twenty Fourteenのサイト名(変更後)

BizVektorの例

BizVektorのサイト名のフォントサイズは24pxです。

BizVektorのサイト名(変更前)

BizVektorのサイト名(変更前)

子テーマのstyle.cssに次のCSSを入力します。

#header #site-title {
    font-size: 30px;
}

サイト名のフォントサイズが大きくなります。

BizVektorのサイト名(変更後)

BizVektorのサイト名(変更後)

ちなみに、Twenty Fourteenと同じように次のCSSを入力してもうまくいきません。

#site-title {
    font-size: 30px;
}

「サイト名だからCSSセレクタは#site-titleだ」ではうまくいかないのが子テーマによるカスタマイズです。

Stinger3の例

Stinger3のサイト名のフォントサイズは30pxです。

Stinger3のサイト名(変更前)

Stinger3のサイト名(変更前)

子テーマのstyle.cssに次のCSSを入力します。

#container #header #header-in #h-l .sitename {
    font-size: 40px;
}

サイト名のフォントサイズが大きくなります。

Stinger3のサイト名(変更後)

Stinger3のサイト名(変更後)

Stinger5の例

Stinger5のサイト名のフォントサイズは22pxです。

Stinger5のサイト名(変更前)

Stinger5のサイト名(変更前)

子テーマのstyle.cssに次のCSSを入力します。

header .sitename {
    font-size: 22px;
}

サイト名のフォントサイズが大きくなります。

Stinger5のサイト名(変更後)

Stinger5のサイト名(変更後)

まとめ

簡単なCSSを子テーマのstyle.cssに入力して、デザインが変更できる感覚をつかんでいただけたでしょうか。カスタマイズでは「フォントサイズの命令はfont-size」とわかることも重要ですが、CSSセレクタをうまく指定できるかどうかも重要です。その点は別のページで説明します。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート