年明けはやっぱり案件が混んできて忙しいですね。
ブログの日にちがあいてしまった自分への言い訳をしながら
はじめます。（笑）
今回はwordpressで記事ごとに
cssを指定できるプラグイン「Custom CSS and JS」をご紹介します。
以下の「共通設定」をしたあと、順番に
- 個別のcssファイルを読み込む
- 個別にcssを直接適用させる
- JSを適用させる
と、説明していきます。
共通設定は、どちらの方法をする場合でも必要です。
もくじ
Custom CSS and JSをインストール
まず、ダッシュボードのプラグインから新規追加を選択し
「Custom CSS and JS」で検索します。
「今すぐインストール」をクリックでインストールが始まりますので
終わったら「有効化」にして完了です。
共通設定
Custom CSS and JSはカスタムフィールドを使用します。
投稿画面（固定ページでもOK）を開いて、「表示オプション」を選択。
「表示する項目」の「カスタムフィールド」にチェックを入れましょう。
これで「カスタムフィールド」が表示されます。
個別のcssファイルを読み込む
カスタムフィールドの「新規追加」をクリック。
そうすると名前と値を入力できるようになるので、
名前： custom_css
値： /xxx.css ※cssファイルを設置する場所とcssファイルの名前を入力します
入力したら、「カスタムフィールドを追加」をクリックで
cssを読み込むためのカスタムフィールドができました。
記事のソースには
[code]
<link rel="stylesheet" type="text/css" href="/xxx.css" />
[/code]
と「xxx.css」を読み込むようになりますので、指定したcssファイルにcssを記述すれば
スタイルが適用されます。
個別にcssを直接適用させる
ひとつの投稿や固定ページにのみcssを反映させたい場合もありますよね。
この場合は、cssを読み込ませてわざわざcssファイルを作成して…というのは
ちょっと面倒ですよね。。
なので、ここでは直接cssを適用させる方法をご説明します。
カスタムフィールドの「新規追加」をクリック。
名前： custom_css_code
値： ここにcssを直接記述していってOKです
JSを指定したい場合
上記で説明してきた、cssファイルを読み込む方法・直接cssを記述する方法と同じように
名前・値に入力すればOK。
| 名前 | 値 | |
|---|---|---|
| jsファイルを読み込む | custom_js | ファイルまでのパスを入力 |
| jsを直接入力 | custom_js_code | 値にJavaScriptを直接入力 |
最後に
とっても便利なプラグインですが、アップデートが止まっているようです…
自己責任でご利用ください。
ちなみにこのブログはwordpress4.4.1なので、このバージョンまではひとまずOKかなと思います。