❓ Q:PC表示/スマホ表示でそれぞれ個別のテキスト内容を出し分けたいのですが、一方の表示で変更したテキストがもう一方にも反映され、個別に編集できません。
👉 A:PC用・スマホ用のパーツをそれぞれ作成し、表示設定を変更することで個別の編集が可能です。
AIエディターではPC表示/スマホ表示切替を用いて、デバイスごとに表示する情報やページ構造を反映（=出し分ける）ことが可能です。
しかし初期設定の場合、テキスト内容はPC表示/スマホ表示のどちらかで編集するともう一方も反映されてしまい、デバイスごとに情報を編集できません。
この記事では、PC表示/スマホ表示で異なるテキスト内容を反映するための、パーツ作成・設定変更の手順を説明しています。
❶ PC表示/スマホ表示切替の編集について
エディター画面のトップメニューにある、PCとスマホのアイコンをクリックすることで、エディター領域をPC表示、スマホ表示に切り替えることができます。これによりPC表示/スマホ表示とデバイスに合わせたページの編集が可能です。
パーツのサイズやフォント設定は、表示切替により画面に最適化された大きさに調整されます。
また編集する項目によっては、PC/スマホへの変更が引き継がれる場合と引き継がれない場合がございます。
特にテキスト内容については、どちらかの表示で変更を行うと、連動して反映されてしまうためご注意ください。
| 項目 | PC→スマホ | スマホ→PC |
|---|---|---|
| テキストスタイル以外のデザイン設定 | ×引き継がれない | ×引き継がれない |
| テキストスタイル | ○引き継がれる（共通） | ○引き継がれる（共通） |
| テキスト内容 | ○引き継がれる（共通） | ○引き継がれる（共通） |
❷ PC表示/スマホ表示で異なる内容のテキストの反映方法
PC表示/スマホ表示で異なるテキスト内容を反映させたい場合は、PC用・スマホ用のパーツをそれぞれ作成し、表示設定を変更します。
1⃣ PC用・スマホ用のパーツをそれぞれ作成する
ここではメインエリアのメッセージを、PC表示では「人にやさしく、つながるデジタルを」、スマホ表示では「誰もがデジタルを使ってカスタマーエクスペリエンスを最大化できる未来へ」と出し分ける場合を想定します。
2⃣ デバイス別の表示設定にチェックを入れる
デフォルトの設定では、PC/スマホどちらのデバイスでも表示される状態となっているため、表示設定を変更します。
まずはPC表示の設定を変更します。
エディター画面がPC表示に切り替えられていることを確認し（①）、PCで表示させるパーツを選択、画面右側・デザインタブの表示から「モバイル」のチェックボックスを外します（②）。
次にスマホ表示の設定を変更します。
トップメニューのアイコンからスマホ表示に切り替え（①）、スマホで表示させるパーツを選択、画面右側・デザインタブの表示から、「PC」のチェックボックスを外します（②）。
以上の設定を変更することで、PCとスマホで異なるテキスト内容を編集することができ、デバイスごとに情報を出し分けることも可能です。
- PC表示
- スマホ表示
場合によってはデザインが表示に最適化されていないこともございますので、適宜調整を行ってください。