ごげたです。
子供頃、宿題しないでレゴで遊んでましたが
何かが得意な脳には育ってないようです。
はじめに
今回は「Wordpress」編です。
「グーテンベルク エディタ 私が覚えたこと」シリーズの「その1-2」
5系「Gutenberg(グーテンベルク)」エディタを使用。
「新規ブロック追加」、「見出しタイトル設定」を行ってみました。
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
参照サイトのテーマはTwenty Sixteen、OSはWindows、
ブラウザーはchromeです。
新規ブロックの追加
※前回の「その1-1」ではタイトルを入力を終えた時、
タイトルの下に「文章を入力、または/でブロックを選択」が
表示されて自動でブロックが追加されていました。
その自動ブロックに「ごけたです。」と一行入力しました。
一行入力後に一行の下には自動でブロックが追加されていません。
これはまだ同じブロック内でテキスト入力が可能になっているからです。
「ごけたです。」に続けてテキスト入力した場合は
同じブロック内の括りになるからです。
今回は「見出し設定」を行うので
新たにブロックを追加する必要があります。
ブロックの追加方法は3つ
ブロックの追加方法 その1 「Enterキー(改行)」
今「ごけたです。」の行で止まっています。
キーボードの「Enterキー(改行)」を
1回押すと新規でブロックが追加されます。
ここでは「文章を入力、または/でブロックを選択」の表示はなく、
左隅に「+ドライバマーク」が表示されるだけです。
ブロックの追加方法 その2 「メニュー内の「後に挿入」」
「ごけたです。」一行入力での上部メニュー右隅の
「3点リーダー(詳細設定)」をクリックします。
プルダウンメニュー内の「後に挿入」をクリックすると
ブロックが追加されます。
ここでも「文章を入力、または/でブロックを選択」の表示はなく、
左隅に「+ドライバマーク」が表示されるだけです。
ブロックの追加方法 その3(見出し編)
左上の「+ドライバマーク」をクリックします。
「+ドライバマーク」にカーソルを合わせると
「ブロックの追加」を表示されます。
左上の「+ドライバマーク」をクリックすると
「よく使うもの」一覧が表示されます。
今回は「見出しタイトル」を作成するので「見出し」をクリックします。
※「よく使うもの」一覧内に表示は
一覧内に使用頻度によって表示場所が異なっていきます。
見出しタイトルの入力待ち状態で新規ブロックが追加されます。
上記メニューの左側が「H」、「H2」と
見出し設定が完了した状態で表示されます。
ブロックの新規追加方法は以上です。
ブロックの追加追加方法はどれでも構いません。
自分の作業手順に沿って使いやすい方法で追加して下さい。
見出しタイトルの設定
上記で新規追加したブロックを使用して
「見出しタイトル」、「見出しサイズ」の設定を行います。
見出しタイトルの設定方法は5つ
新規ブロックの追加が出来たので
今度は「見出しタイトルの入力と設定」を行ってみます。
見出し設定 その1 「ブロックの追加方法 その1 半角英数「/」押す」編
新規ブロックの追加方法でキーボードの「Enterキー」を押す方法があります。
「ごけたです。」の下に新規ブロックが追加されました。
この新規ブロックの追加方法から「見出し設定」を行う方法が3種類あります。
半角英数状態の「/」を押す
新規ブロック内でキーボードの半角英数状態の「/」を押します。
「H 見出し」をクリック
半角英数状態の「/」を押すと左側に「プルダウンメニュー」が表示されます。
一番上の「H 見出し」をクリックします。
見出しサイズの設定済み
プルダウンメニュー一番上の「H 見出し」をクリックします。
ブロックの上部メニューの左側が「H」、「H2」で表示されて、
見出しサイズの設定が行われいます。
あとは見出しタイトルを入力するだけの状態です。
※「H 見出し」設定前にメニュー表示を消すには
キーボードの「Back Space」を押して「/」を削除します。
これが新規ブロックが追加された時に表示される
「文章を入力、または/でブロックを選択」の「/」の機能の1つです。
見出し設定 その2 「ブロックの追加方法 その2 左隅アイコンクリック」編
左隅の「ブロックの追加」アイコンをクリック
その1
新規ブロック左隅の「+ドライバマーク」の
「ブロックの追加」アイコンをクリックします。
「H 見出し」アイコンをクリック
「ブロックの追加」アイコンすると「よく使うもの」ウィンドウが表示されます。
「よく使うもの」一覧から「H 見出し」アイコンをクリックします。
※この「よく使うもの」ウィンドウ内のアイコンは
アイコンの使用頻度によって一覧内の表示場所が変わる場合がございます。
見出しサイズの設定済み
「よく使うもの」一覧から「H 見出し」アイコンをクリックすると
ブロックの上部メニューの左側が「H」、「H2」で表示されて、
見出しサイズの設定が行われいます。
あとは見出しタイトルを入力するだけの状態です。
見出し設定 その3 「ブロックの追加方法 その3 右隅「H」アイコンクリック」編
新規ブロックの追加方法でキーボードの「Enterキー」を押す方法があります。
「ごけたです。」の下に新規ブロックが追加されました。
この新規ブロックの追加方法から「見出し設定」を行う方法が3種類のもう1つです。
右側の「H 見出しの追加」をクリック
追加されたブロック内にカーソルを合わせと
右隅に3つアイコンが表示されます。
その内の「H 見出しの追加」アイコンをクリックします。
見出しサイズの設定済み
「H 見出しの追加」アイコンをクリックすると
ブロックの上部メニューの左側が「H」、「H2」で表示されて、
見出しサイズの設定が行われいます。
あとは見出しタイトルを入力するだけの状態です。
見出し設定 その4「ブロックの追加方法 その1、その2」編
「ブロックの追加方法 その1、その2」では
その1がキーボードの「Enterキー」で、
その2は上部メニュー右隅に縦3点リーダーの
プルダウンメニュー内の「後に挿入」で新規ブロックが追加されています。
ここではブロック内に先に見出しタイトルを入力してから、
見出しサイズを設定する方法です。
見出しタイトルの入力
①:ここでは「はじめに」と入力しています。
何でもいいので見出しタイトルを入力して下さい。
見出しの設定
②:上部メニューの左隅の
「P」の横反転させたようなアイコンをクリックします。
「P」の横反転させたようなアイコンは「段落」のアイコンです。
③:カーソルを合わせると「左右矢印」アイコンとその上部に
「ブロックタイプまたはスタイルを変更」が表示されます。
クリックすると「変換」一覧が表示されます。
④:今回は見出しの設定なので「見出し」をクリックします。
⑤:入力した「はじめに」は「H2」の見出し設定が行われます。
カーソルをテキスト入力位置に置くと
上部メニュー左側が「H」、「H2」の見出し設定表示になります。
「見出し」をクリックするだけで設定が完了することです。
見出し設定 その5「ブロックの追加方法 その3(見出し編)」編
この設定では左上の「+ドライバマーク」の
「ブロックの追加」アイコンをクリックして
「よく使うもの」一覧から「見出し」アイコンをクリックした時点で
「見出し設定」が行われています。
見出しタイトルの入力待ち
既に見出しサイズの設定が行われ
見出しタイトルを入力するだけの状態です。
見出しタイトルを入力して完了です。
「プレビュー」ボタンで確認
どの方法でも最後は投稿画面右上の「プレビュー」ボタンをクリックして、
「見出し表示」されているか確認します。
見出しサイズは初期設定で「H2」サイズに設定されています。
「ブロック」の削除
順番は最後になりましたが「ブロックの削除」方法を行ってみます。
ブロックの追加方法は多数ありますが、
削除方法が私が知る限りではたった1つです。
削除出来るブロック
1行入力後、「Enterキー」で新規ブロックを追加した状態で行っています。
新規で追加したブロックは、テキストなり、画像なり
また何も表示していません。
この状態では削除させるメニューが表示出来ません。
ということでこの画面内で削除できるブロックは
「ごけたです。」と表示されてるブロックとなります。
上部メニューの「縦3点リーダー」をクリック
削除可能なブロックをクリックします。
ここでは「ごけたです。」のブロックをクリックしてます。
上部メニューが表示されます。
右隅の「縦3点リーダー(詳細設定)」をクリック、
プルダウンメニュー内の「ブロックの削除」をクリックします。
これでブロックが削除されました。
新規ブロックに再入力
投稿画面内は削除できなかった「新規ブロック」がタイトル下に表示されます。
ここに「ごけたです。」を再入力します。
「Enterキー」を押せば新規ブロックが追加できます。
さいごに
1行入力のあとは新規でブロックを自分で追加します。
ブロックの追加方法は3つ。
キーボードの「Enterキー」を押して追加する方法。
ブロック上部メニューの右隅の「縦三点リーダー」から追加する方法。
左上の「ブロックの追加」アイコンをクリックして追加する方法。
どれでも構わない。作業しやすい方法で追加すればいい。
見出し設定の方法は4つ
「Enterキー」で新規ブロック追加には2種類あり、
1つが左隅の「ブロックの追加」アイコンをクリックして
「よく使うもの」内の「H 見出し」をクリック。
もう1つが右側の「H 見出しの追加」をクリック。
どちらもあとは見出しタイトルを入力するだけです。
先に三台タイトルを入力した場合は
上部メニュー左隅の「P」横反転をクリックします。
「変換」一覧から「H 見出し」アイコンをクリックすると
見出し設定が完了します。
さいごは左上の「ブロックの追加」アイコンをクリックして
ブロックを追加する際に「H 見出し」アイコンをクリックしていたので
見出しタイトル入力待ち状態でしたのでタイトルを入力するだけす。
こちらもどれでも構わない。
作業しやすい方法で追加すればいいかと。
ブロックの削除は何かしら表示されてるブロックのみ可能。
上部メニューの右隅をクリック。
「ブロックの削除」をクリック。
今回の内容を改めてみるとこんな感じかと。
次は「見出しサイズ」の設定方法に書く予定です。
最後までお合い下さいまして有難うございました。