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

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

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

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

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

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

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

こんな場合におススメ

  • 特定の投稿記事・固定ページ毎にCSSを追加したい

プラグインを使ってできること

  • 投稿画面に『カスタムCSS』の入力フィールドを表示し、記事・固定ページ毎に個別にCSSを追加できる
スポンサーリンク

インストール方法

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

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

WP Add Custom CSS

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

WordPressのプラグインをインストールする方法

投稿・固定ページ毎に異なる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】の設定

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

    WP Add Custom CSS 設定

  • STEP2
    項目の設定
    WP Add Custom CSS 設定

    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を追加するカスタマイズ

投稿・固定ページに個別でCSSを追加する【WP Add Custom CSS】の使い方
最新情報をチェックしよう!
スポンサーリンク