WordPress個別サポート

Lightningの子テーマを作る方法を紹介します。CSSだけをカスタマイズする予定なら「CSSカスタマイズ」メニューも使えるので必須ではありませんが、PHPも含めて本格的にカスタマイズする場合は子テーマを使った方が無難です。ここでは、テーマとしてLightningが有効化されている前提で話を進めます。

スポンサーリンク

Lightningの子テーマをダウンロード

Lightningのホームページから「設定ガイド」‐「子テーマでのカスタマイズ」メニューを開いて「子テーマカスタマイズサンプル」をダウンロードします。

ダウンロードページのURLは次のとおりです。

Lightning/ 子テーマでのカスタマイズ

Lightningの子テーマサンプルをダウンロード

子テーマをインストール

WordPressの管理画面に戻って「外観」‐「テーマ」メニューを開いて「新規追加」をクリックします。

テーマを新規追加

「テーマのアップロード」をクリックします。

テーマのアップロード

「参照」ボタンをクリックして、ダウンロード済みの子テーマ(例:lightning_child_sample_v_0_1_2.zip)を選択します。

「参照」ボタンをクリック

ファイルを選択後、「今すぐインストール」をクリックします。

子テーマをインストール

インストールが完了したら「有効化」をクリックします。

子テーマを有効化

「外観」-「テーマ」メニューを見ると、親テーマのLightning(1) に変わって子テーマ(2)が有効化されていることがわかります。

子テーマが有効化されている

これで子テーマに切り替える設定は完了です。

子テーマを使ったカスタマイズ

サイト名のスタイルを変更する

子テーマを使ったカスタマイズが反映されるかのチェックとして、ここでは、ヘッダーのサイト名(サンプルPC教室)の色やサイズを変えてみます。

サイト名のスタイルを変更したい

「外観」-「テーマの編集」メニューでstyle.cssを開いて、最後の行に続けて次のようなコードを入力します。

サイト名の部分にロゴ画像を表示している場合は反映されませんので、続く「コピーライトのフォントサイズを変更する」などを試してみてください。
/* サイト名のスタイルを変更する */
.navbar-brand a {
    font-size: 40px;
    font-weight: bold;
    color: navy;
}

CSSを入力したイメージは次のようになります。

CSSの入力後

画面を下にスクロールして「ファイルを更新」ボタンをクリックすると設定完了です。サイトを表示してCSSが反映されているか確認しましょう。

入力したCSSが反映されているか確認

コピーライトのフォントサイズを変更する

次のCSSを使うと、フッターにあるコピーライトのフォントサイズを変更することができます。実用性はありませんが、子テーマが機能しているかのチェックにお使いください。

/* コピーライトのフォントサイズを変更する */
footer .copySection p {
    font-size: 16px;
}

コピーライトのフォントサイズが大きくなります。

コピーライトのフォントサイズが大きくなる

入力したCSSが反映されない原因

入力したCSSが反映されず、カスタマイズ前のスタイルから変わらない場合、次のような原因が考えられます。

  • ブラウザのキャッシュ(古い内容)を見ている --- ブラウザの閲覧履歴を削除してみてください。
  • 入力したCSSが文法的に間違っている --- 入力内容をチェックしましょう。すべて半角です。特に記号や全角スペースにご注意ください。
  • 入力したCSSの優先順位が低い --- 既存のCSSとバッティングしているかもしれません。

CSSが反映されないときは以下のページも参考にしてください。

子テーマのstyle.cssに入力したCSSが反映されない理由と対策

CSSの変更が反映されないときはセレクタの優先順位をチェック

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

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

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

WordPressプラグイン

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