チームはあらゆる組織の成功にとって非常に重要です。 多様なスキル、専門知識、視点を持つ個人が集まり、目標を達成できるダイナミックな環境を作り出します。
Pixpaのチームセクションを使用すると、チームメンバーのプロフィールと写真、それぞれの役割と責任を表示できます。
ここで扱われる内容：
ページにチームセクションを追加する
- 今すぐ セクションカテゴリ 左側にあります。
- スクロールします チーム (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) タブ。
- カスタマイズ後、 Save (3) 変更。
セクションには複数のスタイル オプションがあります。
- 表示オプション
- モバイルディスプレイ
- アラインメント
- 文字サイズ
- 間隔
- セクションの見出し
- 画像オプション
- シェイプマスク
- 画像ホバーオプション
- イメージボーダー
- カード
- Shadow
- ボタンとリンク
表示オプション
- に選択します。 アイテムを表示 in 行と列 / カルーセル / ショーケース
- をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
- 特定します 列間のスペース リスト項目の。
- 特定します 行間のスペース リスト項目の。
ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。
- スムーズ スクロールを有効にする: カルーセル内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスが実現します。
- 自動スライド: ユーザーの操作なしでスライドを自動的に回転させます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生の遅延: 自動再生が有効になっている場合、各スライドの切り替え間の時間間隔を設定します。
- カルーセルループ: スライドの連続ループを有効にして、最後のスライドの後にカルーセルがシームレスに再開されるようにします。
- カルーセル コントロール：を選択 ナビゲーションコントロールコントロールなし、矢印（中央下/右上/右下）、シェブロン、ドット、水平スクロールから選択できます。
- フェードエッジ: カルーセルの端に微妙なフェード効果を適用します。画像がビューに出入りするときに画像をソフトにブレンドすることで、ユーザー エクスペリエンスが向上します。
ステップ 1 で Showcase オプションを選択した場合は、次の追加オプションが表示されます。
- 効果： フェード、フリップ、カード、カバーフロー (傾斜)、またはカバーフロー (フラット) の 5 つのアニメーション効果から選択して、画像の遷移を制御します。
- スムーズスクロールを有効にする: ショーケース内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスを実現できます。
- 自動スライド: ユーザー入力なしで画像を自動的に切り替えます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生遅延: 自動再生が有効な場合のスライド間の時間を設定します。1秒から10秒までの任意の値を選択できます。
- カルーセルループ: これを有効にすると、カルーセルが無限にループし、連続再生が可能になります。
- カルーセルコントロール: カルーセル コントロール設定では、矢印 (中央下、右上、右下)、ドット、コントロールなしなどのオプションを使用して、ユーザーがスライド間を移動する方法を選択できます。
モバイルディスプレイ
- の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
- 定義 間隔 グリッド間 (ピクセル単位)。
スタジオ設定に基づくデバイス固有の列レイアウト:
アラインメント
- 整列 画像を水平に チームセクションで、左揃え、右揃え、中央揃えに設定できます。
- 整列 テキストを水平に チームセクションで、左揃え、右揃え、中央揃えに設定できます。
- 整列 コンテンツを縦方向に表示 チームリストに表示されます。上揃え、中央揃え、下揃えに設定できます。
- 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
セクションの見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
文字サイズ
- 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。
- をセットする Title セクションのリスト項目のフォント スタイル。
- をセットする サブタイトル セクションのリスト項目のフォント スタイル。
- デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
- このオプションを有効にすると 数字をアニメーション化する に存在する Title (NAIST) と サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。
間隔
- 特定します 画像の幅 リストアイテム用。
- 特定します コンテンツの幅 リストアイテム用。
- 特定します セクション見出しの下のスペース ピクセルで。
- 特定します 画像の下のスペース リスト項目の (%)。
- 特定します タイトルの下のスペース リスト項目の (%)。
- 特定します 字幕の下のスペース リスト項目の (%)。
セクションの見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
画像
- 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
- リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.
使い方 コーナー半径 フィールドでは、さまざまな形状のリスト アイテム イメージを作成できます。 ここで 500 px を指定すると、画像は円形で表示されます。
- 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。
シェイプマスク
- シェイプマスク: このトグルを有効にすると、Teamsセクションの画像にシェイプマスクが適用されます。有効にすると、選択したシェイプが画像に視覚的にクリップされ、そのフォームに収まります。
- 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイリングできます。
- ストレッチ： このオプションを有効にすると、選択した図形が画像コンテナに収まるように引き伸ばされます。これにより、図形が利用可能なスペースを均等に埋め尽くし、さまざまな画面サイズでの視覚的な配置が向上します。
画像ホバー
- 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度各アイテムのアクセントカラーを以下から指定できます。 アイテムを編集 パネル。
- を選択した場合 色を指定 オプションを設定してから オーバーレイの色と不透明度.
- をセットする オーバーレイテキストの色 ホバーすると表示されます。
- に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
- 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときに表示されます。
- 許可する場合は選択してください 画像の遷移 ホバーしているかどうか。
- ドロップダウンリストから トランジションスタイル ホバー遷移用。使用可能なオプションはフェードと反転です。
イメージボーダー
- 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
- を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
- 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
- まず 境界線の色 カラーピッカーから。
- 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
- を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。
カード
- 方法を参照してください カードの管理に。
Shadow
- ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
- 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS. - プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。
ボタンとリンク
- 方法を参照してください のスタイリングを管理する ボタンとリンク。
