SiteOrigin CSSであっという間にWebデザイン ビューモード編

Pocket

WordPressにコーディング不要でスタイリングができるCSSスタイルパネルを実装可能なSiteOriginCSSを紹介します。

SiteOriginCSSはWordpressの管理画面上で簡単にスタイルが可能になる無料のプラグイン。スタイルパネル内であたいの入力や選択を行うだけで簡単にCSSスタイルが可能です。

ここではSiteOriginCSSのビューモードを使ったスタイル方法を紹介します。

SiteOrigin CSSのビューモードの使い方

スタイルパネルの表示方法

SiteOriginCSSのスタイルパネルを表示するには、外観 > SiteOrigi CSSを選択し、目玉アイコンをクリックすればOK。
SiteOriginCSS スタイルパネルの表示方法-09

スタイルパネルの見方

SiteOriginCSSを開いて画面左側にあるのがスタイルパネル。右側の上部にはトップページが表示され、下部には選択したセレクタのスタイルが表示されます。

スタイルパネルは以下の3つのタブで分けられています。タブはクリックで切り替えることができるので、変更したいスタイルに合わせて切り替えてください。
SiteOriginCSS スタイルパネルの見方-01

  • Text: フォントスタイルの設定
  • Decoration: ボーダーや背景の設定
  • Layout: マージンや幅、高さの設定

どの項目もフォームに値を入力するか、選択肢の中から選ぶだけなのでコーディングは一切不要。
SiteOriginCSS スタイルパネルの見方-02

また、変更はすぐに右側のブラウザで確認できるため、変化を見ながらスタイルを作ることができます。

スタイルを変更したい要素の選び方

まずはスタイルを変更したい部分を右側のブラウザから選択します。ブラウザ上にマウスを移動すると要素の背景に色がつきます。この状態でクリックすると要素を選択できます。
SiteOriginCSS スタイルを変更したい要素の選び方-03

要素を選択するとスタイルパネルの上部に選択したセレクタ名が表示されます。
SiteOriginCSS スタイルを変更したい要素の選び方-04

また、ブラウザの下部にはセレクタまでのパスが表示されます。この部分をクリックすることでもセレクタを選択することができます。
SiteOriginCSS スタイルを変更したい要素の選び方-05

さらにその下には選択中のセレクタに適用されているスタイルが表示されます。
SiteOriginCSS スタイルを変更したい要素の選び方-06

SiteOrigin CSSを使ったスタイルの方法

変更したいセレクタを選んだら、スタイルパネルで必要に応じてスタイルを変更してください。CSSの知識は必要ですが、コーディングなしでどんどんスタイルを作っていくことができます。
SiteOriginCSS スタイルの方法-07

スタイルが完成したら、スタイルパネル上部にあるチェックボタンを押します。エディター画面に戻ると、設定したスタイルがエディター内に記述されています。この状態で「Save CSS」ボタンを押せば保存完了です。
SiteOriginCSS スタイルの方法-08