マーキー要素

マーキー要素とは何ですか?

マーキー要素 他の要素を含む行に水平スクロールのような効果を作成するために使用されます。

Marquee 要素の主な機能は、次の目的で使用できます。

• プロモーションと特別オファーのハイライト: 電子商取引のウェブサイトでは、マーキー要素を使用して、特別なプロモーション、割引、期間限定のオファーを強調している場合があります。スクロール効果により、これらのオファーに注目が集まり、サイトを訪問するユーザーの目に留まりやすくなります。
• ディスプレイブランドパートナーシップ: 電子商取引サイトでは、Marquee 要素を使用してパートナー ロゴのスクロール リストを表示している場合があります。これにより、関連ブランドを紹介してサイトの信頼性を高め、認識しやすいロゴを通じてユーザーとの信頼関係を構築できます。
• スクロールする顧客の声: マーキー要素は、スクロールする顧客レビューを強調するためにも使用できます。この動的な表示により、肯定的なフィードバックを強調し、満足した顧客体験を紹介することでサイトの信頼性を高めることができます。
• 行動喚起を表示する: 場合によっては、eコマース サイトがスクロール CTA を表示するために Marquee 要素を使用していることがあります。これにより、「今すぐサインアップ」や「詳細を確認」などの重要なアクションにユーザーの注意を引き、明確で目立つプロンプトを通じてエンゲージメントを促し、コンバージョン率を向上させることができます。

GemPages v7でマーキー要素を追加する方法

ステップ 1： GemPages エディター V7 検索バーでマーキー要素を見つけます。

ステップ 2: 要素を目的の領域にドラッグ アンド ドロップします。

以下の点にご注意ください。

• マーキー内に任意の要素を追加できます 以下は除く: タブ、アコーディオン、お問い合わせフォーム、製品、ヒーローバナー、製品リスト、記事リスト、カルーセル。
• それ以上置かないでください 20ページあたりXNUMX個のマーキー パフォーマンスの問題を防ぐためです。
• 接続速度が遅い場合、大きな画像の読み込みが完了した後にマーキーのサイズが調整されることがあります。

設定タブを構成する

アイテム管理 

アイテム管理セクションでは、次の操作を実行できます。

• アイテムの並べ替え: ドラッグして並べ替えます。
• アイテムの複製: 既存のアイテムを複製します。
• アイテムの削除: 不要なアイテムを削除します。
• アイテムの追加: 新しいマーキー アイテムを作成します。

アイテム間隔

スライダーを使用してアイテム間のギャップを調整します (デフォルト: 60 ピクセル)。

アイテムスタイル

1. 最大幅: マーキー内の単一アイテムの最大幅 — マーキー内のすべてのアイテムは同じ最大幅を共有します。

デフォルトの最大幅の値は「コンテンツに合わせる」です。つまり、各マーキー項目の幅は、その中のコンテンツに自動的に適合します。

幅のオプションは 3 つあります。

• コンテンツに合わせる: アイテムの幅 = 内部のコンテンツの幅。
• アイテム数に基づきます: アイテムの幅 = マーキーの幅 / アイテムの数。
• カスタム: 固定最大幅を設定: ユーザーは必要な幅の値をピクセル単位で手動で入力できます。

2.背景： 背景色または画像を適用します。

3. 境界線、角、影： 各アイテムの形状と深さをカスタマイズします。

セパレータ

視覚的に区別しやすくするために、項目間のセパレーターのオン/オフを切り替えます。

マーキー効果

• 方向: スクロール方向 (左または右) を設定します。
• ホバー時に停止: ユーザーがホバーしたときにアニメーションを一時停止します。
• 速度: スクロール速度を調整します。

サイズ

• 幅： マーキーの幅を調整します。デフォルトの幅は100%です。つまり、マーキーは画面の幅に合わせて自動的にサイズ変更されます。
• 高さ： マーキーの高さを調整します。デフォルトの高さは「自動」に設定されており、マーキーはコンテンツに合わせて自動的にサイズ調整されます。
• パディング： 各項目内の境界線からコンテンツまでのスペースを調整します。

経歴

色： マーキーに背景色を適用します。

形状

境界線、角、影を設定します。

整列

• 幅が 100% の場合、配置は無効になります。
• そうでない場合、デフォルトの配置オプションは中央揃えになります。

詳細タブを設定する

参照する この記事 マーキー要素の [詳細設定] タブを構成する詳細な手順については、こちらをご覧ください。

に表示

マーキー要素が表示されるデバイスを決定できます。 デスクトップ, タブレット, モバイル各オプションを切り替えるだけで、特定のデバイスで要素を表示または非表示にすることができます。

間隔（ピクセル）

を調整する マージン and パディング ビジュアル ボックス モデルを使用した Marquee 要素の周囲の値:

• 外側の価値観 （上、右、下、左）を制御します マージン （要素の外側のスペース）
• 内なる価値観 制御する パディング （要素のコンテナ内のスペース）
• クリック リンクアイコン 中央をクリックして値を同期/リンク解除します。

