EN
検索中...

チームセクション

チームはあらゆる組織の成功にとって非常に重要です。 多様なスキル、専門知識、視点を持つ個人が集まり、目標を達成できるダイナミックな環境を作り出します。

Pixpaのチームセクションを使用すると、チームメンバーのプロフィールと写真、それぞれの役割と責任を表示できます。

ここで扱われる内容：

    1. チームセクションの追加
    2. リスト アイテムの追加と編集
    3. リスト項目の順序付け
    4. 要素の管理
    5. セクションのレイアウトを変更する
    6. スタイリングチームセクション

ページにチームセクションを追加する

  • セクションを追加するには、次のことを行う必要があります。 ページを追加 まずはあなたのウェブサイトへ。
  • あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション.

  • 今すぐ セクションカテゴリ 左側にあります。
  • スクロールします チーム (1)をクリックしてください。 画面がポップアップ表示され、次から選択できます さまざまなレイアウト チーム部門（2）

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

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

リスト項目を追加する

  • ソフトウェアの制限をクリック チームを編集 (1) ボタンをクリックして、リスト項目パネルを開きます。

  • 以下を行うには、 アイテムを追加 (2) ボタンをクリックして、新しいリスト アイテムを追加します。
  • あなたは D複製または削除 (3) リストアイテム。

リスト アイテムの編集

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

ここから、次のことができます。

  • プライマリイメージとセカンダリイメージのアップロード/削除 (1)
    あなたはアップロードすることができます 二次画像 と一緒に プライマリ画像 各リスト項目に設定されます。ユーザーが項目の上にマウスを移動すると、プライマリ画像の代わりにセカンダリ画像が表示されます。さらに、 画像のアクセントカラー画像の上にマウスを移動すると表示されます。
  • 加える Title (2)、字幕 (3)、および説明 (4) リスト項目の。
  • 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
    説明を追加する前に確認してください この 記事。

5. クリック時のアクション

チームセクション内の個々のアイテムのクリック動作をカスタマイズできます。利用可能なオプションは以下のとおりです。

  • リンクへ移動
    このオプションを選択すると、 リンクビルダーを使用すると、このアイテムにハイパーリンクを追加できます。このリンクにより、ユーザーを Web サイト内の別のページまたは外部 URL に誘導できます。 もっと知る 自己紹介 リンクビルダー.
  • ライトボックスで開く
    このオプションではアイテムを拡大して表示します ライトボックス クリックすると表示されます。このモードでは、 サブタイトル (NAIST) と  詳細説明  アイテムに関連付けられた情報はグリッド ビューには表示されませんが、ライトボックス モードでは表示されます。
  • 何もしません
    このオプションを選択すると、アイテムをクリックできなくなります。選択すると、アイテムをクリックしてもアクションはトリガーされません。

6.リンクを新しいウィンドウで開く：リンクを新しいタブで開くか、同じタブで開くかを設定します。このオプションは、「クリック時のアクション」メニューで「リンクに移動」を選択した場合にのみ表示されます。

7. ボタンとリンク:リスト項目に任意の種類のリンクを追加できます。ボタン、画像リンク、ソーシャルアイコン、テキストリンクを追加できます。詳細はこちらをご覧ください。

8. カードスタイルのオーバーライド

セクションの「スタイル設定」からグローバルなカードスタイル設定を上書きし、「画像リスト」セクションで各アイテムのカードを個別にカスタマイズできます。これにより、リストアイテムごとに異なるスタイルを適用して、より高度なカスタマイズが可能になります。

動的セクションの「カード」オプションの詳細については、こちらをご覧ください。

9. 保存：カスタマイズを行った後、変更を保存します。

お願い

各アイテムごとにカードを個別にカスタマイズするには、まずスタイル設定から「カード」オプションを有効にする必要があります。

リスト項目の順序付け

リストアイテムの順序は、ドラッグ＆ドロップで簡単に変更できます。Teamsアイテムリストの順序変更の実際の例をご覧ください。

