これは、リストに項目を追加することで一連のロゴと関連テキストを表示できる専用セクションです。
理想的には、Web サイトのプレフッターでこのセクションを使用して、アフィリエイト、ブランド、賞や表彰などを表示できます。
ここで扱われる内容：
ロゴセクションを追加
- 今すぐ セクションカテゴリ 左側にあります。
- にスクロールします 及び (1)セクションをクリックしてください。 さまざまな選択肢から選択できる画面が表示されます レイアウト ロゴセクションの(2)。
- 任意のセクション レイアウトを選択し、クリックしてページに追加します。
ロゴセクションの編集
セクションを追加したら:
- 以下を行うには、 ロゴを編集する (1) セクションの設定を開くボタン。
リスト項目の追加と編集
リスト項目を追加する
- 以下を行うには、 アイテムを追加 (1) ボタンをクリックして、リストに新しい項目を追加します。
- 重複ファイル or 削除 (2) リスト項目。
- 編集 セクションの見出し （3）セクションの。
リスト アイテムの編集
編集したいリスト項目をクリックします。特定のリスト項目の編集オプションが開きます。ここから次の操作を実行できます。
- プライマリイメージとセカンダリイメージのアップロード/削除 (1)
あなたはアップロードすることができます 二次画像 と一緒に プライマリ画像 各リスト項目に設定されます。ユーザーが項目の上にマウスを移動すると、プライマリ画像の代わりにセカンダリ画像が表示されます。さらに、 画像のアクセントカラー画像の上にマウスを移動すると表示されます。 - 加える Title (2)、字幕 (3)、および説明 (4) リスト項目の。
- 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
説明文を追加する前に、この記事を確認してください。
5. クリック時のアクション – タイトルと画像
ロゴセクション内の個々のアイテムのクリック動作をカスタマイズできます。利用可能なオプションは以下のとおりです。
- リンクへ移動
このオプションを選択すると、 リンクビルダーを使用すると、このアイテムにハイパーリンクを追加できます。このリンクにより、ユーザーを Web サイト内の別のページまたは外部 URL に誘導できます。 もっと知る 自己紹介 リンクビルダー. - ライトボックスで開く
このオプションではアイテムを拡大して表示します ライトボックス クリックすると表示されます。このモードでは、 サブタイトル (NAIST) と 詳細説明 アイテムに関連付けられた情報はグリッド ビューには表示されませんが、ライトボックス モードでは表示されます。 - 何もしません
このオプションを選択すると、アイテムをクリックできなくなります。選択すると、アイテムをクリックしてもアクションはトリガーされません。
6.リンクを新しいウィンドウで開く：リンクを新しいタブで開くか、同じタブで開くかを設定します。このオプションは、「クリック時のアクション」メニューで「リンクに移動」を選択した場合にのみ表示されます。
7. ボタンとリンク:リスト項目に任意の種類のリンクを追加できます。ボタン、画像リンク、ソーシャルアイコン、テキストリンクを追加できます。詳細はこちらをご覧ください。
8. カードスタイルのオーバーライド
セクションの「スタイル設定」からグローバルなカードスタイル設定を上書きし、「価格設定」セクションで各アイテムのカードを個別にカスタマイズできます。これにより、異なるリストアイテムに独自のスタイルを適用して、より高度なカスタマイズが可能になります。
動的セクションの「カード」オプションの詳細については、こちらをご覧ください。
9. シェイプスタイルのオーバーライド
上書きオプションを使用すると、ロゴセクション内の各画像に個別に異なる形状を割り当てることができ、各アイテムの視覚スタイルをより細かく制御できます。シェイプマスクの詳細については、こちらをご覧ください。
10. 保存：カスタマイズを行った後、変更を保存します。
リスト項目の順序付け
リスト項目の順序は、ドラッグ＆ドロップで簡単に変更できます。ロゴ項目リストの順序変更の例をご覧ください。
ロゴセクションの要素を管理する
ロゴセクションには「要素」タブがあり、セクション内のさまざまな要素の表示/非表示を簡単に管理できます。シンプルなトグルスイッチを使用することで、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にできます。
- 以下を行うには、 ロゴを編集する （1）ボタン。
- 選択する 要素 (2) タブ。
- 変更を加えたら、 Save （3）ボタン。
- 見出しを表示: ロゴ セクションの見出しの表示を有効または無効にします。
- ボタンを表示: セクション レベルでボタンを表示するかどうかを制御します。
アイテムオプション
- 画像を表示: 画像の表示/非表示を切り替えます。
- ショーのタイトル: タイトルを表示するかどうかを制御します。
- 字幕を表示: 字幕を有効または無効にします。
- 説明を表示: アイテムの説明の表示を管理します。
- ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。
レイアウトの管理
- 以下を行うには、 ロゴを編集する ボタンをクリックしてセクション編集パネルを開きます。
- 選択する レイアウト タブには何も表示されないことに注意してください。
- ここから、ページにセクションを追加した後でも、セクションのレイアウトを簡単に変更できます。
レイアウトを変更している間、セクション関連のレイアウトが上部に表示されます。
これらに加えて、 「その他のレイアウト」の見出しの下にある他のセクションからレイアウトを選択することもできます。
スタイルロゴセクション
さまざまなスタイル設定オプションを使用して、ロゴセクションのさまざまな要素をカスタマイズできます。スタイル設定オプションに移動するには、「ロゴを編集」（1）ボタンをクリックしてください。
- 選択する スタイル（2） タブには何も表示されないことに注意してください。
- セクション要素のスタイルを変更し、 保存 (3) あなたの変更。
セクションには複数のスタイル オプションがあります。
- 表示オプション
- モバイルディスプレイ
- アラインメント
- 文字サイズ
- 間隔
- セクションの見出し
- 画像オプション
- シェイプマスク
- 画像ホバーオプション
- イメージボーダー
- カードオプション
- 影のオプション
- ボタンとリンク
表示オプション
- に選択します。 アイテムを表示 in 行と列 / カルーセル / ショーケース
- を選択した場合 行と列 オプションを選択すると、リスト項目が行と列に配置されます。 この場合、行数と列数を指定する必要があります。
- を選択した場合 カルーセル オプションを選択すると、リスト項目がスライドショーとして表示されます。 もっと知る.
-
Showcaseは、洗練されたインタラクティブなカルーセルスタイルのレイアウトで、画像をスムーズなトランジションとエフェクトで1枚ずつ表示します。このレイアウトは、サイトにモダンで没入感のある体験をもたらします。詳細はこちらをご覧ください。
- をセットする 列の数 画像一覧です。 1 ～ 10 列から選択できます。
- 特定します 列間のスペース リスト項目の。
- 特定します 行間のスペース リスト項目の。
ステップ 1 でカルーセル オプションを選択した場合、次の追加オプションが表示されます。
- スムーズ スクロールを有効にする: カルーセル内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスが実現します。
- 自動スライド: ユーザーの操作なしでスライドを自動的に回転させます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生の遅延: 自動再生が有効になっている場合、各スライドの切り替え間の時間間隔を設定します。
- カルーセルループ: スライドの連続ループを有効にして、最後のスライドの後にカルーセルがシームレスに再開されるようにします。
- カルーセル コントロール：を選択 ナビゲーションコントロールコントロールなし、矢印（中央下/右上/右下）、シェブロン、ドット、水平スクロールから選択できます。
- フェードエッジ: カルーセルの端に微妙なフェード効果を適用します。画像がビューに出入りするときに画像をソフトにブレンドすることで、ユーザー エクスペリエンスが向上します。
ステップ 1 で Showcase オプションを選択した場合は、次の追加オプションが表示されます。
- 効果： フェード、フリップ、カード、カバーフロー (傾斜)、またはカバーフロー (フラット) の 5 つのアニメーション効果から選択して、画像の遷移を制御します。
- スムーズスクロールを有効にする: ショーケース内のアイテムを連続的にスクロールできるため、シームレスで視覚的に魅力的なエクスペリエンスを実現できます。
- 自動スライド: ユーザー入力なしで画像を自動的に切り替えます。
- 自動再生の進行状況を表示: 自動再生がアクティブな間、視認性を高めるために進行状況インジケーターを表示します。
- 自動再生遅延: 自動再生が有効な場合のスライド間の時間を設定します。1秒から10秒までの任意の値を選択できます。
- カルーセルループ: これを有効にすると、カルーセルが無限にループし、連続再生が可能になります。
- カルーセルコントロール: カルーセル コントロール設定では、矢印 (中央下、右上、右下)、ドット、コントロールなしなどのオプションを使用して、ユーザーがスライド間を移動する方法を選択できます。
モバイルディスプレイ
- の数を設定します グリッド列 モバイルデバイス向け。 最大 3 列まで設定できます。
- 定義 間隔 グリッド間 (ピクセル単位)。
アラインメント
- 整列 画像を水平に セクション内で、左揃え、右揃え、中央揃えに設定できます。
- 整列 テキストを水平に セクション内で、左揃え、右揃え、中央揃えに設定できます。
- 整列 コンテンツを縦方向に表示 セクション内で、上揃え、中央揃え、下揃えに設定できます。
- 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
文字サイズ
- 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。
- をセットする Title セクションのリスト項目のフォント スタイル。
- をセットする サブタイトル セクションのリスト項目のフォント スタイル。
- デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
- このオプションを有効にすると 数字をアニメーション化する に存在する Title (NAIST) と サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。
間隔
- 特定します 画像の幅 リストアイテム用。
- 特定します コンテンツの幅 リストアイテム用。
- 特定します セクション見出しの下のスペース ピクセルで。
- 特定します 画像の下のスペース リスト項目の (%)。
- 特定します タイトルの下のスペース リスト項目の (%)。
- 特定します 字幕の下のスペース リスト項目の (%)。
セクションの見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
- をセットする 見出しの幅 セクション タイトルの表示幅を定義します。最小値は 50% です。
画像
- 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
- リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.
角丸半径フィールドを使用すると、リストアイテムの画像にさまざまな形状を作成できます。ここで500ピクセルを指定すると、画像は円形に表示されます。
- 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。
シェイプマスク
- シェイプマスク: このトグルを有効にすると、ロゴセクションの画像にシェイプマスクが適用されます。有効にすると、選択したシェイプが画像に視覚的にクリップされ、その形状に収まります。
- 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイリングできます。
- ストレッチ： このオプションを有効にすると、選択した図形が画像コンテナに収まるように引き伸ばされます。これにより、図形が利用可能なスペースを均等に埋め尽くし、さまざまな画面サイズでの視覚的な配置が向上します。
画像ホバー
- 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度各アイテムのアクセントカラーを以下から指定できます。 アイテムを編集 パネル。
- を選択した場合 色を指定 オプションを設定してから オーバーレイの色と不透明度.
- をセットする オーバーレイテキストの色 ホバーすると表示されます。
- に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
- 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときに表示されます。
- 許可する場合は選択してください 画像の遷移 ホバーしているかどうか。
- ドロップダウンリストから トランジションスタイル ホバー遷移用。使用可能なオプションはフェードと反転です。
イメージボーダー
- 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
- を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
- 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
- まず 境界線の色 カラーピッカーから。
- 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
- を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。
カード
- 方法を参照してください カードの管理に。
Shadow
- ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
- 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS. - プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。
ボタンとリンク
- 方法を参照してください のスタイリングを管理する ボタンとリンク。
- Save すべてのスタイルが変わります。
