下記の 段落ブロック 内の文字を、あなたの好きな食べ物の名前に書き換えよう!
チョコレート
けんちょう(山口県の郷土料理)
段落ブロック は、ブロックエディターを開いたときに最初から配置されている基本のブロックだよ!
下記の 段落ブロック を2つに分けよう!
ひとつめ
★ふたつめ
ひとつめ★ふたつめ
Enterキー押して新しい段落ブロックできちゃうの、ビックリするよね!私はビックリしたよ!改行したかっただけなのに…
下記の 段落ブロック の中で改行しよう。
1行目
★2行目
★3行目
1行目★2行目★3行目
MicrosoftのWordとか、クラシックエディター(以前のWordPressのエディター)みたいに改行するには、この方法だよ!
下記の段落ブロック内の「太字」を太字にしよう。
太字のところだけ、太字にしてね。
太字のところだけ、太字にしてね。
太字だよ!
下記の段落ブロック内の「取り消し線」に取り消し線をつけよう。
「取り消し線」してみてください。
「取り消し線」してみてください。
取り消し線ボタンの下に、文字色を変えられるボタンがあるよ。これを使うと文章中の一部の文字だけ色を変えられるよ。 段落ブロック全体の文字色を変更する方法は、Lv9を参照してね。
段落ブロック内の「connpassのページ」に、下記のリンクを貼ろう
https://gutenlovers.connpass.com/event/190879/
詳しい開催概要は「connpassのページ」をご覧ください。
詳しい開催概要は「connpassのページ」をご覧ください。
「検索またはURLを入力」で文字を入力すると、このサイト内の固定ページ(page)や投稿(post)を検索してリンクできるよ!
段落ブロック全体を中央揃えにしよう!
中央揃え
なんかいい感じになる予感
中央揃え
なんかいい感じになる予感
配置を変更ボタンは、いろんなブロックにあるよ!
段落ブロックの文字のサイズを「特大」にしてみよう
※ サイドバーが表示されていない場合は、「設定」ボタン(歯車マーク)で表示する。
特大特大特大特大特大特大特大特大特大特選特大特大特大
特大特大特大特大特大特大特大特大特大特選特大特大特大
他のブロックでも、この「設定サイドバー」からいろいろ設定を変えられるんだよ!すごく大事!
段落ブロックの文字の色を変更してみよう
※ 「カスタムカラー」をクリックすると、カラーピッカーから色を選べます
文字の色を変更します
文字の色を変更します
文字の色と背景色が近いと、「この色の組み合わせは読みにくいため、より暗い背景色、より明るい文字色を試してください。」と注意してくれるよ。アクセシビリティを向上できるよ。
文字色を元の色に戻します。
文字の色を戻します
文字の色を戻します
これで「段落ブロック」の設定方法の演習はおしまい! ブロックツールバーや設定サイドバーなど、重要な機能も紹介したね!
「元に戻す」「やり直す」操作をしてみましょう。
(なし)
「元に戻す」「やり直す」の操作を試すために、この「★」を消してみて
他のソフトウェアと同じように⌘+Z・Ctrl+Zでアンドゥーできるね!間違って操作しても安心!
ブロックを複製して、同じブロックを作ってみましょう。
このブロックを複製してね
このブロックを複製してね
このブロックを複製してね
このブロックを複製してね
複製は、よくやる操作なのでショートカット覚えたら楽だよ。
ブロックをコピーして、少し離れた場所にペーストしてみよう。
1:コピー元ブロック
2:このブロックにカーソルを入れて…ペースト(⌘+V
or Ctrl+V
)
1:コピー元ブロック
1:コピー元ブロック
2:このブロックにカーソルを入れて…ペースト(⌘+V
or Ctrl+V
)
コピーやペーストなどをすると、↓の画像のように、エディターの左下にメッセージがポップアップするよ!
ブロックを削除してみよう!
(なし)
1:ボタンで削除する
2:Deleteキーで削除する
(参考)3:ショートカットで削除する…なぜかうまくできないことが多いのですよね…。。。
知見がある方、どうやったらショートカットでうまく削除できるか教えてください。
参加者の方へ:難しければできなけれ気にせず次に進みましょう〜!!!
なんか、ショートカットだと失敗する率高いのですよ。私だけかな…
Macの場合、英数モードにするとショートカット使えるようです!mayuさんが教えてくださいました!ありがとうございますー!!!
新しい段落ブロックをEnterキーで増やしましょう。
→ 新しい段落ブロックが5つできます
★
★
段落ブロックには「文章を入力、または/でブロックを選択」というプレースホルダーが入っています。
エディター内に出現する「ブロックの追加」からブロックを足してみましょう。
このブロックの中央あたりの上辺か下辺のあたりにマウスを近づけると [+] ボタンが出現します。
(追加した段落ブロック)
このブロックの中央あたりの上辺か下辺のあたりにマウスを近づけると [+] ボタンが出現します。
「ブロックの追加」ボタン、いたるところにチラチラ出てきます
エディター左上にある「ブロックの追加」からブロック追加パネルを表示してブロックを追加しましょう。
(このブロックにカーソルを入れて、「ブロックの追加」してみてね)
(追加した段落ブロック)
(このブロックにカーソルを入れて、「ブロックの追加」してみてね)
パネルには、追加できるブロックが全て表示されているよ。
段落ブロックで、スラッシュ「/」キーを押すと、ブロックリストが表示されます。
さらに、「/画像」などと入力すると、リストが絞り込まれます。
この中からブロックを選択しましょう。
良く使います。重要です!
ブロックツールバー内のボタンから挿入してみましょう。
あああ
あああ
狙ったところに確実にブロックを挿入できる方法です。
段落ブロックにマークダウンで記述してみましょう。
自動的に、対応しているブロックに変換されます。
(全てのマークダウンに対応しているわけではありません。
(この文字を消して ###(+半角スペース)
を入力すると「見出し」ブロック(h3)が出現します)
(この文字を消して *(+半角スペース)
を入力すると「リスト」ブロックが出現します)
これらの他、番号付きリストなどもマークダウンでブロックを呼び出せます。h1は呼び出せないのでご注意。
段落ブロックを見出しブロックに変換しましょう。
ブロックツールバーの一番左のアイコンで、ブロックタイプまたはスタイルを変更することができます。
見出しに変換!
互換性のあるブロックにだけ変換できるよ。
複数の段落ブロックをリストブロックに変換しましょう。
いちご
レモン
ぶどう
もちろん、1つだけ選択してリストに変換することもできます!
ブロックの「編集モード」と「選択モード」を切り替えてみましょう。
(なし)
編集モードと選択モード
使いこなせば執筆スピードが上がりそう!
選択状態のブロックの、隣のブロックを選択しよう。
(なし)
最初に選択
次に選択
マウスを使わずに、違うブロックの編集に移れるので、ブロガーさんに便利かも!
連続して配置されている複数のブロックを選択しましょう。
Lv22のおさらいです!
ポイント
「編集」モードのまま選択する。(選択モードだと複数選択できない?)
(なし)
最初に選択
最後に選択
複数選択した状態で、ブロックをコピー&ペーストできるよ!
マトリョーシカのように、外枠の中に違う物を入れることを「入れ子」と言ったりしますが、ブロックも入れ子にできます。
子ブロックにカーソルがある状態から、親ブロックを選択しましょう。
(なし)
子ブロック(段落) → 親ブロック(グループ・濃いオレンジ色)
Lv26・27・28の選択方法3種は、ぜひマスターしてくださいね!
エディターの下に表示されている「ブロックパンくずリスト」。
自分(子ブロック)の親や、先祖が表示され、クリックすると選択できる優れものです。
これを使って、親ブロックを選択しましょう。
(なし)
子ブロック(段落) → 親ブロック(グループ・濃いオレンジ色)
ブロックパンくずリストを見ると、どのくらい入れ子になっているかも分かりますね!
トップツールバーの「ブロックナビゲーション」を使うと親ブロックと、兄弟関係にあるブロックがリストで表示されます。
これを使って、親ブロックを選択しましょう。
(なし)
子ブロック(段落) → 親ブロック(グループ・濃いオレンジ色)
兄弟関係にあるブロック
例えば「問題」(見出しブロック)にカーソルを入れて、ブロックナビゲーションを開いてみて!複雑なブロックの構造もツリー表示で一目瞭然だよ!
「上に移動」「下に移動」ボタンを使って、ブロックを上下に動かしてみましょう。
A
B
C
★ 移動させるブロック
D
A
B
★ 移動させるブロック
C
D
上と下のブロックを入れ替えるときは、この方法が一番確実!
「上に移動」「下に移動」ボタンをドラッグ&ドロップして、ブロックを移動させましょう。
A
★ 移動させるブロック
B
C
D
A
B
C
D
★ 移動させるブロック
今のバージョンは、掴むところがわかりづらいビジュアルだけど、将来的には改善されそうな予感…
ブロックツールバーの「詳細設定」の「移動」を使って、ブロックを任意の場所に移動させましょう。
A
★ 移動させるブロック
B
C
D
A
B
C
D
★ 移動させるブロック
狙ったところに一発移動!素晴らしい〜!!
文書を保存しましょう。(このドキュメントは既に「公開」されているので、「更新」ボタンを押します)
(なし)
保存したら、エディターの左下にメッセージとフロントページへのリンクが表示されるよ!
(2020/10/19 追記)
キタジマさん、ショートカットキー追記のアドバイス、ありがとうございました!
(※ 今回はワークショップの管理ができなくなるので、変更しないでください🙏)
スラッグ(パーマリンク)を変更場所がどこか確認しましょう!
※ 一度「下書き保存」か、「公開」をしないと設定できません。ご注意ください!
(なし)
ちなみに、リビジョンの閲覧は、このすぐ上のボタンをクリックすると見られる&元に戻す画面が出てくるよ
(2020/10/16 追記)
Lv32に引き続き、キタジマさんにアドバイスいただき、「※ 一度「下書き保存」か、「公開」をしないと設定できません。ご注意ください! 」と追記しました!
そうなんですよ、ここ、戸惑いポイントです。ご注意くださいませー!
「固定ページを表示」から、フロントページを見よう。
(なし)
私は、最初ちょっと戸惑ったよ。「どこから保存した固定ページ見るの?」って。
アイキャッチ画像を設定してみよう!
(なし)
このあたりのインターフェイス(画面の構成)は、旧エディターと同じだね。
エディター画面のまま、「タブレット」「モバイル」のプレビューを見てみよう!
(なし)
いろんな幅のプレビューが、エディターで簡単にできるようになったね。
ブロックを複数選択して、それらをグループにしよう。
A
B
C
A
B
C
ブロックパンくずリストを見ると、どのくらい入れ子になっているかも分かりますね!
グループ化は、ブロックツールバー > 詳細設定 >グループ化 でもできるよ!
グループを解除しよう。
A
B
C
A
B
C
たまに、解除することあるよね…?
まずグループブロックを作って、その中に段落ブロックを作ろう。
A
B
C
グループブロック、いろんな扱い方法があるね。
ブロック追加パネルの「パターン」タブから好きなパターンを選んで配置してみよう。
それほど昔のことではありません。その名は忘れましたが、ラ・マンチャ地方の
残りは休日用の上質な上着、ベルベットのズボン、靴になりましたが、平日の間は最高の手織りの
★
カラムブロックや、グループブロックの中にカーソルがあるときは、「パターン」タブは非表示になるみたいね…!(問題を作りながら発見しました!)
ブロック追加パネルの「パターン」タブから好きなパターンを選んで配置して、中身を書き換えてみよう。
あああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいい
★
「ブロックパターン」は、同じレイアウトで中身を替えるえるときに使うよ!
「メディアと文章」ブロックを追加しよう。
★
制作でもよく使うレイアウトです!
「メディアと文章」ブロックを追加して、設定・入力してみよう。
演習ブロック「★」を消して、「メディアと文章」ブロックを配置する。
あああ
★
よし、いい感じ。
「メディアと文章」ブロックを追加して、コンテンツを変更してみよう。
演習ブロック「★」を消して、Lv43で作成したブロックをコピペする。ブロックツールバーで下記の変更をしてみよう。
あああ
★
よし、いい感じ。
「メディアと文章」ブロックを追加して、設定を変更してみよう。
演習ブロック「★」を消して、Lv44で作成したブロックをコピペする。設定サイドバーで下記の変更をしてみよう。
あああ
★
色々設定できますね。
「カバー」ブロックを追加し、画像の設定を行おう。
★
カバーブロックを使うと、ブロックを上に重ねることができます。
「カバー」ブロックにコンテンツを配置しよう。
演習ブロック「★」を消して、Lv46で作成したブロックをコピペする。
タイトルタイトル
★
それっぽい感じになってきた!
「カバー」ブロックの、ブロックツールバーの設定を変更してみよう。
演習ブロック「★」を消して、Lv47で作成したブロックをコピペする。ブロックツールバーで下記の変更をしてみよう。
タイトルタイトル
★
よし、いい感じ。
「カバー」ブロックのサイドバーでの設定を変更してみよう。
演習ブロック「★」を消して、Lv48で作成したブロックをコピペする。設定サイドバーで下記の変更をしてみよう。
タイトルタイトル
★
これで、カバーブロックの設定が一通りできました!やったー!
「カラム」ブロックを追加し、各カラムの中に「段落」ブロックを設定しよう。
あああああああああああああああああああああああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
★
レイアウトを行うのに、カラムブロックはよく使います!
「カラム」ブロックのカラムを、設定サイドバーから増やしましょう。
演習ブロック「★」を消して、Lv50で作成したブロックをコピペする。
あああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううう
★
カラムブロックに配置した段落ブロックにカーソルがある状態でブロックパンくずリストを見ると、「カラム」が2つありますね。左のカラムが親、右のカラムが子になります。
段落ブロックの組み合わせを「再利用可能ブロック」に登録してみよう。
名前:●●●●●●
ブロックエディターワークショップ
実際の制作では、アクセス情報など、同じ情報を複数の場所で表示する場合などに使われます。
「再利用可能」ブロックを呼び出して、エディターに配置しましょう。
★
再利用可能ブロックの配置は「/」で呼び出したり、検索からでも可能です。
「再利用可能」ブロックを呼び出して、編集します。
★
再利用可能ブロックのデータを変更すると、これまで配置した全ての再利用可能ブロックに反映されます。
設定サイドバーの表示を切り替えてみましょう。
エディター右上の「歯車マーク」を2〜3回押します。
押すたびに表示と非表示が切り替わります。
(なし)
(なし)
「歯車マーク」と言っても、花みたいに見えるのよ…
ブロックエディターのデフォルトは「フルスクリーンモード」です。解除して左に、管理画面のツールバーなどを表示してみましょう。
(なし)
(なし)
個人的には、最初は違和感があったフルスクリーンモードだけど、今やこっちの方が良い!って思ってるから、慣れってすごい。実際画面を広く使えて、助かってます。
「ブロックマネージャー」という機能を使って、絶対に使いそうにないブロックを無効にしましょう。
(なし)
(なし)
埋め込み系ブロックの中には、日本ではあまり見かけないものもありますものね。使わないものは無効にして、スッキリとエディターを使うことができます。
ーボードショートカットの一覧をみてみましょう。
(なし)
(なし)
ショートカットを覚えれば覚えるほど、作業のスピードが上がりますね。
公式ドキュメントを見てみましょう。
(なし)
(なし)
ヘルプから、公式のドキュメントにたどり着きます!
これまでずっとやってきたのはブロックの「ビジュアル編集」。「HTMLとして編集」もしてみよう。
(なし)
あああああああああああああ
私は、たまーに使います
これまでずっと使ってきたのはブロックのエディターの「ビジュアルエディター」。「コードエディター」もみてみましょう。
※ この固定ページはデータが多くて重たいので、試される場合は「更新」してからやってみてください!
(なし)
(なし)
たまーに、コードを見たいときに私は使います!皆さんは使われたりしますか?
たまに、「このブロックには想定されていないか無効なコンテンツが含まれています」というメッセージがでます。
「ブロックリカバリを試行」して、回復を試みてみましょう!
(なし)
あああああああああああああ
株式会社ベクトルさんの記事「このブロックには、想定されていないか無効なコンテンツが含まれています。の対処法」がめちゃくちゃ詳しいので、ぜひ参考になさってください!