ブロックエディター80問ドリル

問題

下記の 段落ブロック 内の文字を、あなたの好きな食べ物の名前に書き換えよう！

方法

1. 色のついたエリアにカーソルを入れる。
2. 全選択してdelete
3. 新しい文章を書く

完成例

チョコレート

問題

下記の 段落ブロック を２つに分けよう！

方法

1. ★の前にカーソルを入れる
2. Enterキーを押す

完成例

ひとつめ

★ふたつめ

問題

下記の 段落ブロック の中で改行しよう。

方法

1. ★の部分にカーソルを入れる
2. Shiftキーを押しながら、Enterキーを押す

完成例

１行目
★２行目
★３行目

問題

下記の段落ブロック内の「太字」を太字にしよう。

方法

1. 「太字」の文字を選択状態にする
2. すぐ上に出てきたブロックツールバーの「B」を押す

完成例

太字のところだけ、太字にしてね。

問題

下記の段落ブロック内の「取り消し線」に取り消し線をつけよう。

方法

1. 「取り消し線」の文字を選択状態にする
2. すぐ上に出てきたツールバーの「🔽（下向き矢印）」を押し、メニューをドロップダウンさせる
3. 「取り消し線」を押す

完成例

「取り消し線」してみてください。

問題

段落ブロック内の「connpassのページ」に、下記のリンクを貼ろう

https://gutenlovers.connpass.com/event/190879/

方法

1. リンクをコピー
2. 「connpassのページ」の文字を選択
3. リンクボタンを押す
4. 「検索またはURLを入力」に、リンクをペースト
5. 送信（submit）ボタンを押す

完成例

詳しい開催概要は「connpassのページ」をご覧ください。

問題

段落ブロック全体を中央揃えにしよう！

方法

1. 段落ブロックにカーソルを入れる
2. 「テキストの配置を変更」ボタンをクリック
3. 「テキスト中央寄せ」をクリック

完成例

中央揃え
なんかいい感じになる予感

問題

段落ブロックの文字のサイズを「特大」にしてみよう

方法

1. 段落ブロックにカーソルを入れる
2. サイドバーの「タイポグラフィ」の「プリセットサイズ」をドロップダウンさせる
3. 「特大」ボタンをクリック

※ サイドバーが表示されていない場合は、「設定」ボタン（歯車マーク）で表示する。

完成例

特大特大特大特大特大特大特大特大特大特選特大特大特大

問題

段落ブロックの文字の色を変更してみよう

方法

1. 段落ブロックにカーソルを入れる
2. サイドバーの「色設定」をクリックしてドロップダウンさせる
3. 「文字色」で好きな色を選ぼう。

※ 「カスタムカラー」をクリックすると、カラーピッカーから色を選べます

完成例

文字の色を変更します

問題

文字色を元の色に戻します。

方法

1. 段落ブロックにカーソルを入れる
2. サイドバーの「色設定」をクリックしてドロップダウンさせる
3. 「文字色」の「クリア」ボタンをおそう

完成例

文字の色を戻します

問題

「元に戻す」「やり直す」操作をしてみましょう。

方法

1. 演習の「★」を削除する
2. エディター左上の「元に戻す」「やり直す」ボタンを押してみる
3. ショートカットを使ってみる
   • Mac：⌘+Z、↑⌘+Z
   • Win：Ctrl+Z、Shift+Ctrl+Z

完成例

（なし）

問題

ブロックを複製して、同じブロックを作ってみましょう。

方法

1. ブロックツールバーの「詳細設定[︙]」ボタンを押す
2. 「複製」ボタンを押す
   （１つめの複製）
3. ショートカットを実行する
   （２つめの複製）
   • Mac：↑+⌘+D
   • Win：Ctrl+Shift+D

完成例

問題

ブロックをコピーして、少し離れた場所にペーストしてみよう。

方法

1. 「１：コピー元ブロック」にカーソルを入れる
2. コピーする
   • マウス操作の場合
     • ブロックツールバーの「詳細設定[︙]」をクリック
     • 「コピー」ボタンをクリック
   • ショートカットの場合
     • Mac：⌘+C
     • Win：Ctrl+C
3. ショートカットでペーストする
   1. Mac：⌘+V
   2. Win：Ctrl+V

