投稿記事や固定ページを作成する際、『この記事は他とデザインを少し変えたいな』と思うことがあります。
HTMLタグ内へ直接CSSを記述すると、テキストエディタの本文がごちゃごちゃに見にくくなってしまい、あとから編集するのがちょっと面倒……。
エディタには本文だけが記述されていた方が、編集しやすいしスマートです。
投稿毎にCSSを追加できるようになれば、便利になりますよね。
【WP Add Custom CSS】投稿・固定ページ毎に個別でCSSを追加できるようにするプラグイン。
投稿画面にCSSの入力ボックスが表示されるようになり、個別にCSSを追加できるようになります。
こんな場合におススメ
- 特定の投稿記事・固定ページ毎にCSSを追加したい
プラグインを使ってできること
- 投稿画面に『カスタムCSS』の入力フィールドを表示し、記事・固定ページ毎に個別にCSSを追加できる
スポンサーリンク
目次
インストール方法
- ダッシュボードから プラグイン > 新規追加 とクリックする
- WP Add Custom CSSで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]
投稿・固定ページ毎に異なるCSSを追加する方法
プラグインを有効化すると、『Custom CSS』入力ボックスが表示されるようになりますので、適用したいCSSを記述します。
ブロックエディターの場合
旧エディターの場合
『Custom CSS』ボックスが表示されていない場合
ブロックエディターの場合
︙ボタンをクリックし、オプションを選択。オプションが開いたら詳細パネル内の『Custom CSS』にチェックを入れてください。
旧エディターの場合
『表示オプション』内の『Custom CSS』にチェックを入れてください。
【WP Add Custom CSS】の設定
- STEP1Add Custom CSSを開くプラグインを有効化すると、管理画面に【Add Custom CSS】という項目が追加されるので、そこから設定を行います。
- STEP2項目の設定
CSS rules サイト全体に適用したいCSSを記述する Available post types カスタム投稿タイプに対して、【WP Add Custom CSS】を有効にするかの選択
カスタム投稿タイプが作成されている場合のみ表示されるAdvanced editor：Enable 行番号やコードの色付けなどの高機能エディタを有効にするかの選択 Advanced editor layout 高機能エディタのレイアウトを選択（ダークまたはライト） - STEP3保存項目を設定したらSaveをクリックして、設定を保存します。
動作確認環境
- バージョン 1.1.5
- WordPress 5.3
まとめ
- 【WP Add Custom CSS】は、投稿・固定ページ毎に異なるCSSを追加できるようにするプラグイン。
- 投稿・固定ページ毎に、CSSデザインを変えることができるようになります。
投稿・固定ページ毎にCSSを追加するカスタマイズ