チームセクションの要素を管理する

「チーム」セクションには「要素」タブがあり、セクション内のさまざまな要素の表示設定を簡単に管理できます。

シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。

  • 以下を行うには、 要素 (1) タブ。
  • 変更を加えたら、 Save （2）ボタン。

セクションのオプション

  1. 見出しを表示: チーム セクションの見出しの表示を有効または無効にします。
  2. ボタンを表示: セクション レベルでボタンを表示するかどうかを制御します。

アイテムオプション

  1. 画像を表示: 画像の表示/非表示を切り替えます。
  2. ショーのタイトル: タイトルを表示するかどうかを制御します。
  3. 字幕を表示: 字幕を有効または無効にします。
  4. 説明を表示: アイテムの説明の表示を管理します。
  5. ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。

セクション レイアウト

    • 以下を行うには、 チームを編集 ボタンをクリックしてセクション編集パネルを開き、 レイアウト タブには何も表示されないことに注意してください。
    • ここから、ページにセクションを追加した後でも、セクションのレイアウトを簡単に変更できます。

レイアウトを変更している間、セクション関連のレイアウトが上部に表示されます。

これらに加えて、 「その他のレイアウト」の見出しの下にある他のセクションからレイアウトを選択することもできます。

スタイリングチームセクション

チームセクションのさまざまな要素は、さまざまなスタイル設定オプションを使用してカスタマイズできます。スタイル設定オプションに移動するには、「チームを編集」（1）ボタンをクリックしてください。

  • 選択する 形式 (2) タブ。
  • カスタマイズ後、 Save (3) 変更。

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

  1. 表示オプション
  2. モバイルディスプレイ
  3. アラインメント
  4. 文字サイズ
  5. 間隔
  6. セクションの見出し
  7. 画像オプション
  8. シェイプマスク
  9. 画像ホバーオプション
  10. イメージボーダー
  11. カード
  12. Shadow
  13. ボタンとリンク

表示オプション

  1. に選択します。 アイテムを表示 in 行と列 / カルーセル / ショーケース
    • を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
    • を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.

    • Showcaseは、洗練されたインタラクティブなカルーセルスタイルのレイアウトで、画像をスムーズなトランジションとエフェクトで1枚ずつ表示します。このレイアウトは、サイトにモダンで没入感のある体験をもたらします。詳細はこちらをご覧ください。

  2. をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
  3. 特定します 列間のスペース リスト項目の。
  4. 特定します 行間のスペース リスト項目の。

ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。

  1. スムーズ スクロールを有効にする: カルーセル内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスが実現します。
  2. 自動スライド: ユーザーの操作なしでスライドを自動的に回転させます。
  3. 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
  4. 自動再生の遅延: 自動再生が有効になっている場合、各スライドの切り替え間の時間間隔を設定します。
  5. カルーセルループ: スライドの連続ループを有効にして、最後のスライドの後にカルーセルがシームレスに再開されるようにします。
  6. カルーセル コントロール：を選択 ナビゲーションコントロールコントロールなし、矢印（中央下/右上/右下）、シェブロン、ドット、水平スクロールから選択できます。
  7. フェードエッジ: カルーセルの端に微妙なフェード効果を適用します。画像がビューに出入りするときに画像をソフトにブレンドすることで、ユーザー エクスペリエンスが向上します。

ステップ 1 で Showcase オプションを選択した場合は、次の追加オプションが表示されます。

  1. 効果： フェード、フリップ、カード、カバーフロー (傾斜)、またはカバーフロー (フラット) の 5 つのアニメーション効果から選択して、画像の遷移を制御します。
  2. スムーズスクロールを有効にする: ショーケース内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスを実現できます。
  3. 自動スライド: ユーザー入力なしで画像を自動的に切り替えます。
  4. 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
  5. 自動再生遅延: 自動再生が有効な場合のスライド間の時間を設定します。1秒から10秒までの任意の値を選択できます。
  6. カルーセルループ: これを有効にすると、カルーセルが無限にループし、連続再生が可能になります。
  7. カルーセルコントロール: カルーセル コントロール設定では、矢印 (中央下、右上、右下)、ドット、コントロールなしなどのオプションを使用して、ユーザーがスライド間を移動する方法を選択できます。

