WordPressでブログを管理しているとたまにこんなことがあります。
「テーマの更新（アップデート）をしたらカスタマイズしたCSSやJSが消えてしまった」
「今使っているテーマだとテーマ編集でCSSやJSを追記できない（使いづらい）」
WordPressのプラグイン「Simple Custom CSS and JS」を使うとカスタマイズしたCSSやJSはテーマのアップデートの影響を受けなくなります。
そして、カスタマイズしたCSSやJSの管理がとても楽になります。
そんなプラグイン「Simple Custom CSS and JS」の使い方を紹介していきます。
Simple Custom CSS and JSの使い方
プラグインSimple Custom CSS and JSをインストールします。
WordPressの管理画面の「プラグイン」→「新規追加」ページで「プラグインの検索」に「Simple Custom CSS and JS」と入力します。
検索結果でプラグイン「Simple Custom CSS and JS」が表示されるので「今すぐインストール」そして「有効化」します。
「Simple Custom CSS and JS」が有効化されるとWordPressの管理画面の左メニューに「Custom CSS & JS」が追加されます。
実はSimple Custom CSS and JSはCSSやJSの追記のほかにHTMLも＜head＞タグ内や＜/body＞タグの前に追記ができます。
今回はCSSの追記をしていきましょう。
CSSを追記する場合は「Add Custom CSS」をクリック。
するとタイトルを入力する欄とCSSを記述する欄のあるページになります。
① 追記するCSSのタイトルを入力
② 追記するCSSを入力
Simple Custom CSS and JSのすごいところは、タイトル単位でCSSやJSの有効化・無効化ができます。
CSSの記入を終えて「公開（更新）」ボタンをクリックすると反映されます。
その前に右側にあるオプション欄の説明を
Linking type：リンクタイプ
External File（外部ファイル）
Internal（インライン）
Where on page：記述場所
Header（headタグ内）
Footer（bodyタグ終わりの方）
Where in site：適応ページ
In Frontend（公開ページ）
In Admin（管理ページ）
On Login Page（ログインページ）
あまりよくわからない場合は初期設定のまま「公開」ボタンを押して大丈夫です。
薄くなっているオプションなどは有料ですが、無料部分で十分使えるプラグインです。
公開されたCSSやJSなどはタイトルごとに保存されて一覧で確認できます。
「★」をクリックして「☆」にすると、その項目は無効化になってブログに反映されません。
普通はファイルに複数の目的のCSSやJSを記述するのでコメントなどを書いていない場合「この（CSSやJSの）記述って何？」ってこともよくあります。
Simple Custom CSS and JSは反映のON・OFFができるので、間違って無効化してもすぐに戻すごとができるので便利です。
Simple Custom CSS and JSで追記したCSSは記述した通り、改行などもそのままで書き出されます。
まとめ
Simple Custom CSS and JSのメリット
- テーマのアップデートの影響を受けない
- 記述内容を分けて管理ができる
- 記述の削除ではなく無効化で対応できるので復旧も楽
- テーマを変更しても反映されている
CSSやJSのカスタマイズの記述方法はいろいろあって、もちろんプラグインを使わない方法もあります。
ただ、記述するファイルによってはテーマのアップデートなどで消えてしまう恐れもあります。
また、ちゃんと管理していないと「どこに記述したか？」も忘れてしまいます。
そういった点を考えるとSimple Custom CSS and JSは管理もしやすいのでプラグインを利用する価値はあると思います。
プラグインの利用が増えることでサーバーの負荷がちょっと気になることがデメリットかな。
このブログのテーマはWING（AFFINGER5）です。
WING（AFFINGER5）はSEO対策に強いと言われているWordPressのテーマです。
有料のテーマだけど1度購入すると使いまわせるので2つ目以降のブログでは無料で使えます。
複数のブログを持っていたり、計画がある人にはとってもお得です。
ビジュアルエディターだけで文字に色やマーカーをつけたり、枠で囲んだり、会話風のふきだしも簡単にできちゃいます！
