イメージ、ボタン、ドキュメント、段落、タイトル、マップおよび他のコンポーネントには固有のスタイルを適用できます。
イメージ・コンポーネント
イメージ・コンポーネントには、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
クラスも、カスタム・スタイルを必要としません。
デフォルトでは、イメージのキャプションは、イメージの下部に広がった半透明のオーバーレイとしてレンダリングされます。
.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
ファイル内のイメージ・コンポーネントに別のスタイルを追加してから、design.css
ファイルでこれに対してCSSを定義します。
.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
ファイル内のこのコンポーネントに別のスタイルを追加してから、design.css
ファイルでこれに対してCSSを定義します。
.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; }
.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
\の値は、stretch、crop、fitまたはflowingになります。
scs-gallerygrid-cell
クラスは、列レイアウトに対してのみ存在します。
ソーシャル・バー
ソーシャル・バー・コンポーネントには、次のクラス構造があります:
scs-socialbar-container scs-socialbar-icon
scs-socialbar-icon
クラスは、ソーシャル・バー内の各<img>
タグに適用されます。
段落
段落コンポーネントには、実際の段落テキストをラップする単一のクラスのみがあります:
scs-paragraph-text
たとえば、段落コンポーネントでコントリビュートするテキストに、金属に刻印されたテキストのような効果を適用するには、design.json
ファイルに別のスタイル・クラスを追加し、design.css
ファイルでこれにCSSを定義します。
.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; }
または、凝ったデザインにしたい場合は、次の例のようにすることができます。
.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スタイルを適用する以外にも、サイト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); } } });
これにより、ホスト・スタイルのスタイルをコンポーネントに継承させることができます。
区切り
区切りコンポーネントにはコンポーネント固有のクラスがありませんが、<hr>
タグ自体のスタイルを設定できます。
たとえば、点線区切りを作成できます:
.design-style .scs-divider hr { border-top: 1px dotted #333333; }
ビデオ、YouTube、スペーサ
ビデオ・コンポーネント、YouTubeコンポーネントまたはスペーサ・コンポーネントには、コンポーネント固有のクラスはありません。