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

FOXWP

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

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

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

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

目次 非表示
1 SiteOrigin CSSってどんなWordPressプラグイン?
1.1 SiteOrigin CSSの特徴
2 SiteOrigin CSSを使うべき方
3 SiteOrigin CSSの使い方
3.1 CSSエディター
3.2 ビジュアルエディター
3.3 拡張エディター

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

SiteOrigin CSSSiteOrigin CSS

Author(s): SiteOrigin

Current Version: 1.5.5

Last Updated: 2022年9月30日

so-css.1.5.5.zip

98%Ratings 200,000+Installs WP 3.9+Requires

SiteOrigin CSSは、高機能なCSSエディター機能を備えたWordPressプラグインです。

シンプルなCSSエディターに加えて、CSSに詳しくない方でも扱えるビジュアルエディターが搭載されています。

ビジュアルエディターでは、インスペクタを使用して、デザインの変更をしたい箇所をクリックするだけで簡単に指定できます。

SiteOrigin CSSの特徴

  • ビジュアルエディター搭載
  • ライブプレビュー機能

SiteOrigin CSSを使うべき方

  • CSSに関してあまり詳しくない方向け

ビジュアルエディターを使用して、CSSコードを書くことなく、デザインの修正が行えます。

しかし、ビジュアルエディターで指定できるCSSの変更は、表示された内容に限ります。

細かい修正は、自身で記載する必要があります。

また追加したCSSの有効化・無効化といった機能は存在しないため、複数のCSSコードを管理したい方には不向きです。

複数のCSSコードを管理したい方は、Simple Custom CSS and JSがおすすめです。

SiteOrigin CSSの使い方

SiteOrigin CSSは、設定不要ですぐにCSSコードの追加ができます。

CSSコードの追加方法には、次の3種類があります。

  1. CSSエディター
  2. ビジュアルエディター
  3. 拡張エディター

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

SiteOrigin CSSでCSSを追加する際には、Custom CSSをクリックし、SiteOrigin CSSの画面を開きます。

CSSエディター

WordPress管理画面のメニューより、「外観 ≫ Custom CSS」を開くと、次の画面が表示されます。

メインエディターがあります。

自身でCSSコードを追加したい場合は、このメインエディターエディターにCSSコードを追加して、「Save CSS」ボタンをクリックします。

ビジュアルエディター

ビジュアルエディターを使用するには、メインエディターの右上にある左側のボタンをクリックします。

ビジュアルエディターが開きます。

ビジュアルエディターには、次の3つのタブがあります。

  1. Text
  2. Decoration
  3. Layout

タブにある項目を操作することで、コードを書かなくてもデザインを変更することができます。

ビジュアルエディターの使い方を解説します。

まずデザインを変更したい箇所をクリックします。

今回は、サイト名に該当する画面上部にある「TEST」をクリックしました。すると、デザインを変更したい箇所に関与するセレクタが表示されます。

文字色を赤色にしてみます。

左にあるTextタブから、Text Colorの項目を操作します。Text Colorの変更では、カラーピッカーが表示されるため、視覚的に色を選択できます。

クリックしたTESTの文字色が赤くなりました。

デザインの変更が終わったら、ビジュアルエディター画面を閉じて保存を行います。

ビジュアルエディター画面を閉じるには、タブの上にあるチェックマークをクリックします。

ビジュアルエディター画面が閉じ、メインエディターが表示されます。右上にあるSave CSSボタンをクリックして、変更を保存します。

拡張エディター

拡張エディターを使用するには、メインエディターの右上にある右側のボタンをクリックします。

拡張エディター画面が開きます。

拡張エディターでは、デザインを変更したい箇所をクリックすると、該当するセレクタが表示されます。

表示されたセレクタの中から、CSSに追加したいセレクタをクリックすると、左側のエディターに表示されます。

セレクタにCSSコードを追加します。そして、拡張エディターを閉じるために、エディターの上部の右側にあるボタンをクリックします。

メインエディター画面に戻りますので、Save CSSボタンをクリックして、変更内容を保存します。

類似プラグイン
  • Simple Custom CSS
  • Simple Custom CSS and JS
  • WP Add Custom CSS
  • Simple 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.