ビデオリストセクション

ページにビデオ リスト セクションを追加すると、ページで再生される YouTube/Vimeo ビデオを簡単に追加できます。 これは、Web サイト訪問者の関心を維持するための優れた方法です。

Pixpa は、YouTube または Vimeo からのビデオの埋め込みをサポートしています。 ウェブサイトにビデオを直接アップロードすることはできません。 このセクションとは別に、ビデオを追加することもできます Gallery または バナー.

Pixpa を使用すると、YouTube または Vimeo プロフィールを ソーシャルリンク. 音楽セクションで、Soundcloud でホストされている音楽ファイルを追加することもできます。

注意点:

  • 動画を (YouTube または Vimeo 上で) 一般公開しないようにし、ここの URL を使用して Web サイトに表示することができます。
  • ビデオがサポートされている場所ならどこでも .gif ファイルをアップロードできます。
  • 追加したビデオが頻繁に読み込まれる場合は、再生ボタンをクリックして数分間一時停止します。 その後、ビデオを再開します。 このようにして、バッファリングを減らして読み込みを改善します。

ここで扱われる内容:

  1. 動画リストとは?
  2. ビデオ リスト セクションをページに追加する
  3. リスト アイテムの追加と編集
  4. シーケンス リスト アイテム
  5. リスト項目の削除
  6. セクション レイアウトの変更
  7. スタイルオプション
  8. 音楽セクションを追加する
  9. サウンドクラウドの音楽を追加
  10. フルカードとテキストカード

1. 動画一覧

ビデオ リストはビデオのコレクションで、ビデオの説明を追加したり、リンクやボタンを追加してビデオ リストを Web サイトの他のページや他のリンクに接続したりできます。


2. 動画リスト セクションを追加する

  • ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
  • あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。

 

  • 今すぐ セクションカテゴリ 左側にあります。
  • セットアップボタンをクリックすると、セットアップが開始されます  リスト (1)タブと 動画一覧 とします。
  • 今、あなたは見るでしょう さまざまなレイアウト ビデオリストセクション とします。

  • 任意のセクション レイアウトを選択し、クリックしてページに追加します。

3. リスト アイテムの追加と編集

動画リスト アイテムを追加

セクションを追加したら

  • セットアップボタンをクリックすると、セットアップが開始されます 動画リストの編集 (1) ボタンをクリックして、リスト項目パネルを開きます。

  • セットアップボタンをクリックすると、セットアップが開始されます アイテムを追加 (2) 新しいリスト項目を追加するボタン。
  • あなたはするオプションがあります 複製して削除する (3) リスト項目。


ビデオ リスト アイテムの編集

編集するリスト項目をクリックします。 特定のリスト項目の編集オプションが開きます。

  • Add Youtube/Vimeo ビデオ リンク (1)。
注:

動画を Pixpa Web サイトに追加するには、動画を Youtube または Vimeo にアップロードし、ここに URL を入力する必要があります。 

  • で再生するようにビデオを設定します。 ライトボックスまたはページのみ とします。

  • 画像をアップロードする (3) リスト アイテムの場合。

  • 加える 役職 (4)、字幕 (5)、および説明 (6) リスト アイテムの。 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。

  • のリンク ビルダー アイコンをクリックします。 タイトルリンク (7) リンク ビルダーを開いて、リスト アイテムのタイトルを任意のページにリンクします。
  • で開くようにリンクを設定します 新しいタブまたは同じタブ内 とします。
  • 任意のタイプを追加します リンク (9)リスト項目へ。 ボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.
  • Save (10) お客様の変更。

 


実際の動画リスト アイテムの編集を参照してください。


4. 配列表項目

  • リスト項目を簡単にドラッグ アンド ドロップして、順序を変更できます。

5. リスト アイテムを削除する

リスト項目を追加したら、同じものを編集および削除できます。

  • セットアップボタンをクリックすると、セットアップが開始されます 削除 ビデオ リスト アイテムの横にある アイコンをクリックします。
  • セットアップボタンをクリックすると、セットアップが開始されます 削除 確認ポップアップのボタン。
  • Save あなたの変更。

Note

一度削除されたリスト アイテムは復元できません。


