ブロックの基本

ブロックエディターの基本として「ブロック」があります。主な特徴は次のとおり。

  • いろいろなブロックがある
  • ブロック単位で編集・削除ができる
  • ブロック単位でスタイルや設定ができる
  • ブロックの並びを簡単に変更できる

文章では分かりにくいので動画にしました。簡単なブロックの作り方やブロック編集の特徴が分かると思います。

動画で見る

拡大ボタンで全画面で動画を見れます。音声はありません。

2分10秒

ブロックとは

動画の様に記事の部品としてブロックを作成し、ブロックを移動などをして見た目を整えていきます。

カラムブロックや横並び・縦並びなどブロックが入れ子状態のものもあります。子供のブロック遊びのブロックの様にブロック単位で組み合わせていく編集の手法になります。

良く使うブロック

ブロックにはいろいろな種類がありますが、全てのブロックが必要ではありません。ここでは、頻度の高いよく使うブロックを紹介します。

段落

段落は、文字(テキスト)を入力します。文字単位の色の指定等は出来ません。必ず段落単位となります。

見出し

「見出し」は、ページ内の見出しを指定します。通常H1はサイト名でH2から順に小さくなるように見出しを設定します。

リストビューのアウトラインを使うと見出しの構成を確認することが出来ます。

検索エンジンの対策として見出しは大きい順で並ぶようにします。

リスト

リスト(ドット)サンプル

  • リスト項目1
  • リスト項目2
    シフト+リターンで項目のテキストを追加可能
  • リスト項目3

リスト(番号)サンプル

  1. リスト項目1
  2. リスト項目2
    シフト+リターンで項目のテキストを追加可能
  3. リスト項目3

「リスト」は項目で表したい時に使います。スタイルとしてドットと番号があります。スタイルなどを変更する事で様々なリストが作成可能です。

テーブル

テーブルサンプル

データセルデータセル
データセルデータセル
キャンプションテキスト

表を入れたい時にテーブルを使います。表の装飾やスタイルの指定の幅が少ないので、シンプルな表に向いています。

セルの連結など表計算ソフトの様に指定できないので、より高機能なテーブルのプラグインなどを使うと良いです。

画像

画像サンプル

画像のキャンプションテキスト

画像を挿入する場合に使います。通常は、wordpress側やテーマで適当にサイズ調整します。

ギャラリー

ギャラリーサンプル

ギャラリーは複数の画像をまとめて表示します。


YouTube埋め込み

YouTube埋め込みサンプル

ボタン

問い合わせやページの移動などを分かりやすくする為にボタンを使います。


カラム

カラムサンプル

カラム1

カラム2

カラム3

複数のブロックを列に分けて表示する場合に使用します。列単位で幅を指定できるので、画面全体のレイアウトなどにも使用されます。

複数の組み合わせや入れ子をうまく活用する事で、意外なレイアウトを作る事が出来ます。


グループ

グループサンプル

ブロック1

ブロック2

ブロック3

複数のブロックをひとつにまとめます。スタイルなど一度に設定したり、並び順を変更するのが便利になります。


横並び

横並びサンプル

横並び

横並び

複数のブロックを横に並べます。画像と文字を一行にするなどに向いています。


縦積み

縦積みサンプル

縦積み

縦積み

複数のブロックを縦に並べます。


スペーサー

スペーサーサンプル

スペーサーの前のブロック

スペーサーの後のブロック

ブロックの間に空白部分を作るスペーサーで高さを指定して空白部分の大きさを指定できます。


カスタムHTML

カスタムHTMLサンプル

カスタムHTMLのサンプル

カスタムHTMLのHTMLコード

<p>カスタムHTMLのサンプル</p>

直接HTMLを記述する事が出来るブロックです。用意されたブロックで表現できない事などを実現するのに使用します。

※HTMLに詳しくない場合は、必要ないです。

色の指定方法

プリセットカラーで指定

テーマのプリセットカラーから指定する場合

テーマのプリセットカラーを選択する

色のリセット

色をデフォルト状態に戻す場合は、「クリア」を食リンクします。

カラーチャートで指定

選択色のボックスをクリックしてカラーチャートからカーソルを動かして色を指定する

カラーコードで指定

選択色のボックスをクリック

カラーチャート下の色指定のボックスをクリック

カラーコードを入力

カラーコードについて

色を指定する場合、カラーコードは、HEX形式(ヘックス形式)となります。

HEXとは「Hexadecimal」の略で、ウェブデザインやグラフィックデザインなどで使用される16進数で表されるカラーコードです。16進数は0から9までの数字とAからFまでのアルファベットの合計16種類の文字で表現されます。

例えば、#FF0000は赤色を表します