コンポーネント固有のスタイル設定

イメージ、ボタン、ドキュメント、段落、タイトル、マップおよびその他のコンポーネントに特定のスタイルを適用できます。

イメージ・コンポーネント

イメージ・コンポーネントのscs-component-contentクラスの下には、次のCSSクラス構造があります:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

scs-image-imageクラスは、<img>タグ自体に適用されます。キャプションが存在する場合は、scs-image-captionクラスを使用してキャプションのスタイルを設定します。

scs-image-linkクラスは、イメージにリンクがアタッチされている場合にのみ存在します。通常、scs-image-containerクラスもカスタム・スタイル設定を必要としません。

デフォルトでは、イメージのキャプションは、イメージの下部に広がった半透明のオーバーレイとしてレンダリングされます。

「図captionplacement.pngの説明」

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

イメージの上にキャプションを置き、色を変更するには、design.jsonファイルにImageコンポーネントの余分なスタイルを追加し、design.cssファイルにCSSを定義します。

「図captionplacement2.pngの説明」

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

ボタン・コンポーネント

ボタン・コンポーネントには、次のクラス構造があります。

scs-button-button
    scs-button-text

scs-button-buttonクラスは、ボタンのようにスタイル設定されたクリック可能な<div>です。 scs-button-textクラスは、ボタン内のテキストのスタイルを設定するために使用されます。

たとえば、design.jsonファイルに追加のスタイルを追加してButtonコンポーネントのルック・アンド・フィールを変更し、design.cssファイルにCSSを定義してテストします。

「図buttoncolor.pngの説明」

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

「図buttoncolorradial.pngの説明」

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

ドキュメント

ドキュメント・コンポーネントには、次のクラス構造があります。

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

scs-document-containerクラスは、ドキュメント・ビューアをラップし、通常はスタイル設定されません。

ギャラリ

ギャラリ・コンポーネントには、基礎となるJSSORスライダ・コンポーネントをラップする、単一のクラスがあります。

scs-gallery-container

JSSORスライダでは、スタイル設定もできる、次の複数のクラスが使用されます。

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

ギャラリ・グリッド

ギャラリ・グリッド・コンポーネントに使用されるクラスは、「設定」パネルで選択したレイアウトおよび切取りによって異なります:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

ギャラリ・グリッドに選択したトリミングおよびレイアウト設定に応じて、layout \willの値は、ストレッチ、トリミング、フィットまたはフローになります。

scs-gallerygrid-cellクラスは、列レイアウトにのみ存在します。

ソーシャル・バー

ソーシャル・バー・コンポーネントには、次のクラス構造があります。

scs-socialbar-container
  scs-socialbar-icon

scs-socialbar-iconクラスは、ソーシャル・バーの各<img>タグに適用されます。

段落

段落コンポーネントには、実際の段落テキストをラップする、単一のクラスのみがあります。

scs-paragraph-text

たとえば、段落コンポーネントのテキストをengraved-text-on-metal効果のあるものにするには、design.jsonファイルで追加のスタイル・クラスを追加し、design.cssファイルでそのクラスのCSSを定義します。

「図engravedtext.pngの説明」

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

または、凝ったデザインにしたい場合は、次の例のようにすることができます。

「図stitched.pngの説明」

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

タイトル

タイトル・コンポーネントにも、実際のテキストをラップする、単一のクラスのみがあります。

scs-title-text

マップ

マップ・コンポーネントには、マップ・レンディションをラップする単一のクラスがあります。

scs-map-content

このクラスには、通常はスタイルは設定されません。

カスタム・ローカル・コンポーネント

カスタム・ローカル・コンポーネントには、実際のコンポーネントをラップする、単一のクラスのみがあります。

scs-custom-component-wrapper

カスタム・ローカル・コンポーネントのカスタム・ビューをレンダリングするために使用する必要があるCSSスタイルは、完全に制御できます。ローカル・コンポーネントはインラインでレンダリングされます。つまり、テーマまたはdesign.cssファイルで定義されたCSSスタイルを直接適用することができます。

カスタム・リモート・コンポーネント

カスタム・リモート・コンポーネントには、そのiframeをラップする、単一のクラスのみがあります。

scs-app-iframe-wrapper

カスタム・リモート・コンポーネントで定義されたCSSスタイルを適用する以外に、Sites SDKを利用して、ホスト・サイトからdesign.cssファイルをフェッチできます。

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

したがって、コンポーネントがホスト・スタイルからスタイル設定を受け継ぐようにできます。

区切り

Dividerコンポーネントにはコンポーネント固有のクラスはありませんが、<hr>タグそのものをスタイリングすることができます。

たとえば、点線による区切りを作成できます。

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

ビデオ、YouTube、スペーサ

ビデオ、YouTubeまたはスペーサ・コンポーネントにはコンポーネント固有のクラスはありません。