形状

シェイプセクションでは、次のことができます。

• 要素に境界線を追加し、さまざまなスタイル (実線、破線、点線) から選択します。
• 角の半径をカスタマイズします。四角形、丸形、丸い角から選択します。
• 影を有効にすると、要素が背景から目立つようになります。

役職

マーキーをセクション内でどのように配置するか、または他の要素に対してどのように配置するかを変更します。

• 静的
• 相対
• 絶対の
• スティッキー
• 一定

不透明度

要素の透明度レベルを調整します。

• 100% = 完全に見える
• 0% = 完全に透明

スライダーまたは入力ボックスを使って、表示レベルを微調整します。要素を重ねたり、微妙な視覚効果を作成したりするときに便利です。

アニメーション

このオプションを有効にすると、マーキー要素にエントランスアニメーションまたはホバーアニメーションを追加できます。有効にすると、以下のオプションでアニメーションの動作をカスタマイズできます。

• 表示時/ホバー時: 要素が画面に表示されたときにアニメーションをトリガーするか、ユーザーが要素の上にマウスを移動したときにアニメーションをトリガーするかを選択します。
• アニメーションの種類: いくつかのアニメーションスタイルから選択できます: なし、フェード、スライド、ズーム、シェイク
• その２：シャフトスピード（回転数）： スライダーを使ってアニメーションの速度を調整します。右に動かすとアニメーションの再生速度が速くなります。
• もっと見せる： 追加のアニメーション効果（利用可能な場合）にアクセスするには、このボタンをクリックします。
• プレビュー： プレビュー ボタンを使用して、アニメーションがエディター内でどのように見えるかを直接テストします。
• ディレイ： アニメーション開始までの遅延時間（秒数）を設定します。複数の要素にアニメーションをずらして表示したい場合に便利です。
• イージング: アニメーションが時間の経過とともにどのように進行するかを選択します。使用可能なオプションは次のとおりです: イーズインアウト、イーズイン、イーズアウト、リニア
• プレビュー： クリック プレビュー ボタンをクリックして、エディタ内でアニメーションを即座にテストします。

過度に使用するとパフォーマンスに影響を及ぼし、ユーザーの注意をそらす可能性があります。

相互作用

コーディングなしで、マーキー要素のカスタム動作を作成できます。クリック 創造する インタラクション設定パネルを開きます。

以下を設定します:

• トリガー： インタラクションの開始時刻を選択します – 要素をクリック or ホバー要素。
• アクション： ページ上のターゲット要素を選択し、何が起こるかを定義します。 テキストスタイルを変更する, コンテンツを変更する, 表示/非表示、 or スクロールする.

CSSクラス

要素に独自のスタイルルールを適用するには、カスタムCSSクラス名（スペース区切り）を入力します。これは、テーマ内またはGemPagesグローバルスタイル内でカスタムCSSを使用して高度なスタイルを追加したい場合に便利です。

マーキーエレメ​​ントに関するよくある質問

1. マーキーのスクロール速度がデバイス間で異なるのはなぜですか?

特定のネットワークでは、画像の多いアイテムの読み込みが遅い場合、速度差が生じることがあります。すべての画像の読み込みが完了すると、スクロール効果は安定します。これを回避するには、大きな画像を最適化するか圧縮してください。

2. マーキー要素によってページの速度が低下することはありますか?

はい、同じページにアイテムを追加しすぎたり、複数のマーキー要素をネストしたりする場合は可能です。パフォーマンスとスムーズなアニメーションを維持するために、ページあたりのマーキー要素の数は20個未満にすることをお勧めします。

3. 読み込み後にマーキーのサイズが変更されるのはなぜですか?

これは、アイテムに大きな画像が含まれており、アニメーション開始後に読み込みが完了する場合に発生します。画像が完全に読み込まれると、要素はサイズを再計算します。圧縮画像を使用するか、アイテムの幅を固定することで、ずれを最小限に抑えることができます。

4. マウスをホバーするのではなくクリックするとマーキーが一時停止するようにできますか?

組み込みの「ホバー時に停止」オプションは、ホバー時にのみ一時停止します。クリック時に一時停止する動作が必要な場合は、Interactions を使って表示/非表示を切り替えるか、アニメーションなしのバージョンに切り替えることでシミュレートできます。

5. GemPages v7 で垂直マーキーを作成できますか?

現在、GemPages v7のMarquee要素は以下をサポートしています。 横スクロールのみ （左から右または右から左）。縦スクロールマーキー（上から下または下から上）は ネイティブではサポートされていません.

同様の視覚効果を作成したい場合は、詳細な手順についてサポート チームにお問い合わせください。

6. マーキー要素に影を追加するにはどうすればよいですか?

• エディター内のマーキー要素をクリックします。
• に行きます 設定 タブには何も表示されないことに注意してください。
• Video Cloud Studioで 形状 のセクションから無料でダウンロードできます。
• 有効にする Shadow必要に応じて、影の種類、色、ぼかし、距離、サイズを調整します。