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

投稿・固定ページに個別で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のプラグインをインストールする方法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デザインを変えることができるようになります。

ランキングに参加しています。

にほんブログ村 IT技術ブログ WordPressへ
クリックしていただけると、ブログ更新の励みになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA