GemPagesのカルーセルドットは、デフォルトではスライダーの下の中央に配置されます。ただし、レイアウトやデザインスタイルによっては、ドットを左側に揃えたい場合もあるでしょう。
この記事では、コーディングの知識がなくても、シンプルなカスタムCSSコードを使ってGemPagesのカルーセルドットを左揃えにする方法をご紹介します。
カルーセルドットを左揃えにする理由とは？
左揃えのカルーセルドットは、特定のレイアウトにおいて、デザインの一貫性とユーザーエクスペリエンスの両方を向上させるのに役立ちます。
一般的な使用例をいくつか示します。
1. 左揃えのコンテンツレイアウトに合わせる
見出し、テキスト、ボタンが左揃えになっている場合、中央揃えのドットは視覚的に不自然に見えることがあります。ドットを左揃えにすることで、よりすっきりとしたバランスの取れたレイアウトになります。
2. モダンでミニマルなデザインを作成する
現代のウェブサイトデザインの多くは、よりプロフェッショナルで編集記事のような外観を実現するために、左揃えのナビゲーション要素を採用しています。
3. モバイルレイアウトの間隔を改善する
モバイル端末では、左揃えのドットの方が積み重ねられたコンテンツによく合い、不自然な間隔を避けることができる場合があります。
カルーセルドットを左揃えにする方法
ステップ1：カルーセル要素を選択します
GemPagesエディター内で、ドットを左揃えにしたい場所にあるカルーセル要素をクリックします。
ステップ2：カスタムコードパネルを開く
カルーセル要素を右クリックして、 カスタムコード.
カスタムコードパネルが表示されます。
ステップ3：CSSコードを追加する
「カスタムコード」フィールドに以下のCSSコードを追加してください。
.gL5w7OAVEa .gp-carousel-dot-container { justify-content: start !important; }
注意： 交換する .gL5w7OAVEa 実際のカルーセル要素IDを使用してください。 要素IDは、カスタムコードパネルの上部に表示されます。
例：
.YOUR_ELEMENT_ID .gp-carousel-dot-container { justify-content: start !important; }
これにより、選択した特定のカルーセル要素にのみカスタムスタイルが適用されることが保証されます。
コメントしてくださってありがとうございます