ヘルプセンター
ウェブサイトのモバイル版を調整する
さまざまなデバイスでのページ表示をさらに設定する方法
Tilda スマートフォン、タブレット、ノートパソコン、デスクトップパソコンなど、さまざまなデバイスに合わせてウェブサイトを自動的に最適化します。必要に応じて、標準ブロックのモバイル版を柔軟に設定したり、Zero Block を使用して独自のレスポンシブ版ウェブサイトを作成したりすることができます。
Tilda で、ウェブサイトのモバイル版を設定する方法について詳しく解説したガイドをご覧ください。
Tilda で、ウェブサイトのモバイル版を設定する方法について詳しく解説したガイドをご覧ください。
モバイル版編集モード
標準ブロックを追加して設定したら、さらにそのモバイル版を編集することができます。これを行うには、ページエディタパネルの中央にあるモバイル端末のアイコンをクリックします。
ドロップダウンメニューから、必要な画面サイズを選択してください。特定の端末でページがどのように表示されるかを確認したい場合は、「デバイス」セクションでその端末、または最も近いオプションを選択してください。
ドロップダウンメニューから、必要な画面サイズを選択してください。特定の端末でページがどのように表示されるかを確認したい場合は、「デバイス」セクションでその端末、または最も近いオプションを選択してください。
エディタがモバイルモードに切り替わり、ブロックの編集がしやすくなります。
重要：エディタでブロック表示に切り替えても、デザインしたウェブサイトの完全なプレビューとはなりません。このモードでは、アニメーションは動作せず、一部のブロックは公開後のページとは異なる表示になる場合があります。公開後のウェブサイトの表示を確認するには、「プレビュー」をクリックしてください。
プレビューモード
プレビューモードで、モバイルデバイスのアイコンをクリックし、必要な画面サイズを選択してください。
重要：プレビューモードではブロックの設定を編集することはできません。このモードは、ページの表示を確認するためのみに使用されます。
エディタ画面を非表示にするには、左下隅にある、または「編集画面に戻る」の横にある矢印アイコンをクリックしてください。
プレビューの拡大率を変更するには、100%のアイコンをクリックし、ドロップダウンメニューから必要な値を選択してください。
鉛筆アイコンをクリックしてエディタに戻り、ブロックの内容を変更してください。
モバイル版の設定の編集
各ブロックには、モバイル版用に個別の余白やタイポグラフィの設定が用意されています。ブロックによっては、モバイル端末での個々の要素に対する追加設定が利用できる場合もあります。これらの設定は通常、設定パネル内にヒントとして表示されています。
たとえば、メニューブロックには、このための個別の設定タブが用意されている場合があります。
たとえば、メニューブロックには、このための個別の設定タブが用意されている場合があります。
カバーブロックでは、モバイル版の設定が携帯電話のアイコンで表示される場合があります。
モバイル端末用の個別の設定を開くには、該当する入力欄の横にあるデスクトップアイコンをクリックしてください。スマートフォンのアイコンが付いた追加の入力欄が表示されます。
モバイル端末向けのフォントサイズと行間の変更。ブロック設定で「タイポグラフィ」セクションを開き、デスクトップアイコンをクリックして、モバイル端末のアイコンが付いたフィールドにモバイル版用のフォントサイズを入力します。
行間も同様の方法で設定します。
行間も同様の方法で設定します。
モバイル端末でのカバー画像の角の丸みとパディングを変更する。 「カバー」および「画像」カテゴリのブロックでは、モバイル端末向けに個別の角の丸みやパディングの値を設定できます。
角の丸みやパディングを変更するには、「設定」をクリックし、該当するフィールドを探します。次に、フィールドの横にあるデスクトップアイコンをクリックし、モバイル版用の値を入力します。
角の丸みやパディングを変更するには、「設定」をクリックし、該当するフィールドを探します。次に、フィールドの横にあるデスクトップアイコンをクリックし、モバイル版用の値を入力します。
背景画像の位置を変更する。 カバーブロックや、この設定が利用可能なその他のブロックでは、ブロック内に表示される画像の範囲を選択できます。
自動配置を設定するには、ドロップダウンメニューから適切な値（例：Center Center）を選択してください。
自動配置を設定するには、ドロップダウンメニューから適切な値（例：Center Center）を選択してください。
位置を手動で設定するには、フィールドの横にあるアイコンをクリックしてください。
位置決めポイントが示された画像が表示されます。あらかじめ用意されているポイントから1つを選択するか、必要な場所に独自のポイントを配置することができます。
位置指定を行うことで、モバイル版での背景画像の表示方法を調整し、同じ画像でもさまざまな画面で見栄えが良くなるようにします。
モバイル端末向けのパディングの設定
任意のブロックで設定を開き、「上部の余白」または「下部の余白」フィールドの横にあるアイコンをクリックし、モバイル端末用の値を入力してください。
各種デバイスにおける表示範囲
スマートフォンとデスクトップPCで異なるブロックを表示したい場合は、表示範囲を設定してください。
ブロック設定を開き、画面を下にスクロールして「デバイスごとのブロック表示」オプションまで移動します。ブロックを表示するデバイスを指定します。その後、設定を保存してページを再公開してください。
ブロック設定を開き、画面を下にスクロールして「デバイスごとのブロック表示」オプションまで移動します。ブロックを表示するデバイスを指定します。その後、設定を保存してページを再公開してください。
レスポンシブデザインの設定をZero Block
ブロック設定のオプションを使用して、ブロックをZero Block に変換することで、デバイスごとにブロックのレスポンシブ表示を設定できます。このオプションは現在、ほとんどのブロックで利用可能です。
ブロックをZero Block に変換すると、コンテンツとデザインはデフォルト設定にリセットされます。テキストや画像は、そのブロックに再度追加する必要があります。
変換後、5つの画面幅の範囲ごとにブロックの外観を手動で設定したり、独自の範囲を追加したりできるようになります。Zero Block でのレスポンシブデザインの設定方法については、「Zero Block ：カスタムブロックの作成方法」および「Zero Block ：レスポンシブデザイン」の記事をご覧ください。
ページのレスポンシブ表示を無効にする
レスポンシブ表示を無効にすると、モバイル端末向けのページはデスクトップ版と同じ表示になります。
レスポンシブ表示を無効にするには、「ページ設定」→「その他」に移動し、「モバイル表示を無効にする」チェックボックスを選択してから、ページを再公開してください。
レスポンシブ表示を無効にするには、「ページ設定」→「その他」に移動し、「モバイル表示を無効にする」チェックボックスを選択してから、ページを再公開してください。
