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の子テーマの活用
今回のように、親のテーマがバージョンアップされた場合でも、設定をそのまま引き継げるように子テーマを活用しましょう。
今回は、LION MEDIAの子テーマを活用する方法を解説します。
子テーマをインストールする方法は、以下の記事を参考にしてください。
参考 LION MEDIAに子テーマをインストールする方法!子テーマの活用
子テーマを有効化する
手順1:テーマ設定へ行く
WordPressのダッシュボードから
ダッシュボード 外観 テーマ を選択する。
手順2:Childを有効にする
LION MEDIAの「Child」を有効にする。有効にすると、上記のようにChildが有効になります。
子テーマを有効にすることになります。
手順3:テーマの編集をクリック
WordPressのダッシュボードから
ダッシュボード 外観 テーマの編集 を選択する。
手順4:LION MEDIA Childを選択
編集するテーマを選択から「LION MEDIA Child」を選んで「選択」をクリック。
手順5:style.cssをクリック
LION MEDIA Childになったら、スタイルシート( style.css)を選択する。
@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のテーマをインストールし、子テーマがあるテーマの場合は、子テーマを利用した方がバージョンアップ時に設定をやり直す必要がなくなります。
是非、子テーマを利用してみて下さい。