メインコンテンツにスキップ

セクションの幅のサイズ変更

フル幅、狭い幅、カスタム幅オプションから選択して、ページ上のセクションの表示幅を制御できます。

セクションの幅のサイズ変更

フル幅、狭い幅、カスタム幅オプションから選択して、ページ上のセクションの表示幅を制御できます。
​

ウェディングウェブサイトのほとんどのセクションはページの全幅にわたります。しかし時には、もっと狭く、焦点を絞ったものが欲しい場合もあります。そんなときに幅オプションが役立ちます。
​

セクション幅でできること

セクションを狭くしてよりまとまりのある外観にできます。
​

端から端までコンテンツを表示したい場合はセクションをフル幅のままにできます。
​

デザインスタイルに合わせられます。 異なる幅は異なる雰囲気を作り出します。
​

特定のコンテンツに注目を集められます(狭くすることで)。
​

セクションの幅を変更する

  1. メインナビゲーションのウェブサイトに移動します

  2. 幅を変更したいセクションにマウスを合わせます

  3. 増加矢印(右)をクリックしてセクションを広げるか、減少矢印(左)をクリックして狭めます

  4. 幅は自動的に保存されます

幅のオプション

セクションの矢印で次の幅を切り替えられます。
​

フル幅: セクションがページ全体に広がります。
​

3/4幅: フル幅よりわずかに狭く、両側に少し余白があります。
​

1/2幅: ページ幅の半分。並べたセクションに最適です。
​

1/3幅: 読みやすい快適な幅。テキストに最適です。
​

1/4幅: かなりコンパクト。セクションをより焦点を絞った感じにします。
​

異なる幅を使うタイミング

フル幅は次のものに最適です。
- 画像セクション
- 区切り線
- 端から端まで伸ばしたい背景色
- ページ上部のヒーローセクション
​

中程度または狭い幅は次のものに最適です。
- 段落やテキストブロック
- 見出し
- ボタン
- フォーム(出欠回答など)
- あまり広く伸ばされていない方が読みやすいコンテンツ
​

幅を使うヒント

テキストは狭い方が読みやすいです。 非常に幅広い行のテキストは目で追うのが難しいです。テキストが多い場合は中程度または狭い幅を選びましょう。
​

画像はフル幅で使えます。 特に大きく美しい写真に向いています。
​

一貫性を保ちましょう。 ある段落セクションを中程度の幅にした場合、まとまりのある見た目のためにすべてを中程度の幅にすることを検討しましょう。
​

異なるデバイスでプレビューしましょう。 幅の設定はスマートフォンとコンピュータで異なって見える場合があります。
​

テーマが影響します。 各テーマは幅を少し異なって処理します。テーマに最適な見た目を試して見つけましょう。
​

他の設定と組み合わせる

幅は他のセクション設定とうまく連携します。
​

上下の余白は狭いセクションのバランスを取るのに役立ちます。
​

背景色は異なる幅で異なって見えます。
​

配置(左、中央、右)は選んだ幅内でコンテンツの配置に影響します。
​

幅は小さな詳細ですが、サイトの印象に大きな違いを生みます。
​

関連記事

こちらの回答で解決しましたか?