Wordpress ブロックエディター基本の使い方

記事
IT・テクノロジー
サイト制作初心者…・ではなくても、今からブロックエディターに変換したという方のために、ワードプレスの「ブロックエディター(グーテンベルグ)」の基本的な使用方法を書かせていただきます。

こんにちは。サイト制作のお手伝い 一木堂 です。


この度は、ご依頼の中でとても多い「Wordpress ブロックエディターの使い方」について基本の部分をザックリとご説明させていただきます。

「なぜ今さら?」と思われる方もおられるでしょうが、実はWordpressに関しては10年近くも記事を書いてきたベテランブロガーのような方も、新テーマへのチェンジに伴い「今さらブロックエディターの新人」のようになっておられる方が多いのですね。

いまだにクラシックエディターを推奨する記事も多いですが、そもそも公式ではClassic editor はとっくに終了しており、現在対応されているプラグインもいつ終了するか分からないのが現状です。


ブロックエディター非対応のテーマは今さら導入しないようにし(有料のものでも存在するのでお気をつけて!)、クラシックエディター使用の方は一日も早くブロックエディターに慣れましょう。

私もお一人お一人にご説明するよりも、まとめた方が早いと思い、ここに至りました。よろしくお願い致します。

基本(どのテーマでも同じ)のブロックエディターの使い方


添付している画像は無料テーマ『Lightning』のエディターですが、どのテーマでも同じです。

記事(ページ)タイトル

ブロックエディターの使い方1.jpg

「タイトルを追加」文言はテーマによって違いますが、白紙のエディター上部に「タイトル」という表記があります。ここに書き込んだテキストが、その記事の表題になります。

(記事をTOPページ用の固定ページとして使う場合はタイトル表記は消えてしまうので「TOP」とでも書いておいてください)


その下に黒い「+」が表示されていると思います。

これが「ブロック」を選択するためのボタンです。

これはテーマや導入プラグインによって違うと思いますが、「黒の+」「青の+」などエディター上をマウスで探ることで現れる「+」、これをクリックすることによって「入れたいブロックを選択することができます」。(ここでは意味不明かもしれませんが、このまま進めます)


「ブロック」を選択する

ブロックエディターの使い方2.jpg

慣れないうちはピンと来ないかもしれませんが、ブロックエディターでは「全ての記入内容を「ブロック」と呼びます」


文章は「段落ブロック」画像は「画像ブロック」見出しは「見出しブロック」……ブロックを組み合わせて作られたものが1つの記事になります。

それらを選択するためのボタンがエディターのそこここをマウスで探ると出て来る「+」です。

「+」をクリックすることでブロックを選択することができます。

ブロックメニューから選択する


ブロックエディターの使い方3.jpg

「+」を押した後「すべて表示」をクリックすると、エディター左にブロックメニューが一覧になって現れます。ここからボタン・枠などの装飾などを選択できます。

このメニューの量や内容はテーマや導入プラグインによって違います。



ブロックを編集する

ブロックエディターの使い方4.jpg


ブロックを選択している間、編集項目はブロック上部のメニューだけではなく、エディター右側にも出てきます。

例えば、段落ブロックで「文字を書き、文字色を赤にしたい」とします。

エディター右をご覧ください。
タブが2つあると思うのですが、右側のタブを開きます。

ブロックエディターの使い方5.jpg

「テキスト」を開いて赤色を選択すれば文字色が変わります。


ブロックエディターの使い方6.jpg

「背景」を開いて色を選択するとブロックのテキストに背景色が付きます。


この辺りの編集の自由度もテーマによって違います。

テーマによっては、この段階で段落に右メニューから装飾枠を付けることができるものもあります。


ブロックの内容や量はテーマによって違う


ブロックエディターの使い方7.jpg

先ほどから書いておりますが、エディター右メニューの項目の量も、テーマによって違います。

画像として現在お見せしているのはテーマLightning です。

記事を公開する前に、アイキャッチ画像の設定、コメントを許可するか(コメント欄を表示するか)、レイアウト(サイドバーを付けるか付けないか)などを設定することができます。


ブロックエディターの使い方8.jpg

上の画像は無料テーマ『Cocoon』 のエディターです。

投稿設定だけで「アイキャッチ画像」「コメント欄を表示するか」「ページタイプ(レイアウト)」「このページに目次を表示するか」「読む時間を表示するか」「SNS投稿設定」などなど……ものすごくたくさんの項目があります。


テーマを選ぶ。というのは、こういうことを考慮することだと思います。


シンプルなテーマを導入して、少ない機能をプラグインで補うという考え方もあります。

プラグインで悩む必要が無いように高機能なテーマを導入するという考え方もあります。


個人的には、無料テーマならば『Cocoon』を、有料テーマならば『SWELL』をお薦めしております。(2023年8月現在)



ご自身のスタイルに合ったテーマ選びをどうぞ。


一木堂ではカスタマイズや初期設定をお手伝いしております


テーマ選びで悩まれる時は、「買ってしまう前に!」ご相談ください。無料でご相談承ります。


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す