ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス ブロックエディターで記事作成(画像の挿入、見出し・段落の設定方法)

ワードプレスのGuntenberg(ブロックエディター)を使って、記事を投稿する基本的な手順を紹介します。

本記事でわかること

Gutenberg(ブロックエディター)で記事を投稿する上で、基本的な手順を理解する。
・記事タイトルの入力
・パーマリンクの設定
・画像ブロックを使って画像を挿入
・段落ブロックを使ってテキストを入力
・見出しブロックを使って見出しを入力

※本記事は、2021年7月のワードプレスのversion5.8へのアップデートにより、2021年8月にリライトし直したものです。

目次

ブロックエディターで作成する記事概要

次のようなシンプルな記事を作成していきます。

作成する記事内容

・記事タイトル
・1stビュー画像
・見出し(h2:2つ、h3:2つ、h4:2つ)
・段落8個

で構成されています。

記事作成の前提条件

・テーマは、Twenty Seventeen を使用しています。
(余分な機能のないシンプルなテーマということで選択しています。)

・プラグインは、特に設定していないデフォルト状態としています。

・パーマリンクの設定は
ダッシュボードメニューの 設定>パーマリンク設定 で、”投稿名”を選択しているものとします。

・ブロックエディターの編集画面の各機能については、次の記事も合わせて参考にしてください。

・ブロックエディターへの切り替え許可
プラグイン”Classic Editor”をインストール・有効化していると、ブロックエディターへの切り替え許可がされていない可能性があります。

ダッシュボードメニュー 設定>投稿設定 で、ブロックエディターへの切り替え許可をしてください。

それでは、ダッシュボードメニューの 投稿>新規追加 で新しい記事の編集画面を開けましょう。

タイトル入力とパーマリンクの編集

まずは、画面の一番上のタイトル入力部に記事のタイトルを入力します。

また同時に、パーマリンクのスラッグもタイトルに合わせて編集しておきます。

ここでは『記事2』というタイトルを入力しています。

パーマリンクの設定は、画面右の文書パネルにありますが、下書き保存”をすればスラッグの編集ができるようになります。

タイトル入力とパーマリンク編集

スラッグをタイトルと関連する半角英数字に修正しておきましょう。

画像を挿入する

本文の最初のブロックに、画像を挿入します。

おおまかな手順としては

  1. 画像ブロックを挿入する
  2. 画像をアップロード(または選択)する

①画像ブロックを挿入する

①画面左上の+マークをクリックして、ブロック一覧を表示させます。
②ブロック一覧”メディア”のグループまで下へスクロールする
②”画像”をクリック

画像ブロックの選択

これで、画像ブロックが挿入されます。挿入直後の状態は以下の通りです。

画像ブロック挿入直後

本文入力欄には画像ブロックが表示され、画面右には、この画像ブロックの情報を編集できるブロックパネルが表示されます。

※もし、画面右にブロックパネルが表示されていない場合は、画面右上の歯車マーク(設定)をクリックして、表示・非表示を切り替えてください。

情報パネルの表示・非表示切り替え

②画像をアップロード(または選択)する

ブロック内の”メディアライブラリ”をクリックして画像をアップロードします。

①メディアライブラリに画像をドラッグ&ドロップ(または既存の画像を選択)
②必要に応じて画像情報(代替テキスト・キャプションなど)を入力
③”選択”をクリック

メディアライブラリで画像を選択

これでブロック内に画像が挿入されます。

画像挿入直後

画像ブロックでは、このほか画像のトリミング加工やデュオトーンフィルターなど、さまざまな加工ができます。以下の記事で詳しく解説しているので参照ください。

ブロックのオプションについて

画像ブロック特有ではなく、他のブロックも同じ基本操作なので覚えておきましょう。

ブロック内編集ツールの一番右の3点はメニューは、オプション設定となっています。

クリックすると、ブロックの複製新しいブロックの挿入ブロックの削除 などの設定が開きます。

ツールバーのオプションメニュー

特に、ブロックの削除 は、ショートカットのShit+Alt+Zも覚えておくと便利です。

このほかにも、HTMLとして編集 や、再利用ブロックに追加 などの機能も選べます。

再利用ブロックに追加 については、以下の記事を参照ください。非常に便利な機能です。

段落の入力と編集

では、画像ブロックの下に段落ブロックでテキスト(導入文)を入力していきます。

1.新しいブロックを表示

2.テキストを入力

