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

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をダウンロードできます。

 

[adcode]

LION MEDIAの子テーマの活用

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

Mikikko
テーマがバージョンアップしたら設定がリセットされるの?
Mutakko
そうだよ。CSSでタイトルや見出しをカスタマイズしていても全てリセットされるよ
Mikikko
バージョンアップされる度に再設定するのは面倒だね〜
Mutakko
そうなのよ!だから子テーマにCSSを記述しておくと便利なんだ

今回は、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デザイン集!WordPressブログにコピペするだけ!

.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を追加して下さい。(子テーマに追加です)

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

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

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

 

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

CSSが反映されない場合

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

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

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

参考 Google Chrome のキャッシュを削除する!CSSが反映しない時の対策

まとめ

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

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

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