使い方の基本2:ブロックを追加する

ブロックをマウスでつかんでページに持ってくる

空っぽのページはこうなってます。

「サイト全体の」とついているところは、サイトの全部のページに反映されます。

ついていないところは、そのページだけを編集できます。この画像だと、メインエリアとページフッターエリアです。

ここに、ブロックを置いていきます。

ブロックはここに入ってます。ツールバーの左上にある+ボタンを押すと出てきます。

好きなブロックをマウスで引きずってきます。

ブロックを入れられる場所に来ると、その場所が太い線になります。太い線になっているときにマウスを離します。

離すと編集画面になります。これは「記事ブロック」の編集画面です。WordPressみたいに記事を書けます。

こんどは画像ブロックを持ってきて、マウスを離してみます。

すると画像ブロックの編集画面になります。

画像を選択して、他は必要に応じて選択したり入力したりしてから、右下の「新規」ボタンを押します。

編集画面が閉じられて、ページに画像が表示されます。

ブロックは見栄えも編集できる

編集が終わったブロックを、もう一度クリックすると再編集ができます。

出てきたメニューで項目を選びます。

「ブロック編集」は、さっきと同じように編集ができます。

「デザイン&ブロックテンプレート」は、ブロックの見栄えの設定ができます。

ブロックに余白をつけたり、色をつけたり、見た目を変えたいときは、デザイン&ブロックテンプレートを選択します。

デザイン&ブロックテンプレートを選択すると、ツールバーが出てきて、編集ができるようになります。

左の「ブロックテンプレート」は、ブロックによって(ページによって、エリアによって?)デフォルト以外のものがあったりなかったりします。

歯車アイコンの中の「カスタムクラス」は、ブロックによって(ページによって、エリアによって?)空欄だったり何かが入ってたりします。

歯車アイコンを押すと、ウインドウが出てきます。

一番上のカスタムクラスの欄は、空欄になっていてもクリックすると選択肢があらわれることがあります。いちおうクリックして確かめます。

この画像ブロックにはカスタムクラスがあり、画像を少し傾けたり、画像を丸くしたりできます。

カスタムクラスの「image-right-tilt」を選択すると、画像を少し傾けることができます。

この説明画像にも「image-right-tilt」を設定してみました。

わかりやすいように背景に色をつけてみました。色を付けるときは画像アイコンのボタンを押します。

各ボタンはマウスを乗せると説明文が出るので、だいたいのことはわかると思います。

カスタムクラスの「image-circle」を選択すると、画像を楕円に切り抜いて表示することができます。説明画像にも設定してみました。

こちらもわかりやすいように背景に色をつけてみました。

でもこの「image-circle」は不思議なことに、背景色の設定だけでは色がつかず、枠線も設定したら背景色が表示されました。

どうしてそうなるのか理由がわからないのですが(私の環境だけで起こっているという可能性もあるし)、時間がもったいないので理由は調べてません。

こちらはカスタムクラスを選択せず、空欄のままにしました。

今度はブロックテンプレートを見てみます。

こちらも、デフォルト以外のものがあるかもしれないので、いちおうクリックして確かめます。

オートナビのブロックテンプレートは、デフォルトの他に、パンくずリスト用の「パンくず」、スマホで見たときにハンバーガーメニューになる「レスポンシブヘッダーナビゲーション」があります。

ブロックは動かせる

いったん置いたブロックを、あとから別の場所に移動することもできます。

ブロックの上にマウスを持っていくと、右上に十字キーがあらわれるので、それをつかんで動かします。