モバイルディスプレイ

  1. の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
  2. 定義 間隔 グリッド間 (ピクセル単位)。

スタジオ設定に基づくデバイス固有の列レイアウト:

アラインメント

  1. 整列 画像を水平に チームセクションで、左揃え、右揃え、中央揃えに設定できます。
  2. 整列 テキストを水平に チームセクションで、左揃え、右揃え、中央揃えに設定できます。
  3. 整列 コンテンツを縦方向に表示 チームリストに表示されます。上揃え、中央揃え、下揃えに設定できます。
  4. 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。

セクションの見出し

  1. 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
  2. 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
  3. をセットする 仕切りの厚さ (ピクセル単位)。
  4. 特定します 仕切りの色 カラーピッカーから。
  5. 選択する ディバイダースタイル をドロップダウンから選択します。

文字サイズ

  1. 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
  2. をセットする Title セクションのリスト項目のフォント スタイル。
  3. をセットする サブタイトル セクションのリスト項目のフォント スタイル。
  4. デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
  5. このオプションを有効にすると 数字をアニメーション化する に存在する Title (NAIST) と サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。

間隔

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

セクションの見出し

  1. 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
  2. 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
  3. をセットする 仕切りの厚さ (ピクセル単位)。
  4. 特定します 仕切りの色 カラーピッカーから。
  5. 選択する ディバイダースタイル をドロップダウンから選択します。

画像

  1. 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
  2. リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.

先端

角丸半径フィールドを使用すると、リストアイテムの画像にさまざまな形状を作成できます。ここで500ピクセルを指定すると、画像は円形に表示されます。

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

シェイプマスク

  1. シェイプマスク: このトグルを有効にすると、Teamsセクションの画像にシェイプマスクが適用されます。有効にすると、選択したシェイプが画像に視覚的にクリップされ、そのフォームに収まります。
  2. 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイリングできます。
  3. ストレッチ： このオプションを有効にすると、選択した図形が画像コンテナに収まるように引き伸ばされます。これにより、図形が利用可能なスペースを均等に埋め尽くし、さまざまな画面サイズでの視覚的な配置が向上します。

Notes

  • ストレッチオプションはレイアウトに依存します – 特定のレイアウトでは表示されない場合があります。タイトルやサブタイトルなどのテキストが画像の上に表示されるレイアウトでは、 シェイプマスクオプション全体が利用できない場合があります.
  • ストレッチ設定は複数の要因に依存します - 含む 画像サイズ, アラインメント, 切り抜き設定 スタイルタブで定義されます。
  • 画像の切り抜きがオリジナルに設定されている場合画像の実際の寸法によって、垂直方向に引き伸ばされるか、水平方向に引き伸ばされるかが決まります。

画像ホバー

  1. 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度各アイテムのアクセントカラーを以下から指定できます。 アイテムを編集 パネル。
  2. を選択した場合 色を指定 オプションを設定してから オーバーレイの色と不透明度.
  3. をセットする オーバーレイテキストの色 ホバーすると表示されます。
  4. に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
  5. 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときに表示されます。
  6. 許可する場合は選択してください 画像の遷移 ホバーしているかどうか。
  7. ドロップダウンリストから トランジションスタイル ホバー遷移用。使用可能なオプションはフェードと反転です。

イメージボーダー

  1. 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
  2. を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
  3. 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
  4. まず 境界線の色 カラーピッカーから。
  5. 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
  6. を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。

カード

Shadow

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

ボタンとリンク

タグ：

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

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

お問い合わせ
Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。