完成例

問題

ブロックを削除してみよう！

方法

1. 演習の「１：ボタンで削除する」
   1. カーソルを入れる
   2. ブロックツールバー「︙」
   3. 「ブロックを削除」ボタンを押す
2. 演習の「２：Deleteキーで削除する」
   1. 先頭（”２”の左にカーソルを入れる）
   2. Deleteキーを押す
3. ※こちらはやらなくてもOKです
   演習の「（参考）３：ショートカットで削除する」
   1. カーソルを入れる
   2. escキーを押す
   3. ショートカットを実行する
      • Mac：Ctrl+Option+Z
        （半角英数モード）
      • Win：Shift+Alt+Z

完成例

（なし）

問題

新しい段落ブロックをEnterキーで増やしましょう。

方法

1. 下の「演習」の「★」の右にカーソルを入れます
2. Enterキーを５回押します

→ 新しい段落ブロックが５つできます

完成例

問題

エディター内に出現する「ブロックの追加」からブロックを足してみましょう。

方法

1. 演習ブロックの中央あたりの上辺か下辺のあたり（図参照）にマウスを近づけて、「ブロックの追加」 ボタンを出現させます。
2. 「ブロックの追加」を押します。
3. （何でも良いですが、ここでは例として）「段落」ブロックのアイコンをクリックします。

完成例

問題

エディター左上にある「ブロックの追加」からブロック追加パネルを表示してブロックを追加しましょう。

方法

1. 演習ブロックにカーソルを入れる
2. エディター左上の「ブロックの追加」 ボタンを押す
3. エディター左に表示されたパネルから、「段落」ブロックを選択

完成例

問題

段落ブロックで、スラッシュ「/」キーを押すと、ブロックリストが表示されます。

さらに、「/画像」などと入力すると、リストが絞り込まれます。

この中からブロックを選択しましょう。

方法

1. 演習ブロックの「文章を入力または / でブロックを選択」と表示されたところに「/」を入力する
   → ブロックリストが表示される
2. 続けて「画像」と入力する
   → 画像に関連するブロックが絞り込まれて表示される
3. 「画像」ブロックを選択する

完成例

問題

ブロックツールバー内のボタンから挿入してみましょう。

方法

1. 演習ブロックにカーソルを入れる
2. ブロックツールバーの「詳細設定[︙]」ボタンを押す
3. 「前に挿入」ボタンを押す
   → 段落ブロックが挿入されます

完成例

問題

段落ブロックにマークダウンで記述してみましょう。

自動的に、対応しているブロックに変換されます。

（全てのマークダウンに対応しているわけではありません。

方法

1. 演習ブロックの指示に従い、マークダウンを入力する

完成例

問題

段落ブロックを見出しブロックに変換しましょう。

ブロックツールバーの一番左のアイコンで、ブロックタイプまたはスタイルを変更することができます。

方法

1. 演習ブロックにカーソルを入れる
2. ブロックツールバーの「段落」アイコンボタンを押す
3. 表示されたリストから、「見出しを選択する」

完成例

問題

複数の段落ブロックをリストブロックに変換しましょう。

方法

1. 「いちご」にカーソルを入れます。
2. Shiftキーを押しながら、「ぶどう」をクリックします。（３つの段落ブロックが選択された状態）
3. ブロックツールバーの「段落」アイコンをクリックして、表示されたメニューの中から「リストをクリックします」

完成例

問題

ブロックの「編集モード」と「選択モード」を切り替えてみましょう。

方法

ボタンで切り替える

1. 演習ブロックにカーソルを入れる
   （編集モード。ブロックツールバーが見えている）
2. ツールボタンを押して「選択」ボタンをクリック（青いフォーカスリングがブロックの周りに見える）

キーで切り替える

• 編集モードのとき
  → esc で選択モードに変更
• 選択モードのとき
  → Enterキーで編集モードに変更

完成例

問題

選択状態のブロックの、隣のブロックを選択しよう。

方法

1. 演習ブロック「最初に選択」にカーソルを入れる
2. escキーで選択モードにする
3. 「↓」キーで「次に選択」にフォーカスを移す

完成例

問題

連続して配置されている複数のブロックを選択しましょう。

Lv22のおさらいです！

方法

