投稿・固定ページに個別で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を追加する方法

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

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

WP Add Custom CSS 使用方法

旧エディターの場合

WP Add Custom CSS 使用方法

【WP Add Custom CSS】の設定

STEP
Add Custom CSSを開く

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

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

動作確認環境

  • バージョン 1.1.6
  • WordPress 5.7.2

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

まとめ

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