投稿・固定ページに個別でCSSを追加する【WP Add Custom CSS】

投稿記事や固定ページを作成する際、『この記事は他とデザインを少し変えたいな』と思うことがあります。

HTMLタグ内へ直接CSSを記述すると、テキストエディタの本文がごちゃごちゃに見にくくなってしまい、あとから編集するのがちょっと面倒……。

エディタには本文だけが記述されていた方が、編集しやすいしスマートです。

投稿毎にCSSを追加できるようになれば、便利になりますよね。

【WP Add Custom CSS】投稿・固定ページ毎に個別でCSSを追加できるようにするプラグイン。

投稿画面にCSSの入力ボックスが表示されるようになり、個別にCSSを追加できるようになります。

こんな場合におススメ

  • 特定の記事だけCSSを変更したい
  • 特定の投稿記事・固定ページ毎にCSSを追加したい
プラグインを使ってできること
  • 投稿画面に『カスタムCSS』の入力フィールドを表示し、記事・固定ページ毎に個別にCSSを追加できる
  • 特定の記事・固定ページだけCSSを追加することができる
目次

インストール方法

WP Add Custom CSS インストール
WP Add Custom CSS インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. WP Add Custom CSSで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

投稿・固定ページ毎に異なるCSSを追加する方法

プラグインを有効化すると、『Custom CSS』入力ボックスが表示されるようになりますので、適用したいCSSを記述します。

ブロックエディターの場合

WP Add Custom CSS 使用方法

旧エディターの場合

WP Add Custom CSS 使用方法

『Custom CSS』ボックスが表示されていない場合

ブロックエディターの場合

ボタンをクリックし、オプションを選択。オプションが開いたら詳細パネル内の『Custom CSS』にチェックを入れてください。

WP Add Custom CSS 表示されていない場合 ブロックエディター
WP Add Custom CSS 表示されていない場合 ブロックエディター

旧エディターの場合

『表示オプション』内の『Custom CSS』にチェックを入れてください。

WP Add Custom CSS 表示されていない場合 クラシックエディター

【WP Add Custom CSS】の設定

STEP
Add Custom CSSを開く

プラグインを有効化すると、管理画面に【Add Custom CSS】という項目が追加されるので、そこから設定を行います。

WP Add Custom CSS 設定
STEP
項目の設定
WP Add Custom CSS 設定
CSS rulesサイト全体に適用したいCSSを記述する
Available post typesカスタム投稿タイプに対して、【WP Add Custom CSS】を有効にするかの選択 カスタム投稿タイプが作成されている場合のみ表示される
Advanced editor:Enable行番号やコードの色付けなどの高機能エディタを有効にするかの選択
Advanced editor layout高機能エディタのレイアウトを選択(ダークまたはライト)
STEP
保存
項目を設定したらSaveをクリックして、設定を保存します。

動作確認環境

  • バージョン 1.1.5
  • WordPress 5.4

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【WP Add Custom CSS】は、投稿・固定ページ毎に異なるCSSを追加できるようにするプラグインプラグイン。
  • 投稿・固定ページ毎に、CSSデザインを変えることができるようになります。
目次
閉じる