モバイルでのみテキストを変更する方法

モバイルとデスクトップで異なるテキストを使用する理由

モバイル ユーザーとデスクトップ ユーザーは、Web サイトの操作方法が異なります。テキスト バージョンを別々に用意すると便利なシナリオをいくつか紹介します。

• モバイルでの簡潔なメッセージ: モバイル画面は小さいため、テキストを短くすると読みやすさとユーザーエクスペリエンスが向上します。
• モバイル専用プロモーション: アプリのダウンロードやモバイル限定の割引など、一部のオファーや CTA (Call-to-Actions) はモバイル ユーザー限定の場合があります。
• 最適化されたフォーマット: モバイルでは一部のテキストが不自然に折り返される可能性があるため、より合理化されたバージョンが必要になります。

GemPages でモバイルのみのテキストを変更するにはどうすればいいですか?

GemPages エディターにアクセスしたら、次の手順に従ってモバイル デバイスでのみテキストを変更します。

ステップ1: 対象のテキスト要素を選択する

モバイル向けに修正したいテキストを指定します。 見出し要素 （例：ページタイトル、セクションヘッダー）または テキストブロック要素 (例: 段落テキスト、説明)。

ステップ2: テキスト要素を複製する

GemPagesには組み込みの モバイル専用のテキスト編集 関数では、同じテキストの 2 つのバージョンを作成するという簡単な回避策を使用します。

要素を複製する方法:

• 右クリックする テキスト要素を選択して 重複ファイル、または
• ショートカットを使用する Ctrlキー+ C （コピー）と Ctrlキー+ V （ペースト）。

さて、あなたは見るでしょう 2つの同一のテキスト要素1 つはデスクトップ ユーザー用、もう 1 つはモバイル ユーザー用です。

ステップ3: 元のテキストをデスクトップとタブレットのみで表示するように設定する

• 以下を行うには、 元のテキスト要素 (モバイルでは表示したくないもの)。
• に移動します 高機能 右側のサイドバーのタブをクリックして、 表示オン 設定を行います。
• デフォルトでは、GemPages の要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。 モバイルオプションを無効にする このテキストをデスクトップとタブレットのビューでのみ表示するように設定します。

さて、このテキストのバージョンは モバイル デバイスでサイトにアクセスしたときに表示されます。

ステップ4: 複製したテキストをモバイルのみで表示するように設定する

• 以下を行うには、 重複したテキスト要素 (これはモバイル固有のテキストになります)。
• に移動します 高機能 右側のサイドバーのタブをクリックして、 表示オン 設定を行います。
• デスクトップとタブレットのオプションを無効にする このテキストをモバイル ビューでのみ表示するように設定します。

デスクトップビューエディタではこのテキストは非表示になります。 モバイルプレビューモード 重複したテキストを確認します。

ステップ5: モバイルユーザー向けにテキストを編集する

次に、モバイルプレビューエディタで、 設定 タブをクリックして、モバイルユーザー向けのテキストをカスタマイズできます。以下のことが可能です。
✔ 長い段落を短くする 読みやすさを向上させるために。
✔ モバイル専用のCTAを使用する 「ここをクリック」ではなく「ここをタップ」など。
✔ 重要な情報を強調する モバイルユーザーがすぐに確認する必要があるもの。

また、この要素内のコンテンツの一部を簡単に編集したり変更したい場合は、対象のテキストをハイライトして ライブテキストエディタ.