モバイル端末での閲覧にウェブサイトを最適化する方法

さらに、モバイルデバイス用にブロック間のパディングサイズを変更したり、異なるデバイスでブロックの可視性を調整したり、Zero Block エディターを使って独自のアダプティブバージョンを構築したり、ウェブサイトのアダプティビティをオフにしたりすることもできます。

この設定は、特定のタイプのデバイスでどのブロックを表示できるか、または表示できないかを決定します。この機能は、どのブロックの設定でも調整できます。

なぜ必要なのか、どのように機能するのか

ブロックがデスクトップではよく見えるが、モバイルではあまりよく見えない場合、ブロックの可視性を980px以上に設定するとよいでしょう。こうすることで、ブロックはデスクトップ向けになり、モバイル端末では表示されなくなります。

次に、このブロックをコピーし、設定を調整（画像やフォントサイズの変更など）してモバイルでの表示に最適化する必要があります。ブロックの可視性を "0-980px "に設定します。モバイル版のブロックが表示されます。

そのため、PCからウェブサイトにアクセスした人にはデスクトップ版が、モバイルユーザーにはモバイル版が表示されます。

ブロックの可視性（パラメータの異なる値）は、必要に応じて解像度を選択することで、特定のデバイス向けにブロックの見た目を調整できるように便利です。例えば、あるブロックがタブレットや特定の携帯電話では見栄えが良くない場合などです。

見ての通り、携帯電話では写真がトリミングされ、あまりよく見えない。

ブロックの可視性を"> 980px "に設定する。これで、モバイルユーザーには表示されなくなります。

ブロックをコピーする。

モバイル版用にブロックを調整する-写真とテキストの配置を変更する。

このブロックのvisibilityを"≦980px "に設定すると、980pxより広い画面のデバイスでは表示されなくなる。

完了！これで、画面の幅によって、さまざまなデバイスで異なる表紙が表示されるようになりました。

どのブロックでも、設定を開き、"top padding "と "bottom padding "オプションの横のアイコンをクリックし、モバイル・デバイス用のスペーシングを設定する。

これを行うには、ブロックの「設定」ボタンをクリックし、「タイポグラフィ」タブを見つけます。このタブで、フィールドの横にあるコンピュータのアイコンをクリックします。

同じ順序で、行間を変更することができます。

半径またはパディングを変更するには、「設定」ボタンをクリックし、対応するフィールドを見つけます。フィールドの横にあるコンピュータのアイコンをクリックし、新しいフィールドに新しい値を入力します。

ブロックが変換されたら、手動で5つのバージョンの画面幅に合わせて見た目を調整することができます。Zero Block 適応性の設定については、「Zero Block：カスタムブロックの作成方法」と「Zero Block：レスポンシブ・デザイン」記事