Custom CSS Guide for Japanese.

Custom CSS Guide – SiteOrigin CSS

A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes の邦訳

A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes

カスタムCSSは、愛好家や開発者が利用可能な設定を使用して実行できる以上のスタイル変更を行うための、迅速でアクセス可能な方法です。
このチュートリアルでは、ページビルダーの[属性]タブと、カスタムCSSを変更する際の使用方法について説明します。
この簡単なガイドは、CSSの基本的な知識があるユーザー、またはSiteOrigin CSSのビジュアルエディターの使用を超えたいユーザーを対象としています。

「属性」タブは、ページビルダーの行、セル、ウィジェットを編集するときに使用できます。

Row Attributes : 行属性

Page Builderの行を編集するには、右側のスパナアイコンにカーソルを合わせて[ Edit Row ]をクリックします。
右側の[ Attributes ]見出しをクリックして、パネルを開きます。

以下のフィールドが利用可能です。

Row ID

行に適用されるカスタムID。 ID名のみを挿入する必要があり、通常使用される前述のハッシュは挿入しないでください。 たとえば、カスタム行IDの名前が「services」の場合、servicesという単語のみを挿入します。 ID名は1回しか使用できないことに注意してください。

行IDは、次のようにPage Builderマークアップに出力されます。

Row Class

行に適用されるカスタムクラス。
クラス名のみを挿入する必要があります。通常使用される先行ピリオドは挿入しないでください
たとえば、カスタム行クラスの名前が「drop-shadow」の場合、drop-shadowという単語のみを挿入します。

行クラスは、次のようにPage Builderマークアップに出力されます。

Cell Class

行の各セルに適用されるカスタムクラス。
クラス名のみを挿入する必要があります。通常使用される先行ピリオドは挿入しないでください
たとえば、カスタム行クラスの名前が「dark-bg」の場合、dark-bgという単語のみを挿入します。

行クラスは、次のようにPage Builderマークアップに出力されます。

CSSをはじめて設定する場合、上記の3つのフィールドは、SiteOrigin CSSなどのプラグインまたは [カスタマイズ] -> [CSS編集]のコアフィールドと組み合わせて使用されます。
必要なIDまたはクラス名が上記のフィールドのいずれかに挿入されたら、[外観] -> [Custom CSS]に移動して、挿入したIDまたはクラス名をターゲットにしたルールを作成します。

Next: サンプルターゲット CSS

サンプルターゲット CSS

前述したサンプルの Row ID [ Service ] をターゲットとするルールは次のようになります。

#services {
	/* CSSの設定をここに書いていく */
}

前述したサンプルの Row Class [drop-shadow] をターゲットとするルールは次のようになります。

.drop-shadow {
	/* CSSの設定をここに書いていく */
}

サンプルの Cell Class [ dark-bg ] をターゲットとするルールは次のようになります。

.dark-bg {
	/* Declarations go here */
}

CSS Styles

[ CSS Styles ] フィールドでは、スタイル宣言を行に適用できます。
CSS宣言は、プロパティと値で構成されます。
たとえば、font-size：20px（font-sizeはプロパティであり、20pxが値です）。
1行に1つの宣言を追加する必要があります。
通常であれば各宣言の最後に使用されるセミコロンは、このフィールドでは必要ありません。

上記のスクリーンショットに表示される宣言は、次のように出力されます。

Mobile CSS Styles

モバイルCSSスタイルは、[ 設定 ] -> [ Page Builder ] -> [ レイアウト ] -> [ モバイル幅 ] で設定された、モバイル解像度未満の画面解像度にのみ適用されます。

上記のスクリーンショットに表示される宣言は、次のように出力されます。

Cell Attributes

ページビルダーの行を編集する場合、編集するセルをクリックして、関連するセルスタイルのフィールドを表示できます。
右側の [ Attributes ] をクリックして、パネルを開きます。

以下のフィールドが利用可能です。

• Cell ID
• Cell Class
• CSS Styles
• Mobile CSS Styles

Cell Attributes は、前述のセルをターゲットにした Row Attributes と同じように機能します。

Widget Attributes

Page Builderでウィジェットを編集する場合、右側にある[ウィジェットスタイル]パネルを使用できます。 [属性]見出しをクリックして、パネルを開きます。

以下のフィールドが利用可能です。

• Widget ID
• Cell Class
• CSS Styles
• Mobile CSS Styles

Widget attributes も、前述の Cell Attributes 、Row Attributes と同じように設定できます。

お読みいただきありがとうございます。行、セル、およびウィジェットの属性の使用方法の概要がおわかりいただけたと思います。 ご質問やご意見がありましたら、下のコメントセクションでお知らせください。

Do More with SiteOrigin Premium

SiteOrigin Premium offers a huge array of additional functionality for Page Builder by SiteOrigin, the SiteOrigin Widgets Bundle, SiteOrigin CSS and all of our themes. SiteOrigin Premium also includes access to our next-level email support service, perfect for those times when you need fast and effective technical support.

Posted By Andrew Misplon in Tutorial on November 29, 2019

https://siteorigin.com/custom-css-guide-page-builder-row-cell-widget-attributes/