パーツ設定パーツ設定

コンテンツパーツにバリエーションや余白などの設定をすることができます。

パーツ設定を変更する

1
編集したいページを編集モードで表示します。

2
コンテンツパーツの枠線の右上に表示される[メニュー]ボタンをタップします。

3
パーツ設定画面が表示されますので、各項目を変更します。

【基本設定】タブ

バリエーション

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

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

PC表示

PCサイズ(パソコンサイズ)のウィンドウ幅かどうかを判断して、このパーツを表示するかどうか設定します。

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

モバイルサイズのウィンドウ幅かどうかを判断して、このパーツを表示するかどうか設定します。

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

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

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

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

配置
  • パーツ全体を覆う背景画像にする・・・パーツ全体を覆うように背景画像が配置されます。
  • 画像全体を表示する(右下)・・・パーツの右下を起点に背景画像が配置されます。
  • 画像全体を表示する(左下)・・・パーツの左下を起点に背景画像が配置されます。
  • 画像を全体にリピートする・・・パーツ全体に背景画像が繰り返して配置されます。
  • 上側に画像をリピートする・・・パーツの上側に背景画像が繰り返して配置されます。
  • 下側に画像をリピートする・・・パーツの下側に背景画像が繰り返し配置されます。
フローティング 対象のパーツをフローティング(画面の指定位置に固定)するかどうか設定します。フローティングする場合は「する」を選択し、位置指定(上・下・左・右)する項目に半角数字を入力して単位(pxまたは%)を選択します。

リスト タイプ/スタイル一括設定

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

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

列数セレクト

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

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

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

【高度な設定】タブ

HTMLタグやCSSの編集、記述に関する一般的な知識が必要不可欠となりますが、高度な設定では、コンテンツパーツにclassやstyleを設定することができます。

  • HTMLタグやCSSの記述に関しましてはサポートは行っておりません。
カスタムclass属性

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

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

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

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

4
画面右上の「保存」をタップして完了です。

よくある質問

コンテンツパーツの表示内容をパソコンとスマートフォンで変えることはできますか?

コンテンツパーツごとに、パーツ設定画面で「PC表示」と「モバイル表示」を設定することが可能です。この機能を活用することで、2つのコンテンツパーツを作成し、以下のように設定することで表示内容を分けられます。

  • パソコンのみで表示するパーツ:PC表示を「有効」、モバイル表示を「無効」に設定
  • スマートフォンのみで表示するパーツ:PC表示を「無効」、モバイル表示を「有効」に設定

パーツ設定画面で「リスト」の設定項目が表示されません。

 「リスト」の設定項目は、テキストなどのコンテンツパーツ内に「段落番号」(ol)または「箇条書き」(ul)が含まれている場合にのみ表示されます。設定を行うには、該当するコンテンツパーツを編集し、「段落番号」または「箇条書き」を挿入してから、パーツ設定画面でリストのスタイルを設定してください。

ブログ内検索