「DG-style」で使える各パーツについて説明します。

「記事動画サムネイル」パーツの概要

記事ページで設定した動画サムネイルを表示します。

「記事動画サムネイル」パーツ追加

  1. パーツ追加から「記事動画サムネイル」を選択
  2. テンプレートリストで好きなテンプレートを選択
  3. エリア選択で追加したいエリアを選択

「記事動画サムネイル」パーツ設定

動画オプション設定

  1. 「一覧ページ動画サムネイル」を「マウス右ボタン」でクリック
  2. 表示されたメニューから「オプション」をクリック
  3. 「動画オプション」を変更する
  4. 完了

動画サムネイル表示設定

  1. 動画にポスターイメージを追加したい場合、「動画サムネイル表示」をONにする

動画がない場合の設定

  1. 動画がない場合、代わりにサムネイルを表示したい場合は「サムネイルのみ表示」をONにする

動画サムネイルサイズ

  1. 「動画サムネイルサイズ」を変更する
  2. srcsetを利用する場合は、ONにする

※動画ポスターの場合、srcsetは適用されません。

imgサイズ設定

  1. 「イメージタグサイズ」を設定する
  2. HTMLコード上「width」と「height」が反映される
  3. 完了

パーツClass追加

  1. オプションの「その他」をクリック
  2. 「Class追加」に追加したいClassを半角英字から始める「半角英数字、-、_」で入力
  3. 完了

パーツの共通メニュー

パーツのメニュー全体

パーツラベル編集

ラベル編集ボタン
ラベル変更

パーツの名前を変えることができます。色んなパーツがある場合は分かりやすい名前をつけて区別しましょう。

分かりやすい名前に変えられる

エリアロック

ロックボタン

ロックボタンで、エリアをロックすることで「該当エリア」と「属するすべてのパーツ」を編集できないようにします。

予想せずにパーツを修正するミスを防ぐことができます。

ロックした場合、該当エリア&パーツは「赤色」になる
エリアロックの場合、所属パーツは「オレンジ」になる

移動メニュー

パーツ移動メニュー
上下移動
エリア移動

パーツの上下移動や属しているエリアを変えることができます。

※デザイン設定によって、上下ではなく左右に移動する場合があります。

パーツコピーメニュー

パーツコピーボタン

現パーツの設定を全てコピーして、新しいパーツを追加します。

親エリアに複数のパーツがある場合は、一番最後に追加されます。

テンプレート

テンプレートメニュー
パーツテンプレート適用

1クリックで、パーツのデザインを変えられるテンプレートメニューを開きます。簡単にデザインを変えたい場合に使います。

デザイン設定

デザイン設定メニュー
デザイン設定例

パーツのデザインを変更できます。

オプション

パーツ専用オプション
オプションの表示

各パーツ専用のオプションメニューを開きます。上で詳しく説明しています。

イベント

イベントメニュー
イベント例

スクロールの動きや画面の位置などで、現パーツにClassを追加することができます。

追加されるClassを元にデザイン設定をすることで以下のことができます。

  • パーツが画面の中に入ったら、アニメーションを見せる
  • パーツが画面から見えなくなると、パーツを画面上部に固定させる
  • スクロール動きに合わせて、要素を固定させる などなど

非表示設定

ページごと非表示設定メニュー
非表示例

現パーツを指定したページで非表示させることができます。CSSによる非表示ではなくコード上でなくなります。

特定ページでは表示したくないパーツなどに設定します。

親エリア

現パーツの親エリアメニュー
親エリア例

現パーツが属している親エリアのメニューを表示することができます。

エリアにパーツを追加することで、選択ができなくなっても、エリアメニューを開きたい時に使います。

※エリア専用オプションからは、直下のパーツ/エリアリストからメニューを開くことができます。

パーツ削除

現パーツの削除メニュー
パーツ削除例

現パーツを削除することができます。

エリアの場合、削除するエリアに属している全てのパーツ/エリアも削除します。

TOP