• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / プラグイン / Simple CSSってどんなプラグイン?使い方を解説

Simple CSSってどんなプラグイン?使い方を解説

最終更新日:2021年5月8日

目次 非表示
1 Simple CSSってどんなWordPressプラグイン?
1.1 Simple CSSの特徴
2 Simple CSSを使うべき方
3 Simple CSSの使い方
3.1 カスタムCSSをサイト全体に適用する
3.2 カスタムCSSを個別に投稿に適用する
4 Simple CSSのよくある質問
4.1 Simple Custom CSSとの違いは?

Simple CSSってどんなWordPressプラグイン?

Simple CSSSimple CSS

Author(s): Tom Usborne

Current Version: 1.1.1

Last Updated: 2021年8月28日

simple-css.1.1.1.zip

98%Ratings 100,000+Installs WP 4.0+Requires

Simple CSSは、WordPress管理画面でカスタムCSSの追加ができるWordPressプラグインです。

サイト全体もしくは投稿個別にカスタムCSSが追加可能になります。

Simple CSSの特徴

  • サイト全体に設定できるカスタムCSS(ライブプレビュー可能)
  • 投稿個別に設定できるカスタムCSS
  • ダークモード/ライトモードのCSSエディターのデザイン

Simple CSSを使うべき方

  • テーマに依存しないカスタムCSSを追加したい方
  • 投稿個別にカスタムCSSを設定したい方

Simple CSSは、サイト全体または投稿個別にカスタムCSSを追加できます。

Simple CSSの使い方

Simple CSSでは、サイト全体または投稿個別にカスタムCSSを追加できます。

カスタムCSSをサイト全体に適用する場合、カスタムCSSを個別に投稿に適用する場合、それぞれの方法を解説します。

カスタムCSSをサイト全体に適用する

Simple CSSを有効にすると、WordPress管理画面の外観メニューにSimple CSSの項目が追加されます。

「外観 ≫ Simple CSS」をクリックします。

すると、次の画面が表示されます。

Simple CSSの使い方は簡単です。中央に表示されたエディターにCSSを記載し、Save CSSボタンをクリックします。

保存が完了すると、「設定が保存しました。」というメッセージが表示されます。

これで記載したCSSがサイト全体に適用されます。

また右にあるプルダウンを選択し、DarkからLightに変更すると、エディターのカラーを変更することができます。

ライブプレビュー

Simple CSSは、追加したCSSの反映をその場で確認できるライブプレビュー機能があります。

WordPress管理画面より、「外観 ≫ カスタマイズ」をクリックします。

カスタマイズ画面が表示されたら、次にSimple CSSをクリックします。

エディターが表示されます。ここに追加したCSSは、画面ですぐに確認することができます。

p {
    color: red;
}

と本文の文字色を赤色に変更するCSSを追加すると、保存前に文字色が赤色に変わっています。

変更内容を保存したい場合は、画面上部になる「公開」ボタンをクリックします。

カスタムCSSを個別に投稿に適用する

Simple CSSを有効化すると、各投稿画面にSimple CSSと記載されたパネルが表示されます。

ここにCSSを追加すると、投稿個別にCSSの追加が可能です。

Simple CSSのよくある質問

Simple Custom CSSとの違いは?

名前が非常に似たSimple Custom CSSというプラグインがあります。

主な違いは、投稿個別にカスタムCSSを追加できるかです。

Simple CSSには、投稿個別にカスタムCSSを追加できる機能があります。

一方で、Simple Custom CSSには、投稿個別にカスタムCSSを追加できる機能はありません。

類似プラグイン
  • Simple Custom CSS
  • Simple Custom CSS and JS
  • SiteOrigin CSS
  • WP Add Custom CSS
関連記事
  • WordPressのカスタムCSS追加プラグイン6個を比較|おすすめはどれ?
  • WordPressでCSSを編集する方法
  • WordPressでCSSが反映されない原因と対処法

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.