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