1. 演習ブロック「最初に選択」にカーソルを入れる
2. Shiftキーを押しながら
3. 「↓」キーで演習ブロック「最後に選択」まで移動

ポイント

「編集」モードのまま選択する。（選択モードだと複数選択できない？）

完成例

問題

マトリョーシカのように、外枠の中に違う物を入れることを「入れ子」と言ったりしますが、ブロックも入れ子にできます。

子ブロックにカーソルがある状態から、親ブロックを選択しましょう。

方法

1. 演習ブロック「子ブロック（段落）…」にカーソルを入れる
2. ブロックツールバーの「段落」アイコンの上にマウスを置く
3. 「親を選択」ボタンが表示されるので、クリック

完成例

問題

エディターの下に表示されている「ブロックパンくずリスト」。

自分（子ブロック）の親や、先祖が表示され、クリックすると選択できる優れものです。

これを使って、親ブロックを選択しましょう。

方法

1. 演習ブロック「子ブロック（段落）…」にカーソルを入れる
2. ブロックパンくずリストの「グループ」をクリックする

完成例

問題

トップツールバーの「ブロックナビゲーション」を使うと親ブロックと、兄弟関係にあるブロックがリストで表示されます。

これを使って、親ブロックを選択しましょう。

方法

1. 演習ブロック「子ブロック（段落）…」にカーソルを入れる
2. ブロックナビゲーションの「グループ」をクリックする

完成例

問題

「上に移動」「下に移動」ボタンを使って、ブロックを上下に動かしてみましょう。

方法

1. 演習ブロック「★ 移動させるブロック」にカーソルを入れる
2. ブロックナビゲーションの「移動ボタン」をクリックし、
   • 「A」と「B」の間に移動させましょう
   • 「C」と「D」の間に移動させましょう

完成例

問題

「上に移動」「下に移動」ボタンをドラッグ&ドロップして、ブロックを移動させましょう。

方法

1. 演習ブロック「★ 移動させるブロック」にカーソルを入れる
2. ブロックナビゲーションの「移動ボタン」をドラッグ&ドロップして「A」と「B」の間に移動させましょう

完成例

問題

ブロックツールバーの「詳細設定」の「移動」を使って、ブロックを任意の場所に移動させましょう。

方法

1. 演習ブロック「★ 移動させるブロック」にカーソルを入れる
2. ブロックツールバー ＞ 詳細設定 ＞移動をクリック
3. 「B」ブロックをクリック
   → 「A」と「B」の間に青いフォーカスのようなラインが表示されます。
4. Enterキーを押します

完成例

問題

文書を保存しましょう。（このドキュメントは既に「公開」されているので、「更新」ボタンを押します）

方法

• 方法１：エディター右上の「更新」ボタンを押します
• 方法2：ショートカットキー
  • Mac：⌘+S
  • Win：Ctrl+S

完成例

問題

スラッグ（パーマリンク）を変更場所がどこか確認しましょう！

※ 一度「下書き保存」か、「公開」をしないと設定できません。ご注意ください！

方法

1. 設定サイドバーの「文書」タブを開く
2. 「パーマリンク」の設定を開く
3. URLスラッグの入力欄で変更できる

完成例

問題

「固定ページを表示」から、フロントページを見よう。

方法

1. 設定サイドバーの「文書」タブを開く
2. 「パーマリンク」の設定を開く
3. 「固定ページを表示」をクリックする
   → 別タブで開きます

完成例

問題

アイキャッチ画像を設定してみよう！

方法

1. 設定サイドバーの「文書」タブを開く
2. 「アイキャッチ」の設定を開く
3. メディアライブラリから選択する

完成例

問題

エディター画面のまま、「タブレット」「モバイル」のプレビューを見てみよう！

方法

1. エディター右上の「プレビュー」タブを開く
2. 「タブレット」「モバイル」に切り替える
3. 「デスクトップ」に戻す

完成例

問題

ブロックを複数選択して、それらをグループにしよう。

方法

1. 演習ブロック「A」「B」「C」を複数選択
2. ブロックタイプの変換から「グループ」を選択する
3. グループブロックが親ブロックになったかどうか確認しよう！

完成例

問題

グループを解除しよう。

方法

