テキストセクション

テキストセクションは、テキストを列形式で表示したい場合に使用します。テキストセクションをページに追加することで、ウェブサイト内の異なるページ間のリンクを簡単に作成したり、リンクとその説明を追加したりできます。

リスト アイテムをこのセクションに追加すると、指定した設定とスタイルが適用されます。 このセクションは、チーム、販売するさまざまな製品、および他の多くの目的を紹介するのに役立ちます.


ここで扱われる内容:

  1. テキストセクションとは何ですか?
  2. テキストセクションを追加する
  3. リスト項目の追加と編集
  4. シーケンス リスト アイテム
  5. リスト項目の削除
  6. セクション レイアウトの変更
  7. 要素の管理
  8. スタイルオプション
  9. カルーセル スタイル
  10. 実例

テキストセクション

  • 画像なしでテキストを追加したり、テキストにリンクを追加したりする場合は、テキストセクションを追加できます。

テキストセクションを追加する

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

  •  今すぐ セクションカテゴリ 左パネル
  • 選択する コンテンツ (1)オプションをクリックし、 テキスト タブ (2) から選択できます さまざまなレイアウト とします。

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

お願い

  1. からセクション幅を管理できます。 セクション設定 とからのコンテンツの幅 コンテンツ スタイル.
  2. タイトル、サブタイトル、および説明は短く鮮明にします。
  3. 説明フィールドで、 Enter 改行を与えるボタンと Shiftキー+ Enterキー ボタンをクリックして、次の行から開始します。


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

リスト アイテムを追加

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

  • 以下を行うには、 コンテンツを編集する(1) ボタンをクリックして、リスト アイテム パネルを開きます。

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


リスト アイテムの編集

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

  • 加える Title (1)、字幕 (2)、および説明 (3) リスト アイテムの。
  • 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
    説明を追加する前に確認してください この 記事。

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

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

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

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

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

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

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

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

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


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


配列表項目

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

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

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

  • 以下を行うには、 削除 リスト項目の横にあるアイコン。
  • 以下を行うには、 削除 確認ポップアップのボタン。
  • Save 変更。

お願い

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


セクション レイアウト

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する レイアウト (2) タブ。
  • 任意のレイアウトを選択して Save (3) お客様の変更。


テキストセクションの要素の管理

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

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

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

セクションのオプション

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

アイテムオプション

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


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

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する 形式 (2) タブ。
  • リスト項目のスタイルを変更し、 Save (3) お客様の変更。


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

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

表示オプション

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

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

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


モバイルディスプレイ

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

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


アラインメント

  • コンテンツの配置: テキスト リスト内のコンテンツを水平に揃えます。左揃え、右揃え、または中央揃えに設定できます。


文字サイズ

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


間隔

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


セクションの見出し

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


カードオプション


影のオプション

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

お願い

スタイル設定は、セクション内のすべてのアイテムに適用されます。 リスト項目ごとに個別に変更することはできません。


ボタンとリンク


カルーセル スタイル

カルーセル スタイルでは、リスト アイテムがスライドショーとして表示されます。つまり、リスト アイテムは次々と循環します。

カルーセル スタイルの仕組みをご覧ください。 


テキスト リスト アイテムをカードとして表示する

  • するとき ショーカード テキスト リストの上に、リスト アイテムの背景に、 設計 のセクションから無料でダウンロードできます。
    参照: ウェブサイトの色と間隔。

ご覧ください: 


ライブ テキスト リストは次のとおりです。 

ライブ デモ サイトを表示します。 


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

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

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