配置できるパーツと編集画面で可能な装飾

TOP（完全版）
パーツ配置
配置できるパーツと編集画面で可能な装飾

配置できるパーツについて

デザインパーツ
デフォルトパーツ
準備されているクラス

パーツの装飾について

必ず編集画面でカスタマイズする装飾
編集画面でカスタマイズしても良い装飾
編集画面でカスタマイズしてはいけない装飾

配置できるパーツについて

パーツには大きく分けて「デザインパーツ」と「デフォルトパーツ」の2種類が存在します。それぞれの特長や使い方についてまとめています。

デザインパーツ

特長・仕様

新CMSからfOに実装されたパーツ
パーツ自体にデザインが当たった状態のもの
単体・複合・セクションパーツの3種類が存在（参考ページ：パーツ配置）
data-designpart が付与されている
個別にdeta-designpart-idが割り振られている

使用するプラン

プラン問わず使用可能

使い方

スタイルが当たっているため、基本的には配置するだけで使用可能
ベーシックプラン以上でデザインパーツに装飾を行いたい場合は、独自クラスを付与してスタイルを当てる

デフォルトパーツとデザインパーツの見分け方

前述していますが、あらかじめCSSによって装飾が施されている「デザインパーツ」には、デザインパーツIDというIDが付与されていることが特徴です。このデザインパーツIDの有無により、そのパーツがデフォルトパーツかデザインパーツかを見分けることができます。
※パーツのIDは「data-designpart-id」として個別に発行されており、検証ツールから探すことができます

デフォルトパーツ

特長・仕様

CSSでのカスタム用のパーツ
data-designpart、deta-designpart-idが付与されていない
新CMSでは「単体パーツ」内に格納されている
旧CMSのパーツは全てデフォルトパーツ仕様

使用するプラン

ベーシックプラン以上

※ライトプランで納品したアカウントのアップセル案件では使用可能

使い方

デザインパーツで再現できない場合に使用
独自クラスを付与してスタイルを当てる

注意事項

以下のパーツはデザインパーツではなく、デフォルトパーツとして定義されていますのでご注意ください。

単体パーツ＞デフォルト　に格納されているパーツ
デザインパーツIDが付与されていない以下のパーツ
- 画像＞画像のみ
- 画像＞ギャラリー
- 埋め込み＞共通パーツ
- 埋め込み＞動画
- 埋め込み＞iframe
- 埋め込み＞リンクURL 埋め込み
- 埋め込み＞マップ
- その他＞シェアボタン

準備されているクラス

コピー元のCSSには既にクラスが複数準備されています。デザイン反映の際は、デザインパーツ・デフォルトパーツ問わずそれらを適宜使用することで記述を簡潔にすることがあります。準備されているクラスに対して調整を行うこともあります。
パーツ配置の際にクラスを付与することもありますので、以下のページをご確認ください。

コピー元のCSSと書く場所

こちらのページでは準備されているクラスの一覧が確認できます。

コピー元のCSSと書く場所

パーツの装飾について

装飾するにはCSSでの装飾と編集画面での装飾と2種類ありますが、ここでは編集画面でカスタマイズしても良い装飾についてまとめています。
これ以外の装飾については基本的にはCSSで装飾してください。

必ず編集画面でカスタマイズする装飾

MUST

背景画像、また背景画像のリピート設定
- SP用の設定をする際、セクションとMVに対しては編集画面の「スマートフォン用の背景画像」にチェックを入れ、画像を設定してください。
太字設定（※CSSでの設定はNG）
行（row）やカラム（col）のボックスシャドウの設定
行（row）やカラム（col）のボックスリンクの設定
カラム内要素の縦位置
※行（row）に display: flex; を指定する場合の要素の縦位置調整についても、こちらをご確認ください。

MV（メインビジュアル）・セクションの背景に動画を設定する方法

MV（メインビジュアル）・セクションには、標準機能を利用して動画をアップロードし設定することができます。ただし、SP表示では動画は自動再生されません。また、自動再生などの詳細な設定を行う場合は、iframeによる埋め込みコードを使用して動画を設置してください。その際は、CSSでの表示調整が必要です。

背景に動画を設定する手順については、別途掲載している「背景にYouTube動画を設定する方法」をご参照ください。

注意事項

原則として、MP4形式の動画を直接埋め込むことはできません。
一度YouTubeに動画をアップロードし、そのURLを取得の上、上記手順に沿って設定してください。

編集画面でカスタマイズしても良い装飾

CAN

文字や見出しの色
文字や見出しの一部分だけのフォントサイズ変更
文字やパーツの背景色
角丸
枠線
- 繰り返し同じデザインが出てくる場合はCSSでの調整が効率的です
カラム（col）の幅

編集画面でカスタマイズしてはいけない装飾

DON'T

余白余白（padding／margin）の設定
フォントサイズの設定（一部分だけ変更する場合を除く）

余白調整の注意事項

余白も編集画面でカスタマイズできますが、

SP時の調整が同じ画面からできない
全体のトンマナに影響するため、個別での調整は好ましくない（全体を調整したい時に一括でできなくなってしまう）
新CMSの場合、編集画面から調整を行うとベースデザイン設定を紐づけられない

といった理由で、顧客要望など特別な事情がない限りはCSSで調整してください。

フォントサイズ変更の注意事項

見出しやテキストのフォントサイズを編集画面で変更することは原則推奨していません。
その理由として、line-heightはCSSに紐づいているため、編集画面でフォントサイズだけ変更しても、line-heightが適切に調整されないことが挙げられます。そのため、フォントサイズの調整はクラスを付与しCSSで調整することを基本とします。

ただし、以下のような場合は編集画面での調整も可能です。

その箇所のみの軽微な調整
1px程度の小さなフォントサイズ変更など、line-heightへの影響が気にならない範囲

また、1つのテキスト内で一部の文字だけサイズを変更する場合は、編集画面で調整します。
その際は、line-heightがCSSに紐づく仕様を考慮し、

小さい方の文字サイズをCSSで設定する
一部大きくしたい文字のみ編集画面でサイズを変更する

という方法を原則として推奨します。

パーツ配置一覧に戻る

編集画面の崩れについて