1. 演習ブロック「A」「B」「C」の親ブロック（濃いオレンジ）を選択
2. ブロックツールバー ＞ 詳細設定 ＞ 「グループの解除」
3. パンくずなどで、親にグループがないか確認する。

完成例

問題

まずグループブロックを作って、その中に段落ブロックを作ろう。

方法

1. 演習ブロックの[　　　+　　　]ボタンを押す
2. 「段落」ブロックを選択する。

完成例

問題

ブロック追加パネルの「パターン」タブから好きなパターンを選んで配置してみよう。

方法

1. 演習ブロック「★」にカーソルを入れる
2. エディター左上、「ブロックの追加」ボタンでパネルを開く
3. パターンタブを開く
4. 好きなパターンを選んでクリックする

完成例

問題

ブロック追加パネルの「パターン」タブから好きなパターンを選んで配置して、中身を書き換えてみよう。

方法

1. 演習ブロック「★」にカーソルを入れる
2. エディター左上、「ブロックの追加」ボタンでパネルを開く
3. パターンタブを開く
4. 好きなパターンを選んでクリックする
5. テキストや色を変更する

完成例

問題

「メディアと文章」ブロックを追加しよう。

方法

1. 演習ブロック「★」にカーソルを入れる
2. 「★」を消す
3. 「/画像」と打つ
4. 「メディアと文章」を選択する。

完成例

問題

「メディアと文章」ブロックを追加して、設定・入力してみよう。

方法

演習ブロック「★」を消して、「メディアと文章」ブロックを配置する。

1. メディアエリアの、「メディアライブラリ」リンクから画像を選ぶ
2. 「コンテンツ…」のエリアに、文字を売ったり、好きなブロックを入れる。

完成例

あああ

問題

「メディアと文章」ブロックを追加して、コンテンツを変更してみよう。

方法

演習ブロック「★」を消して、Lv43で作成したブロックをコピペする。ブロックツールバーで下記の変更をしてみよう。

1. ブロックツールバーでメディアの位置を左から右へ変更してみよう。
2. 垂直位置を変更してみよう。
3. 画像を変更してみよう

完成例

あああ

問題

「メディアと文章」ブロックを追加して、設定を変更してみよう。

方法

演習ブロック「★」を消して、Lv44で作成したブロックをコピペする。設定サイドバーで下記の変更をしてみよう。

1. メディアと文章の設定で「カラム全体を塗りつぶすように画像を切り抜く」にチェック。
2. 「焦点ピッカー」で、画像の見せたい位置を決めよう

完成例

あああ

問題

「カバー」ブロックを追加し、画像の設定を行おう。

方法

1. 演習ブロック「★」にカーソルを入れる
2. 「★」を消す
3. 左上「ブロックの追加」ボタンからパネルを開く
4. ブロックカテゴリ「メディア」の中の「カバー」を選択する
5. メディアライブラリから、お好きな画像を設定しよう

完成例

問題

「カバー」ブロックにコンテンツを配置しよう。

方法

演習ブロック「★」を消して、Lv46で作成したブロックをコピペする。

1. 「タイトルを入力…」の部分に、適当な文字を入力
2. Enterキーを押して、新しい段落ブロックを作る
3. ブロック追加ボタンから、ボタンブロックを追加し、ボタンに適当な文字を入れる

完成例

問題

「カバー」ブロックの、ブロックツールバーの設定を変更してみよう。

方法

演習ブロック「★」を消して、Lv47で作成したブロックをコピペする。ブロックツールバーで下記の変更をしてみよう。

1. 「配置」を「全幅」に変更
2. 「コンテンツの位置」を「左中」に変更
3. 画像を変更してみよう

完成例

問題

「カバー」ブロックのサイドバーでの設定を変更してみよう。

方法

演習ブロック「★」を消して、Lv48で作成したブロックをコピペする。設定サイドバーで下記の変更をしてみよう。

1. 「焦点ピッカー」で、画像の見せたい位置を決めよう
2. 「オーバーレイ（画像に重ねる色）」をお好みのグラデーションに変更しよう
3. 「グラデーションタイプ」を変更しよう
4. 「不透明度」を変更しよう

完成例

問題

「カラム」ブロックを追加し、各カラムの中に「段落」ブロックを設定しよう。

方法

