【WordPress】LION MEDIAカスタマイズ! 子テーマの活用

WordPressは好きなテーマを選んで運営されていることでしょう。
しかし、WordPressのテーマもバージョンアップされます。LION MEDIAのテーマも2017年10月27日にリリースされて4ヶ月の2018年2月15日にはバージョン2.0.0になりました。
このようにWordPressのテーマがバージョンアップされると、折角、カスタマイズしていたCSS設定もやり直しになります。
親テーマがバージョンアップされても、CSSでカスタマイズした設定をそのまま引き継げるように子テーマを使います。

なんと、LION MEDIAやLION BLOGには「子テーマ」も配布されていますので、子テーマの活用方法をご紹介致します。

http://fit-jp.com/theme/theme_download/  こちらのサイトからLION MEDIAをダウンロードできます。

LION MEDIAの子テーマの活用

今回のように、親のテーマがバージョンアップされた場合でも、設定をそのまま引き継げるように子テーマを活用しましょう。

今回は、LION MEDIAの子テーマを活用する方法を解説します。

 

 子テーマのインストール方法

参考 LION MEDIAに子テーマをインストールする方法!子テーマの活用

子テーマを有効化する

 

 手順1:テーマ設定へ行く

WordPressのダッシュボードから「外観」→「テーマ」を選択する。

LION MEDIA子テーマ

 

 手順2:Childを有効にする

LION MEDIAの「Child」を有効にする。有効にすると、上記のようにChildが有効になります。

子テーマを有効にすることになります。

LION MEDIAカスタマイズ! 子テーマの活用

 

 手順3:テーマの編集をクリック

WordPressのダッシュボードから「外観」→「テーマの編集」を選択する。

LION MEDIAカスタマイズ! 子テーマの活用

 

 手順4:LION MEDIA Childを選択

編集するテーマを選択から「LION MEDIA Child」を選んで「選択」をクリック。

LION MEDIAカスタマイズ! 子テーマの活用

 

 手順5:style.cssをクリック

LION MEDIA Childになったら、スタイルシート(style.css)を選択する。

LION MEDIAカスタマイズ! 子テーマの活用

 

@charset "UTF-8";

LION MEDIAの子テーマに何も設定していなければ、上記のようにカスタマイズエリアは空白の状態と思います。

このユーザーカスタマイズエリアの下に追加していきます。

見出し2と見出し3のCSSを追加

以下のような「見出し2」と「見出し3」を設定してみます。

CSSは右の「+」をクリックしてください
H.content h2{
padding: 0.4em 0.5em;color: #494949;
background: #c8e1fb;
border-left: solid 7px #295dd3;
border-bottom: solid 3px #6591be;
}.content h3 {
position: relative;background: #f1f8ff;
padding: 0.25em 0.5em;border-left: solid 2em #5c9ee7;
}

LION MEDIA Childのスタイルシート(style.css)に上記のCSSを追加して下さい。(子テーマに追加です)

コピーして貼り付けるだけです

追加したら「ファイルを更新」を行う。

 

「投稿」→「新規追加」で、段落を「見出し2」「見出し3」で試してみて下さい。

CSSが反映されない場合

CSSを子テーマに追加したのに反映されない場合があります。

その場合は、ブラウザのキャッシュが問題かもしれません。

ブラウザのキャッシュがされているために、新しいCSSの設定を読み込めないでいます。

まとめ

WordPressのテーマをインストールし、子テーマがあるテーマの場合は、子テーマを利用した方がバージョンアップ時に設定をやり直す必要がなくなります。

是非、子テーマを利用してみて下さい。

LION MEDIAカスタマイズ
フォローお願いします