全てのブロックで使える特別なオプション

STORK SEでは、各ブロックで使用できる特別なオプションを追加しています。

これらのオプションを使用することで、ブロックにアニメーション効果を追加したり、PCやスマートフォンなどの画面ごとに表示を切り替えることができます。

STORK SEのブロックオプション

これらのブロックオプションは、標準ブロックとカスタムブロック(STORK BLOCKS)で使用できます。

ブロックアニメーション設定

ブロックにアニメーションを設定することで、フェードインなどのスクロールアニメーションと一緒にコンテンツを表示できるようになります。

ブロックアニメーションの使い方

ブロックごとにアニメーションを設定することで、ページスクロールに合わせてフェードイン表示できます。

アニメーションを設定している様子

STORK EDITOR

BLOCK ANIMATION

fadeInRight
fadeInDown
fadeInLeft

スクロールに連動したアニメーションなので、ページを読み進めるのに合わせて動きを出すことができます。

ブロック表示設定

ブロックをPCやスマートフォンなど、画面幅ごとに表示・非表示を切り替えることができます。

ブロック表示設定の使い方

画面サイズによってブロックの表示切り替えができるので、PCでは表示してスマートフォンでは表示しない、逆にスマートフォンで表示してPCでは表示しないといったことができます。

※画面はSTORK19のものです。

「すべての端末で表示」以外を設定したブロックは、(選択していない状態の場合)エディタ上では薄く表示されます。

実際に見てみましょう

DISPLAY FOR PC / TABLET

このブロックは、PCまたはタブレットの画面サイズで表示されます。

ブラウザウィンドウのサイズが767px以下の場合は非表示になります。

DISPLAY FOR MOBILE

このブロックは、スマートフォンの画面サイズで表示されます。

ブラウザウィンドウのサイズが768px以上の場合は非表示になります。

PCとスマートフォンで異なるブロックを表示する場合は、PC表示用とスマホ表示用の2つのブロックを作って、それぞれに対してオプションを設定します。

ブロック上下余白の設定

ブロックの上下の余白(マージン)を設定できます。

上下の表示設定

ブロック上下の余白設定の使い方

ブロックの上、またはブロックの下のスペースを広げたり狭めたりできるため、レイアウトの調整に活用できます。

このオプションは、ブロックツールバーから設定することもできます。

それぞれの値で設定できる余白(マージン)は以下の通りになります。

  • 0 … マージンなし
  • SS … デフォルトマージンの半分
  • S … デフォルトマージン
  • M … デフォルトマージンの2倍
  • L … デフォルトマージンの3倍

デフォルトマージンは、行間とマージンの調節の「段落下のマージン」で設定している値が反映されます。