スペーサーブロック

ブロック一覧へ戻る

2つのブロックの間にスペースを確保したい場合は、スペーサーブロックを使用します。 

以下の動画では、スペーサーブロックの使い方と、それを編集するためのさまざまな設定を紹介しています。

スペーサーブロックを追加するには、「ブロックの追加」アイコンをクリックします。

また、新しい段落ブロックの中で /spacer と入力して Enter キーを押すと、すぐに追加することができます。

ブロック追加の詳しい方法はこちらをご覧ください。

ブロックツールバー

ブロックツールバーを表示するには、ブロックをクリックするとツールバーが表示されます。

すべてのブロックには、独自のツールバーアイコンとブロック固有のユーザーコントロールが用意されており、エディター上でブロックを操作することができます。

スペーサーブロックには3つのボタンが表示されます。

  • 変換
  • 移動ハンドル
  • 追加オプション

変換:

「変換:」ボタンをクリックすると、スペーサーブロックを「カラム」または「グループ」に変換することができます。グループ」であれば、周りの背景色を変更點せたり、パディングを追加したりできます。

移動ハンドル

上下の矢印アイコンは、ドキュメントの中でブロックを上下に移動させることができます。

エディター内でのブロックの移動方法については、こちらをご覧ください。

ブロック設定

スペーサーブロック設定パネル

すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディタのサイドバーにも特定のオプションがあります。 サイドバーが表示されていない場合は、「公開」ボタンの隣にある歯車アイコンをクリックしてください。

スペーサー設定

このタブでは、追加するスペースの高さ (ピクセル単位) を調整することができます。数値を入力するか、上下の矢印をクリックして、それぞれ高さを大きくしたり小さくしたりすることができます。

「高度な設定」セクションではブロックに HTML アンカーや CSS クラスを追加できます。

高度な設定

「高度な設定」タブでは、ブロックに HTML アンカーや CSS クラスを追加することができます。

HTML アンカーを使うと、その特定の画像に対して「ページジャンプ」を行うことができます。ページジャンプは、アンカーリンクとも呼ばれることがありますが、リンクをクリックすると、長いページのさらに上か下のどこかに素早く移動できることです。

これを有効化するには、画像の中に HTML アンカーを入れ、そのアンカーにジャンプするリンクを作ります。

「詳細」タブでは、ブロックに CSS クラスを追加することもでき、カスタム CSS を記述してブロックを自由にスタイリングすることができます。

Changelog

  • Updated 2020-09-28
    • Updated 5.5 screenshots
    • Updated the block toolbar
    • Updated the block settings
  • Created 2019-03-07

原文

この記事は役に立ちましたか ? どうすればさらに改善できますか ?