見本ページ

普段使いするであろうブロックを利用したサンプルを掲載します。
このページをご覧いただければ「こんな事が出来るのか」と言うイメージが付くかと思います。

H2見出し（ブロック名：見出し）

文章はテキストブロックを利用します。
ブロック名は「段落」です。
通常の改行は「shift + enter」で行い、段落を変えたい時は「Enter」で段落を変えます。

段落ブロックは、カーソルを合わせた時に表示されるサブメニューや、右端に表示されるパネルから装飾を行うことができます。

右端パネルの「色」でブロック単体の色を変えることができます。

テキストの一部分だけ色を変えたい時は右端パネルの「テキストの色」で変更ができます。
テキストカラー変更でこんなにカラフルにすることも出来ますし、一部分だけ背景色を付けることも出来ます。

テキストを太字にしたり、下線を引いたり、打消し線を引いたりすることもできます。

H3見出し

リスト表示も簡単です。
ブロック名：リスト

「Enter」で次の行になり、「Enter」を二回押せばリストブロックを終了させれます。
同じ行内で改行したい時は、ここでも「Shift + Enter」です。

リストにofficeデータへのリンクを貼る

財団様HPでは、多くのofficeデータへのリンクがあります。
下のサンプルの様にリストにリンクを貼ると見やすいと思います。
アイコンは勝手に付与されます。

• あああああああああああ
• いいいいいいいいいいいいいい
• うううううううう
• ええええええ
  ええええええ
  ええええええ
• おおおおおおおおおおおおおお

数字リストも可能です。

1. あああああああああああ
2. いいいいいいいいいいいいいい
3. うううううううう
4. ええええええええええええええええええ
5. おおおおおおおおおおおおおお

リスト内のインデントも可能です。

1. あああああああああああ
   • いいいいいいいいいいいいいい
   • うううううううう
2. ええええええええええええええええええ
3. おおおおおおおおおおおおおお

ブロックを「グループ化」すればまとめて背景色をつけれます

複数のブロックを選択した状態でサブメニュー内の「オプション → グループ化」を行えば、グループ全体の背景色を付けることができます。
目立たせたい告知部分をグループ化し、薄く背景を敷けば目立つと思います。

グループブロックの下に（グループ外に）新しくブロックを追加するのが面倒くさいと言う事に今さら気が付きました。
どこか違う所にブロックを追加し、グループブロック下部に矢印ボタンで移動させるのが一番簡単な方法かもしれません…。

表の作成

表の作成は「クラシック版の段落」を使用します。
こちら、昔のWordPressのビジュアルエディタと言われるエディタをブロック化した物なのですが、表を作成するときは、このブロックの表機能を使うのが一番簡単だと思います。

ヘッダーセルにすれば背景色が付きテキストも太字になります。
他、エディタのサブメニューからセンタリング、文字色変更、リンク貼りなどを行えます。

列の幅も設定できますが「％」で設定を行って下さい。
ピクセルで大きい値を入れるとスマホ閲覧時に画面からはみ出してしまいます。

また、情報量が多い表は、スマホで見ると横が潰れた状態で表示されてしまいます。
その時はHTMLでひと手間かける必要があるので、逆引き仕様書8ページを参考に作業を行うか、WEB開発者までご連絡ください。

Google Mapの埋め込み

簡単にGoogleMapを埋め込むことも出来ます。
仕様ブロック名は「Map」です。
施設名や住所をフォームに入れるだけで自動的に地図が貼られます。
右端パネルで、ズーム、縦サイズを指定できます。
縦サイズを高くし過ぎるとスマホで画面マルマル地図になってしまうので、高くても400pxが限界かなと思います。

ブロックを横並びにしたい

ブロックを横並びにすることも簡単です。
情報量が少ないブロックなどを横に並べると見やすいと思います。
スマホでは縦に並びますので、縦になった時に上に表示させたいブロックを左に配置すれば良いと思います。

横に写真の説明を書いたりすれば見やすいと思います。
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

ああああああああああああ

ああああああああああああああああああああああああああああああああああ
あああああああああああああああ

３カラムにして画像を張れば写真ギャラリーにも利用できます。
画像のリンク設定で「メディアファイル」を選択すると、クリックで拡大表示がされるようになります。

ブロックとブロックの間隔を開けたい

ブロックとブロックの間を空けたい時は「スペーサー」を利用します。
スペーサーブロックを選択するとグレーの領域が出来るので、高さを設定してください。
スマホを考えると40pxほどが限界かなと思います。

下部に100px開けてみます。

見出しブロックの上にスペースを空けるとメリハリがついて見やすいページになると思います。

ボタンブロックで目立つリンクを作る

あああああああああああ
いいいいいいいいいいいいいい
うううううううう
ええええええ

この様にテキストにリンクを貼っても良いですが、重要度が高い資料を見てもらいたい時は「ボタン」ブロックを使うと効果的です。
右端パネルの「色」でボタン色を変えれます。

その他

Youtubeは段落ブロックにURLを貼るだけで埋め込みが出来ます。

開閉式のアコーディオンブロックも使用できます。
が、正直使い勝手は悪いです…。
ブロック名：accordion

普段使うであろうブロックは以上となります。