EN
検索中...

バイオリンクセクション

その バイオリンクセクション Pixpaウェブサイトの任意のページに直接、リンク、ボタン、ソーシャルアイコンのコレクションを追加できます。スタンドアロンの バイオリンクページこのセクションは他のページ要素と一緒に配置できるため、ホームページ、About ページ、または任意のカスタム ページのいずれの場合でも、重要なリンクをコンテキスト内で柔軟に表示できます。

Biolinks セクションを使用すると、訪問者をストア、問い合わせフォーム、ソーシャル プロファイル、または外部 Web サイトに誘導する、コンパクトでモバイル フレンドリーなリンク セットを簡単に作成できるようになります。

ここで扱われる内容：

  1. バイオリンクセクションを追加
  2. バイオリンクの推奨事項
  3. リスト項目の追加と編集
  4. シーケンス リスト アイテム
  5. リスト項目の削除
  6. 要素の管理
  7. セクション レイアウトの変更
  8. スタイルオプション

バイオリンクセクションを追加

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

  • 今すぐ セクションカテゴリ 左側にあります。
  • 選択する プロフィールとバイオリンク （1）カテゴリーをクリックし、 バイオリンク タブ (2) から選択できます さまざまなレイアウト バイオリンク (3) セクション。

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

バイオリンクの推奨事項

  • すっきりと焦点を絞ったレイアウトにするには、セクションの幅を「小」または「極小」に設定します。 さらに詳しく.
  • コンパクトで視覚的に魅力的な外観を維持するために、小さいフォント サイズを使用します。
  • 強調を強めるには、列数を 1 にしておきます。
  • テキストの量を制限し、各リンクの短く明確なラベルに重点を置きます。
  • リンクを目立たせるために、ボタンとテキストに高コントラストの色を使用します。
  • リンクに注目が集まるように、全体的なデザインをミニマルに保ちます。
  • 画像やアイコンを追加する場合は、見た目が乱雑にならないように、サイズとスタイルが一貫していることを確認してください。

リスト項目の追加と編集

リストアイテムを追加

セクションを追加したら:

  • 以下を行うには、 画像リストの編集 (1) ボタンをクリックして、リスト項目パネルを開きます。

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

リスト項目の編集

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

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

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

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

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

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

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

7. ボタンとアイコン: 任意のタイプを追加します リンク リスト項目にボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.

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

セクションのカードスタイル設定を上書きすることができます。 スタイル設定 プロフィールセクションで各アイテムのカードを個別にカスタマイズできます。これにより、リストアイテムごとに異なるスタイルを適用し、より細かくカスタマイズできます。

さらに詳しく ダイナミックセクションのカードオプションについて。

9. シェイプスタイルのオーバーライド

オーバーライド オプションを使用すると、プロファイル セクション内の各画像に個別に異なる形状を割り当てることができ、各アイテムの視覚スタイルをより細かく制御できます。 さらに詳しく シェイプマスクについて。

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

お願い

  • 有効にする カード からのオプション スタイル設定 個々のアイテムのカードを上書きしてカスタマイズします。
  • 有効にする シェイプマスク からのオプション スタイル設定 各項目ごとに図形のスタイルを個別に設定できます。

シーケンス リスト アイテム

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

実際のイメージ リスト アイテムの順序付けを参照してください。 

リスト項目の削除

リスト アイテムを追加したら、それを編集および削除できます。

  • 以下を行うには、 削除 画像リスト項目の横にあるアイコン。
  • をクリックします。 削除 確認ポップアップのボタン。
  • 最後に、 保存 あなたの変更。

実際のイメージ リスト アイテムの削除を参照してください。 

 

お願い

一度削除されたリスト項目は復元できません。

要素の管理

バイオリンクリストセクションには、 要素タブ セクション内のさまざまな要素の表示を簡単に管理できます。シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。

  • 以下を行うには、 画像リストの編集 （1）ボタン。

  • 選択する 要素 (2) タブ。
  • 変更を加えたら、 Save （3）ボタン。

セクションのオプション

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

アイテムオプション

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

セクションレイアウトの変更

  • 以下を行うには、 画像リストの編集 （1）ボタン。

  • 選択する レイアウト (2) タブ。
  • 選択する セクションのレイアウトと Save (3) 変更。

 

プロからのヒント

全幅セクション/タブ付きリスト セクションを作成するには、25 ～ 29 の範囲のレイアウトを選択します。

Notes

  • タブ付きリストのレイアウトをページに簡単に追加できます。
  • 水平タブ/垂直タブのレイアウトから選択するオプションがあります。
  • 比較ベースのセクションを作成するのに役立ちます。

スタイルオプション

  • ソフトウェアの制限をクリック 画像リスト編集 (1)

  • 選択する スタイル（2） タブには何も表示されないことに注意してください。
  • セクション要素のスタイルを変更し、 保存 (3) あなたの変更。

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

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

ディスプレイ 

  1. に選択します。 アイテムを表示 in 行と列 or カルーセル 
    • を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
    • を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.
  2. をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
  3. 特定します 列間のスペース リスト項目の。
  4. 特定します 行間のスペース リスト項目の。

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

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

モバイルディスプレイ

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

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

アラインメント

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

文字サイズ

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

間隔

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

セクションの見出し

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

画像 

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

先端

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

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

シェイプマスク

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

Notes

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

画像ホバー時 

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

イメージボーダー

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

カード

Shadow

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

ボタンとリンク

  1. 方法を参照してください のスタイリングを管理する ボタンとリンク。
  2. Save すべてのスタイルが変わります。

 

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

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

お問い合わせ