投稿ページを作ろう(11)ブロックエディターの基本
KUSUNOKI DESIGN
ブロックエディターとは
ブロックエディターとは、テキストや画像、ボタン、表などの「ブロック」を組み合わせて記事やページを構築する方式のエディターです。
2018年に導入された新しい編集方式で、Gutenberg(グーテンベルク)と呼ばれることもあります
ちなみにワードプレスには『クラシックエディター』というものもあります。ワードプレス初心者で、テキストベースのシンプルなブログを作っている方はこちらの方が使い易いかもしれません。
▶エディターとは・・・
クラシックエディターが向いている人
ワードプレスのエディターは、現在ブロックエディターというものを採用しています。しかし、以前はクラシックエディターというエディターを採用していました。このエディターは、MicrosoftOfficeのWordと似たような使い方をする為、テキストベースのブログを書く人や、シンプルな編集が良いという人に向いています。
また、ワードプレスをずっと使っている方は、そのままクラシックエディターを使っている方もいます。ワードプレスに慣れていない方で、シンプルなデザインしか必要ないと思っている方はこちらの方が使い易いかもしれません。
当ブログでは、ブロックエディターでの解説しかしません。慣れるまで少し時間がかかるかもしれないので、テキストベースのブログで良いという方はクラシックエディターを使ってみるのも良いかもしれません。
“ワードプレス クラシックエディター 切り替え”というキーワードで検索すると切り替え方法を解説しているブログが出てくるので調べてみてください。
よく使うブロック
WordPressのブロックエディター（Gutenberg）には、記事を構成するためにさまざまな「ブロック」が用意されています。その中でも「段落ブロック」「見出しブロック」「画像ブロック」は、特に基本的でよく使用されるブロックです。
段落ブロック
- 概要：
段落ブロックは、テキストを入力するための基本的なブロックで、文章や説明文を書く際に使用します。ブログ記事やウェブページの大部分は、この段落ブロックで構成されることが多いです。 - 入力：
ブロックエディターでテキストを入力すると自動的に設定されます。特別な操作をせずにシンプルに文章を追加したい場合に最適です。 - 文字装飾：
太字やイタリック、リンクの追加が簡単に行えます。 - テキストの配置：
左揃え、中央揃え、右揃えの選択が可能です。 - 文字サイズと色の変更：
テキストサイズや色をカスタマイズできるため、重要な内容を強調することができます。
見出しブロック
- 概要：
見出しブロックは、記事やページの見出しを作成するためのブロックです。見出しはSEOにも重要で、文章の構造を分かりやすくするために使います。 - 特徴と機能：
見出しの階層：見出しレベル（H1からH6まで）を設定できます。一般的に、記事のタイトルにはH1を使い、各セクションの見出しにH2やH3を使用することで、段落構成が整います。 - スタイル設定：
文字色や背景色の変更も可能なので、デザインを工夫したい場合にも役立ちます。 - SEO効果：
見出しブロックを適切に使用すると、検索エンジンがページ内容を理解しやすくなるため、SEO対策としても有効です。 - 使い方：
文章構成を分かりやすくするために、各セクションのタイトルや要点を見出しブロックとして追加します。
画像ブロック
- 概要：
画像ブロックは、記事やページに画像を挿入するためのブロックです。写真やイラストを追加することで、内容に視覚的なアクセントをつけ、記事の魅力を高めます。
- 特徴と機能：
画像の配置：画像のサイズ変更や、左右・中央への配置設定が可能です。
リンク機能：画像にリンクを追加することができ、クリックすると他のページや記事に移動する設定も可能です。
キャプション追加：画像の下にキャプション（説明文）を付けることができ、視覚的な情報に補足説明を加えることができます。
Altテキスト：画像の代替テキストを設定することもでき、SEOやアクセシビリティの向上に役立ちます。
- 使い方：
画像を挿入したい場所で「＋」ボタンから画像ブロックを選び、メディアライブラリから画像をアップロードします。
動画：ブロックエディターの実演
手順
- STEP１画像を用意する
- アイキャッチ画像とブログに載せる画像を用意する
- STEP2 WordPressの編集画面を開く
- ダッシュボード＞新規投稿＞新規投稿を追加
- STEP3 ページタイトルを入力
- ページタイトルを入力しないとスラッグの変更ができないのでまずはページタイトルを入力します。
- STEP4 投稿の設定を行う
- アイキャッチ画像、抜粋、スラッグ、カテゴリー、タグを設定する
- STEP5 ブロックエディターを使ってページを作成する
- 見出しブロック、段落ブロック、画像ブロックを使う
- STEP6 プレビューを見る
- 誤字脱字、レイアウトの崩れがないか確かめる
- STEP7 公開する
YouTube
まとめ
今回は、WordPressのブロックエディターの基本について解説しました。ブロックエディターは2018年にクラシックエディターに代わって導入されたエディターで、テキストや画像、ボタン、表などの「ブロック」を組み合わせてページを構築するのが特徴です。クラシックエディターはWordのようなテキストエディターに似ているため、初心者には使いやすいかもしれませんが、WordPressに慣れてくると、レイアウト調整が簡単なブロックエディターが便利だと感じると思います。
ただし、シンプルなテキストベースの投稿がメインでレイアウト設定が不要な人は、クラシックエディターも適していますのでワードプレスの使用の目的にあわせて、各自使い易いものを選んでみると良いのではないかと思います。
ブロックエディターの勉強方法は、頻繁に使用するブロックから覚えていくのが良いと思います。最初はよく使うブロックだけをマスターし、徐々に使えるブロックを増やしていけば、意外と短期間で習得できます。ブロックエディターを使いこなせると、投稿ページだけでなく固定ページの作成にも便利ですので、ぜひ覚えてみてください。
告知
この動画を見ている方で、WEBサイトを作ってほしいと思っている方はいませんか？
只今、無料にてWEBサイト、WEB画像をお作りする活動をしています。
興味のある方は是非ご連絡ください。
Follow me!
