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

目次

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

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

デザインパーツ

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

プラン問わず使用可能

使い方
  • スタイルが当たっているため、基本的には配置するだけで使用可能
  • ベーシックプラン以上でデザインパーツに装飾を行いたい場合は、独自クラスを付与してスタイルを当てる
デフォルトパーツとデザインパーツの見分け方
前述していますが、あらかじめCSSによって装飾が施されている「デザインパーツ」には、デザインパーツIDというIDが付与されていることが特徴です。このデザインパーツIDの有無により、そのパーツがデフォルトパーツかデザインパーツかを見分けることができます。
※パーツのIDは「data-designpart-id」として個別に発行されており、検証ツールから探すことができます
  • パーツIDの例

デフォルトパーツ

特長・仕様

  • CSSでのカスタム用のパーツ

  • data-designpart、deta-designpart-idが付与されていない

  • 新CMSでは「単体パーツ」内に格納されている
  • 旧CMSのパーツは全てデフォルトパーツ仕様
使用するプラン

ベーシックプラン以上

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

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

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

  •  単体パーツ ＞ デフォルト　に格納されているパーツ
  • デザインパーツIDが付与されていない以下のパーツ 

    • 画像＞画像のみ

    • 画像＞ギャラリー

    • 埋め込み＞共通パーツ

    • 埋め込み＞動画

    • 埋め込み＞iframe

    • 埋め込み＞リンクURL 埋め込み

    • 埋め込み＞マップ

    • その他＞シェアボタン

準備されているクラス

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

コピー元のCSSと書く場所

こちらのページでは準備されているクラスの一覧が確認できます。
コピー元のCSSと書く場所

パーツの装飾について

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

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

  • 文字色
  • 文字の一部分だけのフォントサイズを変更する場合（※該当テキストの全体を編集画面から設定するのはNG）
  • 太字設定（※CSSでの設定はNG）
  • 文字やパーツの背景色
  • 背景画像、また背景画像のリピート設定
  • 枠線（繰り返し同じデザインが出てくる場合はCSSでの調整が効率的です）
  • colの幅（ただし、仕様上SPでは幅100％になりますので、SPで別の数値に調整する場合は、PCも含めてCSSで調整してください）
余白調整の注意事項
余白も編集画面でカスタマイズできますが、
・SP用時の調整が同画面でできない
・全体のトンマナに影響するため、個別での調整は好ましくない（全体を調整したい時に一括でできなくなってしまう）
・新CMSの場合、編集画面からの調整だとベースデザイン設定を紐づけられない
といった理由で、顧客要望など特別な事情がない限りはCSSで調整してください。

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.