6.セクションレイアウト

  • セットアップボタンをクリックすると、セットアップが開始されます アイテムを管理する ボタンをクリックして、ビデオ リスト編集パネルを開きます。
  • 選択する レイアウト タブには何も表示されないことに注意してください。
  • セクションのレイアウトを選択し、変更を保存します。

7. セクションのスタイルを設定する

  • セットアップボタンをクリックすると、セットアップが開始されます 管理する (1) ボタンをクリックして、ビデオ リスト編集パネルを開きます。
  • 選択する スタイル(2) オプションを選択します。
  • セクション要素のスタイルを変更し、 保存 (3) あなたの変更。


セクションには複数のスタイル オプションがあります。

  1. スタイルオプション 
  2. 文字スタイル 
  3. ホバーの色

スタイルオプション

アイテム 

  1. に選択します。 アイテムを表示 in 行と列 or カルーセル 
    • を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
    • を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.
  2. をセットする  列の数 動画一覧です。 1 ~ 10 列から選択できます。
  3. 特定します 列間のスペース リスト項目の。
  4. 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
  5. 整列 コンテンツ ビデオリストで。 左、右、または中央揃えに設定できます。
  6. カルーセルをループするかどうかを選択します。
  7. カルーセルの場合は、 ナビゲーションコントロール. コントロールなし、矢印 – 中央下/右上/右下、シェブロン、ドットから選択できます。

画像 

  1. 選択する 画像の切り抜き リスト項目の場合。 画像は、正方形、円形、横長、縦長、ダイナミックに設定できます。
  2. リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 コーナー半径 リスト項目の画像。 もっと知る.

先端

使い方 コーナー半径 フィールドでは、さまざまな形状のリスト アイテム イメージを作成できます。 ここで 500 px を指定すると、画像は円形で表示されます。

  • 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。

画像ホバー時 

  1. 選択する 画像ホバーの色  アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度.
  2. を選択した場合 色を指定 オプションを設定してから ベースのホバーの色と不透明度 リストアイテム用。
  3. をセットする  要素 セクションのリスト項目の色。
  4. に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.

サイズとスペース 

  1. 特定します 画像の幅 リストアイテム用。
  2. 特定します コンテンツの幅 リストアイテム用。
  3. 特定します セクション見出しの下のスペース ピクセルで。
  4. 特定します 画像の下のスペース リスト項目の (%)。
  5. 特定します タイトルの下のスペース リスト項目の (%)。
  6. 特定します 字幕の下のスペース リスト項目の (%)。

テキスト 

  1. セットアップボタンをクリックすると、セットアップが開始されます  文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
  2. をセットする  役職 セクションのリスト項目のフォント スタイル。
  3. をセットする  サブタイトル セクションのリスト項目のフォント スタイル。
  4. デフォルトを設定する 説明 セクションのリスト項目のフォント スタイル。

カード 

  1. 方法を参照してください カードの管理に。

Shadow 

  1. ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
  2. 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
    カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS.

  1. プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。

  1. 方法を参照してください ボタンとリンクのスタイルを管理します。


8. 音楽セクションを追加

  • あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。

  • 今すぐ セクションカテゴリ 左側にあります。
  • 下にスクロールして、 映像・音楽部門 (1) さまざまなレイアウトから選択できるオプション。

  • 任意のセクション レイアウト (2) を選択し、クリックしてページに追加します。

9.Soundcloud 音楽を追加する

  • Soundcloud のサムネイルをクリックします。
  • これにより、[埋め込み] ボタンが有効になります。クリックします。
  • 埋め込みボックスに SoundCloud 埋め込みコードを追加できます。
  • 保存をクリックします。
  • それでおしまい! SoundCloud ミュージックが追加されました。

実際の動作を参照してください。


10. フルカードとテキストカード

オンにすると フル/テキスト カード ビデオ リストの上に、リスト アイテムのアウトラインと背景が表示されます。背景には、 設計 のセクションから無料でダウンロードできます。
参照: ウェブサイトの色と間隔。

フルカード

カード全体のオプションを選択すると、カードの色がカード全体、つまり動画のサムネイルとそのテキストに適用されます。

ご覧ください: 

テキストカード

テキスト カード オプションが選択されている場合、カードの色はビデオ サムネイルと共に表示されるテキストにのみ適用されます。

ご覧ください: 

お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。