Lightningの子テーマを作る方法を紹介します。CSSだけをカスタマイズする予定なら「CSSカスタマイズ」メニューも使えるので必須ではありませんが、PHPも含めて本格的にカスタマイズする場合は子テーマを使った方が無難です。ここでは、テーマとしてLightningが有効化されている前提で話を進めます。
Lightningの子テーマをダウンロード
Lightningのホームページから「設定ガイド」‐「子テーマでのカスタマイズ」メニューを開いて「子テーマカスタマイズサンプル」をダウンロードします。
ダウンロードページのURLは次のとおりです。
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が反映されないときは以下のページも参考にしてください。
 |  |