アイテムリスト

GemPages のアイテムリスト要素とは何ですか?

アイテムリスト要素を使用すると、各アイテムをアイコンで囲んだリスト形式で情報を表示できます。視覚的な一貫性を保つために、GemPagesのアイコンライブラリからアイコンを選択できます。カスタムアイコンや画像が必要な場合は、 高度なリスト要素 を代わりにお使いください。

この要素は次の場合に最適です。

• 製品の特徴を強調する
• 特典やサービスポイントを記載する
• ステップバイステップのプロセスの説明
• コンパクトで読みやすいコンテンツの作成

ページにアイテムリスト要素を追加する方法

ページにアイテム リスト要素を追加するには、次の手順に従ってください。

ステップ1：  あなたから GemPagesダッシュボード編集したいページを選択し、エディターで開きます。

ステップ2：  エディター内で、左側のサイドバーのコンテンツ リスト セクションに移動する、または検索バーで「アイテム リスト」を検索します。

ステップ3： アイテムリスト要素をページ上の任意の場所にドラッグアンドドロップします。.

アイテム要素の設定を構成する

要素がページ上に表示されたら、クリックします。左側のサイドバーに2つのメインタブが表示されます。 設定 の三脚と 高機能:

[設定]タブ

1. アイテム管理

このセクションでは、リスト項目を追加、削除、または並べ替えることができます。

• アイテムを追加する: 既存のアイテムの上にマウスを移動し、「複製」アイコンをクリックすると、正確なコピーが作成されます。
• アイテムを削除する: 削除したいアイテムのゴミ箱アイコンをクリックして確認します。
• アイテムの並べ替え: 移動したいアイテムの上にマウスを移動し、 マウスをクリックして押し続けますをタップし、その後、 上または下にドラッグします リスト内の位置を変更するには、マウスボタンを離します。項目が希望の順序になったらマウスボタンを離します。

2.アイコン

• アイコンの種類: アイテムリスト内の各アイテムのアイコンの種類。 2 つのアイコン タイプ オプション:

一致するアイコン: アイテム リスト内のすべてのアイコンは同じになります。

異なるアイコン: アイテム リスト内の各アイテムには個別のアイコンがあります。

• アイコンソース: 表示アイコンを選択

アイコン タイプ = 一致するアイコンの場合: アイテム リスト内のすべてのアイコンは同じになります。

アイコン タイプ = 異なるアイコンの場合: アイテム リスト内の各アイテムには個別のアイコンがあります。

ユーザーは各項目のアイコンを手動で選択します。

• アイコンサイズ: アイコンの希望サイズを入力してくださいデフォルトのアイコンサイズは16ピクセルです。

• アイコンの色: パレットからアイコンの色を選択するか、ボックスに色の16進コードを入力します。.

• 役職リスト内の各項目のテキストに対するアイコンの位置。位置のオプションは「上揃え」と「中央揃え」の2つがあります。

• パディング: アイコンのコンテナ内のスペースを調整します。アイコンがコンテナの端にどれだけ近づくかを制御します。パディングを増やすとアイコンの周囲に余裕が生まれ、減らすとぴったりと収まります。

• 経歴: アイコンの後ろに背景を追加します。

色： 単色またはグラデーションの背景色を選択します。

イメージ： アイコンの背後に表示される画像をアップロードします。

• ボーダー: アイコンのコンテナの周囲に枠線を追加します。設定できる項目は以下のとおりです。

境界線のスタイル（実線、破線、点線）

境界線の太さ（ピクセル単位）

ボーダの色

• コーナー: 境界線の半径を設定して、アイコンのコンテナーの角の丸みを調整します。

3. テキストスタイル

この時点で、テキストのタイポグラフィを編集することができます。利用可能なオプションは次のとおりです。

• スタイル: 6 つの見出しスタイルと 3 つの段落スタイルを含む定義済みのオプションから、希望のスタイルを選択します。
• フォント: テキストに使用するフォントを選択します。リストにないフォントを使用する場合は、 エディター バージョン 7 でカスタム フォントを追加する方法.
• サイズ: ピクセル単位で値を指定してフォントサイズを調整します。
• 色圏: テキストの色を好みに合わせて変更します。

「もっと見る」ボタンをクリックすると、さらにカスタマイズ オプションが表示されます。

• フォントの太さ: ドロップダウン メニューから希望のフォント ウェイトを選択します。
• 行の高さ: パーセンテージ値を指定してテキストの高さを調整します。
• 文字間隔: ピクセル単位で値を入力して文字間の間隔を変更します。
• テキスト変換: テキストを次のいずれかの方法で変換します: 変換を適用しない、大文字、小文字、大文字にする。

4. アイテムの間隔

スライダーを使用して、リスト項目間の垂直間隔を調整します。

デフォルト: 12px。

5. アイテムスタイル

アイコンとテキストのギャップ – アイコンとテキスト間の水平方向のスペースを制御します。

デフォルト: 8px。

6。 背景

• 色圏: カラーピッカーをクリックして、単色またはグラデーションカラーの背景を選択します。
  
• 画像: デバイスから背景画像をアップロードします。推奨サイズはデザインレイアウトによって異なります。

7。 サイズ

• 幅（Width）: 数値 (px) を入力するか、以下を選択します。

コンテンツに合わせる: 幅をコンテンツのサイズに合わせます。

フル: コンテナの全幅まで拡大します。

• パディング: コンテンツと要素の境界線の間の内部間隔を調整します。
• 整える： 要素全体を左、中央、または右に揃えます。

8。 シェイプ

• ボーダー: 境界線を追加し、スタイル (実線、破線、点線) を選択し、太さや色を設定します。
• コーナー: 半径値を設定して角を丸めます (例: わずかに丸める場合は 5px、完全に丸める場合は 50px)。
  
• Shadow: 深みを出すために影の効果を追加し、ぼかし、広がり、色を調整します。

• 幅 = 100% の場合、配置は固定され、変更できません。
  
• それ以外の場合、デフォルトの配置は左ですが、必要に応じて中央または右に切り替えることができます。

詳細タブ

より高度なカスタマイズを行うには、「詳細設定」タブに進みます。ここでは以下の操作が可能です。

• 独自のスタイル設定のためにカスタム CSS を追加します。
• デバイス タイプごとに可視性を制御します。
• アニメーションとインタラクション効果を適用します。

詳しい手順については、 詳細設定 記事。