ブロックエディタの基本操作①
ブロックの名称について
各部分にそれぞれ名称があります。
ざっくりで構わないので覚えておきましょう！
※クリックで拡大表示できます！
STEP1：段落ブロックでの文字の入力を学びましょう
Lv1：文章の書き換え
問題
下記の 段落ブロック 内の文字を、あなたの好きな食べ物の名前に書き換えてみましょう！
チョコレート
方法
- 青色のついたエリアにカーソルを入れる。
- 全選択してdelete
- 新しい文章を書く
やってみましょう！
おすし
段落ブロック は、ブロックエディターを開いたときに一番はじめから配置されている基本のブロックです！
Lv2：新しい段落ブロックの生成
問題
下記の 段落ブロック を２つに分けてみましょう！
完成例
ひとつめ
★
ふたつめ
方法
- ★の前にカーソルを入れる
- Enterキーを押す
やってみましょう！
ひとつめ
★ふたつめ
Enterキー押して新しい段落ブロックできちゃいます！話の内容を変えたい時に便利ですね！
Lv3：段落ブロック内での改行
問題
下記の 段落ブロック の中で改行してみましょう。
完成例
１行目
★２行目
★３行目
方法
- ★の部分にカーソルを入れる
- Shiftキーを押しながら、Enterキーを押す
やってみましょう！
１行目★
２行目★
３行目
MicrosoftのWordとか、クラシックエディター（以前のWordPressのエディター）みたいに、改行するにはこの方法で試してください！
Lv4：太字
問題
下記の段落ブロック内の「太字」を太字にしてみましょう。
完成例
太字のところだけ、太字にしてみてください。
方法
- 「太字」の文字を選択状態にする
- すぐ上に出てきたブロックツールバーの「B」を押す
やってみましょう！
太字のところだけ、太字にしてみましょう。
太字にできましたか？
Lv5：取り消し線の追加
問題
下記の段落ブロック内の「取り消し線」に取り消し線をつけてみましょう。
完成例
「取り消し線」してみてください。
方法
- 「取り消し線」の文字を選択状態にする
- すぐ上に出てきたツールバーの「????（下向き矢印）」を押し、メニューをドロップダウンさせる
- 「取り消し線」を押す
やってみましょう！
「取り消し線」してみてください。
取り消し線ボタンの下に、文字色を変えられるボタンがあります。これを使うと文章中の一部の文字だけ色を変えることができます！
Lv6：リンクを貼る
問題
段落ブロック内の「制作実績のページ」に、下記のリンクを貼ってみましょう
↓↓リンク先↓↓
https://www.portals.co.jp/portfolio/完成例
その他のデザインは「制作実績のページ」をご覧ください。
方法
- 左側にあるリンク先のリンクをコピー
- 「制作実績のページ」の文字を選択
- リンクボタンを押す
- 「検索またはURLを入力」に、リンクをペースト
- 送信（submit）ボタンを押す
やってみましょう
その他のデザイン は「制作実績のページ」をご覧ください。https://www.portals.co.jp/portfolio/
「検索またはURLを入力」で文字を入力すると、このサイト内の固定ページやお悩み別メニューを検索してリンクすることができます！
Lv7：「テキストの配置」を中央揃えに変更
問題
段落ブロック全体を中央揃えにしてみましょう！
完成例
中央揃え
なんかいい感じになる予感
方法
- 段落ブロックにカーソルを入れる
- 「テキストの配置を変更」ボタンをクリック
- 「テキスト中央寄せ」をクリック
やってみましょう
中央揃え
なんかいい感じになる予感
配置を変更ボタンは、いろんなブロックにあります！探してみて下さい！
Lv8：「設定サイドバー」から文字のサイズの変更
問題
段落ブロックの文字のサイズを「特大」にしてみましょう！
完成例
特大特大特大特大特大特大特大特大特大特選特大特大特大
方法
- 段落ブロックにカーソルを入れる
- サイドバーの「タイポグラフィ」の「プリセットサイズ」をドロップダウンさせる
- 「特大」ボタンをクリック
※ サイドバーが表示されていない場合は、
「設定」ボタン（歯車マーク）で表示する。
やってみましょう
特大特大特大特大特大特大特大特大特大特選特大特大特大
他のブロックでも、この「設定サイドバー」からいろいろ設定を変えることができます！とても大事なので覚えておいてください！
Lv9：文字色の変更
問題
段落ブロックの文字の色を変更してみましょう
完成例
文字の色を変更します
方法
- 段落ブロックにカーソルを入れる
- サイドバーの「色設定」をクリックしてドロップダウンさせる
- 「文字色」で好きな色を選びます
※ 「カスタムカラー」をクリックすると、カラーピッカーから色を選べます
やってみましょう！
文字の色を変更します
文字の色と背景色が近いと、「この色の組み合わせは読みにくいため、より暗い背景色、より明るい文字色を試してください。」と注意されることがあります。
Lv10：文字色を元に戻しましょう
問題
文字色を元の色に戻します。
完成例
文字の色を戻します
方法
- 段落ブロックにカーソルを入れる
- サイドバーの「色設定」をクリックしてドロップダウンさせる
- 「文字色」の「クリア」ボタンを押す
やってみましょう
文字の色を戻します
これで「段落ブロック」の設定方法の演習は終了です！ ブロックツールバーや設定サイドバーなど、重要な機能も紹介させていただきました！
STEP2：ページの設定と公開の操作方法を学びましょう
Lv1：カテゴリを選択する場所を確認しましょう
問題
カテゴリを選択する位置を確認して設定しましょう！
方法
- 設定サイドバーの「お悩み別メニュー」タブを開く
- 「カテゴリ（症状別）」の設定を開く
- カテゴリ一覧が表示されるのであてはまるものにチェックを入れる
なるべく、1つのページに対してカテゴリは1つだけ選択するようにしましょう！
Lv2：スラッグ（パーマリンク）を変更できる場所を確認しよう
問題
スラッグ（パーマリンク）を変更場所がどこか確認して設定しましょう！
方法
- 設定サイドバーの「お悩み別メニュー」タブを開く
- 「パーマリンク」の設定を開く
- URLスラッグの入力欄で変更できる
パーマリンクは必ず英字でそのページに合ったわかりやすい文字列にしましょう！
Lv3：保存・公開しましょう
問題
文書を保存しましょう。
方法
- エディター右上の「公開」ボタンを押します
- 公開してもよいですか？と聞かれるので、最後に設定を確認して公開をもう一度押す
保存したら、エディターの左下にメッセージとページへのリンクが表示されます！
Lv4：保存した固定ページを表示してみよう
問題
「固定ページを表示」から、フロントページを見よう。
方法
- 設定サイドバーの「お悩み別メニュー」タブを開く
- 「パーマリンク」の設定を開く
- 「表示 お悩み別メニュー」をクリックする
→ 別タブで開きます
「どこから保存したページ見るの？」ってなった時は思い出してください…。
Lv5：プレビューの「タブレット」「モバイル」をみてみよう
問題
エディター画面のまま、「タブレット」「モバイル」のプレビューを見てみましょう！
方法
- エディター右上の「プレビュー」タブを開く
- 「タブレット」「モバイル」に切り替える
- 「デスクトップ」に戻す
いろんな幅のプレビューがエディターで簡単に見られますが、エディターと実際のページが大きく異なる事も多いのであくまでも参考程度にしましょう。
Lv6：設定サイドバーの表示非表示を切り替えよう
問題
設定サイドバーの表示を切り替えてみましょう。
方法
エディター右上の「歯車マーク」を２〜３回押します。
押すたびに表示と非表示が切り替わります。
演習
（なし）
「歯車マーク」と言っても、なんだかお花みたいですね…
Lv7：「フルスクリーンモード」を解除してみましょう
問題
ブロックエディターのデフォルトは「フルスクリーンモード」です。解除して左に、管理画面のツールバーなどを表示してみましょう。
方法
- Lv6の「設定」ボタンの右の「 ⋮ 」（ツールと設定をさらに表示）をクリックする
- 「フルスクリーンモード」からチェックを外す
→ 左や上に、管理画面のツールバーが表示されます。 - もう一度チェックを入れて、フルスクリーンモードに戻します。
演習
（なし）
画面を広く使えるので、フルスクリーンモードも良いですね。
