投稿記事や固定ページを作成する際、『この記事は他とデザインを少し変えたいな』と思うことがあります。
HTMLタグ内へ直接CSSを記述すると、テキストエディタの本文がごちゃごちゃに見にくくなってしまい、あとから編集するのがちょっと面倒……。
エディタには本文だけが記述されていた方が、編集しやすいしスマートです。
投稿毎にCSSを追加できるようになれば、便利になりますよね。
【WP Add Custom CSS】投稿・固定ページ毎に個別でCSSを追加できるようにするプラグイン。
投稿画面にCSSの入力ボックスが表示されるようになり、個別にCSSを追加できるようになります。
こんな場合にオススメ
- 特定の記事だけCSSを変更したい
- 特定の投稿記事・固定ページ毎にCSSを追加したい
プラグインを使ってできること
- 投稿画面に『カスタムCSS』の入力フィールドを表示し、記事・固定ページ毎に個別にCSSを追加できる
- 特定の記事・固定ページだけCSSを追加することができる
目次
インストール方法
インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- WP Add Custom CSSで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
投稿・固定ページ毎に異なるCSSを追加する方法
プラグインを有効化すると、『カスタムCSS』入力ボックスが表示されるようになりますので、適用したいCSSを記述します。
ブロックエディターの場合
旧エディターの場合
【WP Add Custom CSS】の設定
STEP
Add Custom CSSを開く
プラグインを有効化すると、管理画面に【Add Custom CSS】という項目が追加されるので、そこから設定を行います。
STEP
項目の設定
| CSSルール | ウェブサイト全体に適用したいCSSを記述する |
|---|---|
| 投稿タイプ： 利用可能な投稿タイプ | カスタム投稿タイプに対して、【WP Add Custom CSS】を有効にするかの選択 カスタム投稿タイプが作成されている場合のみ表示される |
| アドバンスドエディター： 有効化 | 行番号やコードの色付けなどの高機能エディタを有効にするかの選択 |
| アドバンスドエディターレイアウト | 高機能エディタのレイアウトを選択（ダークカラーまたはライトカラー） |
STEP
保存
項目を設定したら保存をクリックして、設定を保存します。
動作確認環境
- バージョン 1.1.6
- WordPress 5.7.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【WP Add Custom CSS】は、投稿・固定ページ毎に異なるCSSを追加できるようにするプラグインプラグイン。
- 投稿・固定ページ毎に、CSSデザインを変えることができるようになります。
投稿・固定ページごとにCSSを追加するカスタマイズ
記事ごとに異なるCSSを適用させるカスタマイズ方法【プラグイン不使用】
記事毎に異なるCSSを適用させることができると、便利になりますね。 以前、投稿や固定ページごとにCSSを追加させるプラグイン【WP Add Custom CSS】を紹介しましたが、…