スマホサイズのデザイン設定方法
スマホサイズのデザイン設定方法
基本的な編集はPCサイズでしますが、タブレットサイズ、スマホサイズとそれぞれのデバイスに合わせて調整ができます。
また、グローバルスタイリングのテキスト設定でも簡易的にPCサイズとスマホサイズの調整が可能です。
スマホサイズ編集
モバイルエディターでは、デスクトップ用に作成したコンテンツをもとに、スマートフォンでの見え方を調整できます。
モバイルエディターを開くと、編集画面の右側に、モバイル表示を設定するためのボタンが表示されます。
既存のコンテンツを編集する
モバイルエディターには、デスクトップ用に作成したコンテンツが表示されます。
編集したいコンテナにマウスポインターを重ねると、左側に設定メニューが表示されます。ここでは、次の操作ができます。
- コンテナを編集する： コンテナの設定を変更します。
- 表示・非表示を切り替える： デスクトップとモバイルそれぞれで、コンテナを表示するかどうかを設定します。
- ストレッチ： コンテンツの表示幅を広げます。
- カラムの順序を逆にする： モバイルで縦に並ぶカラムの順番を反転し、先頭のカラムを最後に表示します。
注： 歯車アイコンから設定を変更すると、デスクトップ表示にも変更が適用されます。
モバイル専用のコンテンツを追加する
モバイル表示にだけ表示するコンテンツを追加できます。
左側のウィジェットパネルを開き、追加したいウィジェットを配置します。追加したウィジェットの横には、モバイル専用であることを示す小さなモバイルアイコンが表示されます。このコンテンツは、デスクトップ表示には表示されません。
たとえば、既存のウィジェットの間に、モバイル用の説明文を追加できます。
モバイルヘッダーのレイアウト
モバイル編集画面の右側にある「モバイルヘッダーレイアウト」をクリックすると、設定パネルが開きます。
メニューの表示形式は、次の3種類から選択できます。
- ベーシック
- ミラー
- サークルドック
メニューを開いたときの表示スタイル（プレビューで確認できます）
訪問者がメニューボタンをタップしたときの表示方法を選択できます。
サイドナビゲーション（デフォルト）
画面の横からスライドして開くパネルに、メニューを表示します。
オーバーレイメニュー（ドック風）
画面全体を覆う形で、メニューを表示します。
オーバーレイメニューにウィジェットを追加する
「オーバーレイメニュー（ドック風）」では、メニュー内にウィジェットを追加して、自由にデザインできます。
- メニュースタイルで「オーバーレイメニュー（ドック風）」を選択します。
- モバイル編集画面の右上に表示される「オーバーレイメニュー領域」をクリックします。
- 空のコンテナが表示されるので、通常のページや列を編集するときと同じように、ウィジェットを追加してデザインします。
- 編集が完了したら保存します。
訪問者がモバイルのメニューボタンをタップすると、作成したメニューが表示されます。
注： 「オーバーレイメニュー領域」は、「オーバーレイメニュー（ドック風）」を選択した場合にのみ使用できます。
サークルドック
サークルドックは、アプリのように画面下部にボタンを配置するメニュー形式です。訪問者は、テキストのメニュー項目の代わりにボタンを使って操作できます。
画面右上のメニュー表示設定で「サークルドック」を選択すると、「左のアクション」と「右のアクション」が表示されます。
アクションの追加
- アクションを設定したい側（左または右）を選択します。
- ボタンに表示するアイコンを選択します。
- 必要に応じてテキストを入力します。
- ボタンのリンク先を設定します。
以下が追加したアクションです。
注: 中央にはメインメニューアイコンがあり、クリックすると「上記」で作成したメニューが開きます
ヒント： メニューを追加アクションの右側または左側のどちらかに表示したい場合は、追加アクションをすべて同じ側に追加してください。つまり右側か左側です。
ページビルダー一覧
ブロックの表示設定（見る人・日時・国などで表示を切り替える）
更新日 04/10/2026
ありがとうございます