1. 演習ブロック「★」にカーソルを入れる
2. 「★」を消す
3. エディター内の「ブロックの追加」ボタンからポップアップを開く
4. 検索ボックスに「カラム」と入力してブロックを絞り込み、配置する
5. 開始時のパターン「30/70」を選択する
6. 左右の [　　+　　] ボタンを押し、段落ブロックを追加し、適当な文字を入れる。

完成例

問題

「カラム」ブロックのカラムを、設定サイドバーから増やしましょう。

方法

演習ブロック「★」を消して、Lv50で作成したブロックをコピペする。

1. ブロックパンくずリストで、親のカラムブロックを選択しましょう
2. 設定サイドバーの「カラム」の数を３にしましょう
3. 新しくできたカラムに、段落ブロックを追加し、適当な文字を入力しましょう

完成例

問題

段落ブロックの組み合わせを「再利用可能ブロック」に登録してみよう。

方法

1. 演習ブロック「名前」にご自分の名前をご記入ください
2. 「名前」と「ブロックエディター ワークショップ」を両方とも選択してください。
3. ブロックツールバー > 詳細設定 > 再利用ブロックに追加
4. ブロックの名前に、ここではご自分のお名前をご入力し、保存ボタンを押してください。

完成例

問題

「再利用可能」ブロックを呼び出して、エディターに配置しましょう。

方法

1. 演習ブロック「★」を消す。
2. 「ブロック追加パネル」 ＞ 「再利用可能」 ＞ ご自分で作成されたブロックを選択

完成例

問題

「再利用可能」ブロックを呼び出して、編集します。

方法

1. 演習ブロック「★」を消す。
2. ご自分の再利用ブロックを配置
3. 右上の変更ボタンを押し、「ブロックエディターワークショップ」を適当な文字に置き換える
4. Lv52で作成したブロックの文字も変更されていることを確認する。（内容を保存して、ブラウザをリロードします）

完成例

問題

設定サイドバーの表示を切り替えてみましょう。

方法

エディター右上の「歯車マーク」を２〜３回押します。

押すたびに表示と非表示が切り替わります。

完成例

問題

ブロックエディターのデフォルトは「フルスクリーンモード」です。解除して左に、管理画面のツールバーなどを表示してみましょう。

方法

1. Lv55の「設定」ボタンの右の「 ⋮ 」（ツールと設定をさらに表示）をクリックする
2. 「フルスクリーンモード」からチェックを外す
   → 左や上に、管理画面のツールバーが表示されます。
3. もう一度チェックを入れて、フルスクリーンモードに戻します。

完成例

問題

「ブロックマネージャー」という機能を使って、絶対に使いそうにないブロックを無効にしましょう。

方法

1. 「 ⋮ 」（ツールと設定をさらに表示）をクリックする
2. 「ツール」 ＞ 「ブロックマネージャー」
3. 例えばリスト最下部にある「埋め込み」系のブロックなど、使わないものはチェックを外す

完成例

問題

ーボードショートカットの一覧をみてみましょう。

方法

1. 「 ⋮ 」（ツールと設定をさらに表示）をクリックする
2. 「ツール」 ＞ 「キーボードショートカット」

完成例

問題

公式ドキュメントを見てみましょう。

方法

1. 「 ⋮ 」（ツールと設定をさらに表示）をクリックする
2. 「ツール」 ＞ 「ヘルプ」

完成例

問題

これまでずっとやってきたのはブロックの「ビジュアル編集」。「HTMLとして編集」もしてみよう。

方法

1. 演習ブロックをクリック
2. ブロックツールバー > 詳細設定 > HTMLとして編集

完成例

問題

これまでずっと使ってきたのはブロックのエディターの「ビジュアルエディター」。「コードエディター」もみてみましょう。

※ この固定ページはデータが多くて重たいので、試される場合は「更新」してからやってみてください！

方法

1. エディター左上、ツールと設定を更に表示ボタン[ ⋮ ]
2. エディター ＞ コードエディター

完成例

問題

たまに、「このブロックには想定されていないか無効なコンテンツが含まれています」というメッセージがでます。

「ブロックリカバリを試行」して、回復を試みてみましょう！

方法

1. 詳細設定ボタン[ ⋮ ]
2. ブロックリカバリを試行

完成例