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

投稿記事や固定ページを作成する際、『この記事は他とデザインを少し変えたいな』と思うことがあります。
HTMLタグ内へ直接CSSを記述すると、テキストエディタの本文がごちゃごちゃに見にくくなってしまい、あとから編集するのがちょっと面倒……。
エディタには本文だけが記述されていた方が、編集しやすいしスマートです。

こういう場合、記事ごとにCSSを追加できたら便利になりますよね。
そんなときは記事・固定ページに個別でCSSを追加できるようになるプラグイン【WP Add Custom CSS】がおススメです。

【WP Add Custom 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 プラグイン | WordPress.org

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

関連記事

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

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

表示方法

WP Add Custom CSS 表示方法
【WP Add Custom CSS】プラグインを有効化すれば、自動的にカスタムCSS入力フィールドが表示されるようになります。
もし、表示されないようでしたら、『表示オプション』内の『Custom CSS』にチェックが入っているかを確認してください。

【WP Add Custom CSS】の設定

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

WP Add Custom CSS 設定

CSS rules サイト全体に適用したいCSSを記述する
Available post types:CTA 投稿タイプ:CTAに対して、【Add Custom CSS】を有効にするかの可否
Advanced editor:Enable 行番号やコードの色付けなど、高機能エディタを有効にするかの可否
Advanced editor layout 高機能エディタのレイアウトを選択(ダークまたはライト)

動作確認環境

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

まとめ

  • 【WP Add Custom】は、記事・固定ページごとに異なるCSSを追加できるようにするプラグイン。
  • 記事・ページごとに、CSSデザインを変えることができるようになります。
投稿・固定ページに個別でCSSを追加する【WP Add Custom CSS】の使い方
最新情報をチェックしよう!
スポンサーリンク