コンテンツパーツ - パーツ設定

バリエーションを設定します。

※コンテンツパーツにバリエーションの設定がない場合は表示されません。

PCサイズ（パソコンサイズ）のウィンドウ幅かどうかを判断して、このパーツを表示するかどうか設定します。コンテンツパーツの長押しやマウスを載せた際に右上に表示される[パーツラベル]を見るとPC表示しているかどうか確認ができます。

• 表示する・・・このコンテンツパーツをPCサイトに表示します。
  [パーツラベル]表示例： 
• 表示しない・・・このコンテンツパーツをPCサイトで非表示にします。
  [パーツラベル]表示例：

• メディアクエリによりウィンドウ幅768px以上をPCサイズとして判断します。
• 表示をしない場合でもHTMLソースには出力されます。

モバイルサイズのウィンドウ幅かどうかを判断して、このパーツを表示するかどうか設定します。コンテンツパーツの長押しやマウスを載せた際に右上に表示される[パーツラベル]を見るとモバイル表示しているかどう確認ができます。

• 表示する・・・このコンテンツパーツをモバイルサイトに表示します。
  [パーツラベル]表示例：
• 表示しない・・・このコンテンツパーツをモバイルサイトで非表示にします。
  [パーツラベル]表示例：

• メディアクエリによりウィンドウ幅767px以下をモバイルサイズとして判断します。
• 表示をしない場合でもHTMLソースには出力されます。

余白を指定する場合は、外側の余白（マージン）、内側の余白（パディング)の上・下・左・右に半角数字（マイナス値入力可能）を入力し、単位（pxまたは%）を選択します。
「!importantを追加する」のチェックボックスにチェックを入れると、この余白の設定が優先されます。このチェックを外している場合は、テンプレートなどに指定されている余白が優先され、設定が反映されない場合があります。

• テンプレートなどに指定されているデフォルトの余白の設定に戻す場合は未入力にして保存してください。

背景画像を設定する場合は画像ファイルを指定し、配置の形式を設定します。

配置

• パーツ全体を覆う背景画像にする・・・パーツ全体を覆うように背景画像が配置されます。
• 画像全体を表示する（右下）・・・パーツの右下を起点に背景画像が配置されます。
• 画像全体を表示する（左下）・・・パーツの左下を起点に背景画像が配置されます。
• 画像を全体にリピートする・・・パーツ全体に背景画像が繰り返して配置されます。
• 上側に画像をリピートする・・・パーツの上側に背景画像が繰り返して配置されます。
• 下側に画像をリピートする・・・パーツの下側に背景画像が繰り返し配置されます。

コンテンツパーツ内の「段落番号」（ol）もしくは「箇条書き」（ul）のリストのタイプ／スタイルを設定します。複数のリストがある場合は、選択したタイプ／スタイルに一括変更されます。この設定項目は、コンテンツパーツ内に対象のリストがある場合に表示されます。

• このパーツ内に異なるタイプやスタイルのリストを含む場合は「変更しない」が初期選択されます。
• スタイルが適用されている場合は開始の値やタイプは適用されません。（スタイルが優先して適用されます）

⇒ リストのタイプ／スタイル一括設定についてはこちら

列数セレクト機能に対応しているコンテンツパーツを追加すると、PCサイズ、タブレットサイズ、スマートフォンサイズ、それぞれの基本となるウィンドウサイズで1行に表示する列数を指定できます。

 列数セレクト

• PCサイズ・・・ウィンドウ幅がPCサイズ（992px以上）のときに1行に表示する列数を選択します。
• タブレットサイズ・・・ウィンドウ幅がタブレットサイズ（768px - 991px）のときに1行に表示する列数を選択します。
•  スマートフォンサイズ・・・ウィンドウ幅がスマートフォンサイズ（767px以下）のときに1行に表示する列数を選択します。

• 列数セレクト対応可能パーツは列数が均等割りのパーツのみとなります。コンテンツパーツに列数セレクトのアイコン表示がない場合は非対応パーツとなります。

コンテンツパーツにclass属性を追加する場合は、class名を入力します。複数のclass名を追加するときは、半角スペースを間に挿入してください。

• コンテンツパーツの一番外側のタグのclass属性に入力した値が追加されます。
  例）「test1 test2」と入力した場合は、「class="test1 test2"」のように出力されます。

コンテンツパーツにstyle属性を追加する場合は、指定するstyleを入力します。

• コンテンツパーツの一番外側のタグのstyle属性に入力した値が追加されます。
  例）「background: #f5f5f5;」と入力した場合は「style="background: #f5f5f5;"」のように出力されます。