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

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

WordPressは好きなテーマを選んで運営されていることでしょう。

しかし、WordPressのテーマもバージョンアップされます。LION MEDIAのテーマも2017年10月27日にリリースされて4ヶ月の2018年2月15日にはバージョン2.0.0になりました。

WordPressのテーマがバージョンアップされると、折角、カスタマイズしていたテーマの設定もやり直しになります。

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

最終更新:2018年3月5日

 

LION MEDIAの子テーマの活用

 

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

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

 

スポンサーリンク

 

子テーマを有効化する

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

 

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

 

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

 

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

 

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

 

@charset “UTF-8”;
/*———-このエリアは削除すると正しく動作しない可能性があります———-

Theme Name: LION MEDIA Child
Theme URI: http://fit-jp.com/theme/
Description: FIT(フィット) が制作するメディア用WordPressTHEME「LION MEDIA」の子テーマ
Author: Kota Naito @FIT(フィット)
Author URI: http://fit-jp.com/about/
Template: lionmedia
Version: 1.2
License: GNU GENERAL PUBLIC LICENSE
License URI: http://www.gnu.org/licenses/gpl.html

———-このエリアは削除すると正しく動作しない可能性があります———-*/

/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/

 

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

ここの「style.css」に追加していきます。

 

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

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

/*/////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
/////////////////////////////////////////////////*/

.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を子テーマに追加したのに反映されない場合があります。

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

 

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

 

まとめ

 

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

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

 

この記事が気に入ったら
いいね ! しよう

WordPressカテゴリの最新記事