ワードプレス「ブロックエディターの使い方」。ワードプレスには「クラシックエディター」と「ブロックエディター」の2種類があります。今回は、ワードプレス「ブロックエディターの使い方」について書いていきます。
この章では「ブロックエディター」を用いて、ブロック単位でおこなっていきます。まずは「ブロックエディター」の操作方法に交え、テキスト画像など、基本的なブロックの扱い方を覚えていきましょう。
| 結論を先に話ししておきます |
| ワードプレスにおける「ブロックエディター」がリリースされてから、約2年が経過し、有名な「ワードプレステーマ」や「プラグイン」については、ほぼ「ブロックエディター」に変更されてきています。
そんな中、一部の「ワードプレステーマ」や「プラグイン」の中には、従来の「クラシックエディター」のままになっているものもあります。あえて「クラシックエディター」の方を利用したい場合、プラグインの「Classic Editor」を有効化しておけばOKです。
そうすることで、リリースされる前のエディターに戻すことが可能となります。正直「ブロックエディター」は、使いずらいと言う声も沢山あるようです。あなたは「クラシックエディター派」それとも「ブロックエディター派」。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
「ブロックエディター」は「ブロックシステム」を採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。「ブロックエディター」は、別の名を「Gutenberg/グーテンベルグ」と言います。
また「ブロックエディター」は、Webサイトやデジタル製品用にリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
フリーフォームテキストに「メディア」「オブジェクト」「ショートコード」などを埋め込む方法とは異なります。また、念の為書いておくと「ショートコードブロック」と言うものがあります。
| 「ブロックエディター」のブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「WordPressブロックエディターの使い方 基本編」です。
【タイトルと本文の入力方法】
この章では「ブロックエディター」の図解を用いながら「タイトル」と「本文」の入力方法について解説していきたいと思います。実際には、それほど難しくないので心配はいらないかと思います。
ただ「クラシックエディター」と「ブロックエディター」では、画面の表示自体が全く異なっている為「クラシックエディター」に使い慣れている人から見れば、少し使いずらいかも知れません。
タイトルの入力方法
それでは早速始めていきましょう。下記の図解を参考にして貰いながら進めていければと思います。まずは「ブロックエディター」として利用したい場合、初めにやっておきたいことがあるので確認してみましょう。
ワードプレスプラグインの「Classic Editor」をインストールし、有効化されていない場合「ブロックエディター」を最初から使うことになります。どちらを使うのかはあなた自身で決めて下さい。
- 「サイドメニュー」の中から「設定」→「投稿設定」と進み「緑色枠」で囲まれている「投稿設定」を開きます。次に「水色枠」で囲まれている「ブロックエディター」を選択し、最後に変更を保存を押しましょう。
- すると「ブロックエディター」の画面が表示されます。ブログのタイトルを入力するには「赤色枠」で囲まれている「ここにタイトルを入力(32文字以内推奨)」内にカーソルを表示させます。
- タイトルとして「オレンジ色枠」で囲まれているように「アフィリエイトで稼ごう！」としてみました。以上、タイトルを入力することができました。
本文の入力方法
タイトルの入力方法が分かったところで、次は、本文の入力方法について書いていきます。本文の場合、文字を改行する際、二通りの方法があります。それでは上記と同じく図解を用いて解説していきます。
初めに書いておきますが、文字を改行するには「Shift」を押しながら「Enter」を押す方法と「Shift」は使わず「Enter」のみで改行する方法の二通りがあります。それでは早速見ていきましょう。
「Shift」を押しながら「Enter」を押す
- タイトルの直ぐ下に、ブロックを選択するには「/」を入力があります。そこにカーソルを合わせ「水色枠」で囲まれているように「アフィリエイトで稼ごう！にお越し頂きありがとうございます。」と入力してみました。
文字を改行するには「Shift」を押しながら「Enter」を押します。
- 文字を入力したら下書き保存をし「オレンジ色枠」で囲まれている「新しいタブでプレビュー」を押して確認してみましょう。
- するとトップページから、入力した記事の内容を確認することができます。
「Shift」は使わず「Enter」だけを押す
上記の「Shift」を押しながら「Enter」を押す以外には、どのような方法があるのかを見てみましょう。まずは上記で最初の図解と下記の最初の図解を見比べてみて下さい。自ずとその違いが分かるかと思います。
- もう一つ見てみましょう。「桃色枠」で囲まれているように先程と同じく「アフィリエイトで稼ごう！にお越し頂きありがとうございます。」としています。ここでの改行は「Enter」のみ、押しています。
- 本文を入力したら下書き保存をし「黄色枠」で囲まれている「新しいタブでプレビュー」を押して確認してみましょう。
- するとトップページから、入力した記事の内容を確認することができます。
| 記事を改行するには、二通りの方法があります |
| 「ブロックエディター」では「Shift」を押しながら「Enter」を押すやり方と、ただ単に「Enter」だけを押すやり方があります。ここで注意して貰いたいことがあります。それは下記を参照してみて下さい。
|
【文字の削除方法】
この章では、書いた文字の削除方法について解説していきます。削除方法には、二通りのやり方があります。やり方はとても簡単なので直ぐにでも覚えられるはずです。それでは図解を参考に見ていきましょう。
念の為書いておきますが「クラシックエディター」と「ブロックエディター」ですが、書いた文字を削除する場合、どちらも「Back Space」を使って、削除することができます。では進めていきましょう。
- 先程記載した「アフィリエイトで稼ごう！にお越し頂きありがとうございます。」を削除していきましょう。まずは「紫色枠」で囲まれている文字を滑らすように選択してみて下さい。
- 文字が選択されている状態で「赤色枠」で囲まれている「縦の点々」を押します。するとプルダウンメニューが表示されます。次に「緑色枠」で囲まれている「ブロックを削除」を押して削除します。
- 次の画面では、文字が削除されていることが分かります。
| 冒頭でも書いてますが、文字を削除する場合「Back Space」を押しても文字は削除されます。 |
【画像を追加する方法】
「ブロックエディター」では、当たり前ですが、画像を挿入したりすることもできます。この章では、画像を挿入するやり方について図解付きで解説していきます。画像の挿入も簡単にできます。
ですが、予め挿入したい画像を準備しておく必要があります。画像は、メディアライブラリ内に入れておくことを推奨します。画像サイズも前もって小さくしておきましょう。それでは見ていきましょう。
| 画像のサイズを圧縮してくれる便利なプラグインがあります。それが「EWWW Image Optimizer」です。是非使ってみて下さい。 |
- 画像を挿入したい箇所にカーソルを合わせて下さい。図解では「赤色枠」で囲まれているところに画像を入れたいと思います。
- 次に「緑色枠」もしくは「赤色枠」で囲まれているどちらかを開いてみて下さい。すると「水色枠」で囲まれている「画像」があるので開いてみましょう。
- 画像を開くと「桃色枠」で囲まれているボックスが開きます。
- ボックスの中の「オレンジ色枠」で囲まれている「画像を選択」を開くと、プルダウンメニューが開きます。次に「紫色枠」で囲まれている「メディアライブラリ」を開いてみましょう。
- 下記の図解では、当記事のアイキャッチ画像を選択してみました。画像を選択後「紫色枠」で囲まれている「選択」を押しましょう。
- 先程、カーソルで選択した箇所に画像を埋め込むことができました。
- 画像を埋め込むことができたら、プレビューを開いて、トップページから確認してみましょう。下記では、上手く表示させることができました。ですが、画像が左側に寄っていることが分かります。
- 画像を中央寄せに変更したい場合「赤色枠」で囲まれている絵文字のようなものを押してみて下さい。するとプルダウンメニューが表示されます。次に「黄色枠」で囲まれている「中央揃え」を選択しましょう。
- 図解では分かりずらいかも知れませんが、これで中央寄せになっています。では、プレビューから確認してみましょう。
- 下記の図解は、トップページから見た画面です。これで画像を中央寄せにすることができました。
| 画像を挿入する方法は分かって頂けましたか？それほど難しく感じなかったかも知れません。また画像に関しては、予め準備しておく必要があります。 |
【動画を挿入する方法】
では続いていきましょう。次は、記事内に動画を挿入する方法について図解を用いながら解説していきます。動画の挿入に関しても誰でも簡単に挿入することはできます。動画は「YouTube」から持ってくると良いでしょう。
一般的には「YouTube」からの動画をブログ内に貼り付けるのが良いとされています。当ブログ(miブログ)内に貼り付けている動画のほとんどが「YouTube」からの動画です。それでは早速見ていきましょう。
- 初めに、動画を挿入したい箇所にカーソルを合わせて下さい。図解では「赤色枠」で囲まれているところに動画を入れたいと思います。
- 次に「水色枠」もしくは「緑色枠」で囲まれているどちらかを開いてみて下さい。すると「紫色枠」で囲まれている「YouTube」があるので開いてみましょう。
- You Tubeを開くと「赤色枠」で囲まれているボックスが開きます。
- ボックスの中の「黄色枠」で囲まれているボックス内に、動画のURLを貼り付けて下さい。その後「桃色枠」で囲まれている「埋め込み」を押しましょう。
- すると動画を埋め込むことができました。では実際に、プレビューから、見てみましょう。
- 下記の図解は、トップページを開いて見た感じです。
| 「ブロックエディター」で動画を挿入する際、画面いっぱいに広がります。実際の画面は、あなた自身でやってみて下さい。 |
今回は以上となります。ワードプレス「ブロックエディターの使い方」については理解して頂けたでしょうか。「ブロックエディター」は「クラシックエディター」とは違って、難しいところが多々あります。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
