セクションブロックの余白をPCとスマートフォンで別々の値を設定する方法

セクションブロックの余白をPCとスマートフォンで別々の値を設定する方法

ブロック
中級者向け
セクションブロック
yStandard Blocks

セクションブロックの余白はPCとスマートフォンで別々の余白を設定できるようになっています。

「PCでは大きく余白をとりたいけど、スマートフォンでは少し小さめに調整したいなぁ…」というときなどに便利な設定です。

PCとスマートフォンで別々の余白を設定する方法について紹介します。

PCとスマートフォンで別々の余白を設定する

yStandard BlocksのセクションブロックではPC・スマートフォンでそれぞれ別々の余白を設定できるようになっています。

画面サイズごとに余白の大きさを変えるのは中級者〜上級者向け設定のため、初期状態では設定欄が隠れています。

PC・スマートフォンの余白設定欄を表示させるために、余白の入力欄右上の歯車アイコンをクリックします。

PC・スマートフォンの余白設定欄が表示されるので、それぞれ入力します。

入力された値の間で画面サイズによって余白の大きさが変わる仕様になっています。

上の入力欄(PCアイコン横)は余白の最大値、下の入力欄(スマートフォンアイコン横)は余白の最小値となります。

「参考値」の部分にスマートフォン・タブレット・PCでそれぞれ余白がどれくらいになるかの値が表示されます。(単位はpx)

注意点

PC・スマートフォンの余白設定には次のような注意点があります。

  • Internet Explorerではこの機能は動作しません(PC設定の余白に固定されます)
  • PC・スマートフォンの余白設定欄に極端に離れた数字や極端に近い数字を入力すると余白の計算が正常にできなくなる場合があります