3.テキストの編集

新しいブロックを表示してテキストを入力する

画像ブロック内でリターン([Enter]キー)を押すと、画像ブロックの下に次のブロックが表示されます(または、編集画面左上のツールバー内で+マークをクリックする)。

段落への入力をする

画像を挿入する場合は、ブロック一覧から”画像”を選んで画像ブロックとする必要がありましたが、何も指定しない場合は自動的に段落ブロックとなっています。画面右のブロックパネルにも”段落”と表示され、このブロックが段落ブロックであることがわかります。

段落ブロックへ文字を入力していくにあたり、基本的な操作は次の2点です。

  • テキストを入力してリターン([Enter]キー)を押すと次の段落ブロックへ移ります
  • 同じ段落ブロック内で改行だけしたい場合は、Shft+リターン([Enter]キー) とする。

段落ブロックでの文字装飾

段落ブロックの入力中や入力済のブロックにカーソルを置くと、右の情報パネルが段落用のブロックパネルに自動的に切り替わります。

また入力したブロック内にカーソルを置くと、ブロックのすぐ上にツールバーが表示されます。

段落ブロックの文字装飾

このブロックパネルツールバーを操作して、入力した文字の文字サイズ、文字色、背景色を変更したり、太字化やマーカーをつけて強調したり、記事を書くにあたって必要な文字装飾をしていきます。

段落ブロックの文字装飾の方法については、若干独特なところがありますので、こちらの記事を参照ください。

見出しの入力

見出しの入力は、次のような手順となります。

1.ブロックの要素を見出しを指定して、要素を指定(H2、H3・・・から選びます)
2.見出しの大きさを指定する
3.テキストを入力

2と3は逆でも大丈夫です。

見出しブロックを指定する

画像ブロックを選んだのと同じ手順で見出しブロックを指定します。

見出しブロックの選択

見出しブロック指定直後は次のようになります。

見出しブロック指定直後

見出しの大きさを指定する

見出しは、大きい順にH1、H2、H3・・・とありますが、これを適切に使用して、文章を階層化することがSEO上正しい文章となります。

見出しの大きさはデフォルトではH2となっています。見出しブロックのツールバーで次のように変更します。

見出し大きさの変更

1つの記事につき、H1は1つしか許容できません。ですので、ワードプレスでは、記事のタイトルが自動的にH1に指定されています

したがって、記事本文内は、H2以下しか指定してはいけません。

また、H2の下層には、H3を指定する。H3の下層にはH4を指定する、というように、順番に下層を指定しましょう。H2の下層にいきなりH4を指定しないことです。

見出しを先に作成して段落を挿入する(ブロックの挿入方法)

以上で、段落と見出しの入力方法を解説してきましたので、順番に入力していけば記事が作成できるはずです。

しかし、記事の作成では、順番に作成するのではなく、先にすべての見出しを作成してから、あとで文章(段落)を作成していく、という場合もあるでしょう。

そこで、先に見出しブロックを作成してから、段落ブロックを見出しブロックと見出しブロックの間に挿入していく方法を解説します。

といっても、すごく簡単です。

1.見出しブロックを作成

2.ブロックを挿入したい直前の見出しブロックにカーソルを置いて、リターンキー([Enter]キー)を押す(または編集画面左上のツールバーの+マークをクリック)

3.ブロックが新しく挿入されるので、段落要素として入力(段落以外のブロックにしたい場合は、ブロック一覧から選ぶ)

とこれだけです。

この手順は、ほかのブロックを挿入する場合も同じですので、よく理解しておきましょう。

まとめ

以上、簡単な記事ですが、ブロックエディターでの作成方法を解説してきました。

画像、段落、見出し

の3つのブロックの入力・編集方法を解説してきましたが、どのブロックにも共通している手順としては、

1.ブロックの要素を指定する

2.入力する(見出しと段落の場合は文字入力、画像ブロックの場合は画像を挿入する)

3.ブロック内ツールバーやブロックパネルを用いて編集する(ブロックパネルは、カーソルにのあるブロックの情報が自動的に画面右に表示される)

ということです。この基本さえ押さえれば、ほかのブロックでの入力・編集もさほど難しくないでしょう。

ブロック毎に入力したり編集したりするのは、若干の慣れが必要ではありますが、慣れてくると、なかなか楽しいものです。

何より、クラシックエディターではできないブロックエディターならではの機能がたくさんありますので、ぜひ習得していきましょう。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる