WordPressブロックエディターの機能と使い方【初心者向け】

WordPressブロックエディターの機能と使い方【初心者向け】
URLをコピーする
URLをコピーしました!
悩んでいる人

ブロックエディターって何だろう…

「ブロックエディター 使い方」でGoogle検索すると、ブロックエディターの個々の機能を詳細に説明したサイトが上位に出てきます。

悩んでいる人

詳しいのはいいんだけど…

ブロックエディターを使いにくいと感じる初心者には、やや情報量が多すぎる気もしますよね。

WordPress(ワードプレス)のブロックエディターは従来のエディターと比べて根本的な考え方が異なるため、その考え方を理解することが大切です。

ブロックエディターの考え方さえ理解してしまえば、個々の操作方法は使っていくうちに自然と身につきます。

そこで、本記事ではブロックエディターの考え方をふまえて、基本的な機能と使い方について解説していきます。

この記事を書いた人

Twitter(@saishonojptw

この記事を書いている僕は、2021年8月ブログ開始。最初の記事がA8コンテスト入賞。ブログ3ヶ月目に収益:単月5桁。シンプルなブログ作りを発信。地味にコツコツ、が得意です。

この記事でわかること
  • WordPressブロックエディターの考え方、機能、使い方
目次

ブロックエディターとは

WordPressでは、編集画面を開いてサイトの記事(コンテンツ)を作成します。

編集画面とは

WordPress管理画面の左側にある[投稿]や[固定ページ]メニューから開けます。

編集画面では、テキストを書いたり、装飾したり、画像を入れたり、レイアウトを整えたりしますが、「ブロック」という機能を使って編集作業を行います。

そのため、WordPressで記事(コンテンツ)を編集する機能は「ブロックエディター」と呼ばれています。

WordPressのブロックエディターには「Gutenberg」(グーテンベルク)という名称があります。

クラシックエディターとは

一方、WordPress(ワードプレス)で2018年まで使われていた編集機能は「クラシックエディター」と呼ばれています。

WordPressに「Classic Editor」というプラグインを入れれば、今もクラシックエディターを使うことができます。

プラグイン「Classic Editor」は2022年以降も公式サポートが継続されることになりました。

Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

WordPress公式サイト「Classic Editor」

しかし、Classic Editorは一時期、2021年でサポート終了という話もありました。WordPressの主流はブロックエディターに切り替わっていますので、今後どうなるかは未知数です。

ジュンペイ

今から学ぶならブロックエディターがいいですよ

「ブロック」とは何か?

サイトのコンテンツをブロックに分ける

上の画像は、本記事用に作成したサイトの記事(コンテンツ)です。

記事は、見出しやテキスト、画像などに分類することができます。

このように分類して部品化したものを「ブロック」といいます。

WordPressでは、あたかも部品を組み合わせて物を作るように、複数のブロックを組み合わせてコンテンツを作っていきます。

ブロックエディター画面の見方

WordPress管理画面の左側にある[投稿]⇒[新規追加]メニューをクリックしますと、ブロックエディターの画面が出てきます。

ブロックエディターの画面

「タイトルを追加」というブロックがあらかじめ表示されています。ここに記事のタイトルを入力します。

画面の上部にいくつかのメニューがあります。右上のメニューは次のとおりです。

画面右上のメニュー機能
①下書き保存編集した未公開記事を保存します
②プレビュー未公開記事を公開したときのイメージが見られます
③公開未公開記事を公開します
④設定記事や各ブロックの設定メニューが表示されます
⑤オプションブロックエディター画面の表示スタイルなどを変更できます
画面右上のメニュー

ブロックの呼び出し方

ブロックエディターの画面

ブロックエディター画面の「」マーク(上の画像の①または②)をクリックします。

ブロックのメニュー画面

ブロックのメニューが出てきます。使いたいブロックをクリックしますと、画面に追加されて編集できるようになります。
(上の画像は①をクリックした場合)

それでは、記事作成によく使われるブロックの操作方法を見ていきましょう。

見出し・テキストを作る方法

どのブロックを使う?

見出しブロック

見出しの作成には見出しブロックを使います。

ブロックメニューの「見出し」をクリックしますと、画面に見出しブロックが追加されますので、見出しを入力します。

段落ブロック

テキストの作成には段落ブロックを使います。

ブロックメニューの「段落」をクリックしますと、画面に段落ブロックが追加されますので、テキストを入力します。

ブロックエディター画面に表示されているブロックは初期設定で段落ブロックになっているため、そのまま入力しても大丈夫です。

段落ブロックの使い方

段落ブロックにテキストを入力するとき、1つの段落内にまとめるか別の段落に分けるかで入力方法が異なります。

1つの段落内にまとめる場合

テキストを1つの段落内にまとめる場合

テキストを改行するときに「Shift+Enter」を押しますと1つの段落が続きます。

別の段落に分ける場合

テキストを別の段落に分ける場合

テキストを改行するときに「Enter」を押しますと別の段落になります。

段落を続けるか分けるかの判断はテキストの内容によりますが、読みやすくするなどの目的で空白を作る際は段落を分けても問題ありません。

見出し・テキストの装飾方法

見出し・段落ブロックを装飾するには、各ブロックにカーソルを合わせるとメニューが出てきます。

見出しブロックのメニュー
段落ブロックのメニュー

各ブロックの上部に表示されるツールバー画面の右側に表示されるメニューがあります。

右側のメニューは画面右上の「設定」アイコンをクリックすると出てきます。

上の画像のようにブロック毎のメニューが用意されています。

また、ブロックの上部ツールバー及び右側メニューの項目は、WordPressテーマやプラグインによっても異なります。

基本的な装飾機能は、テキストのレイアウト変更太字にするイタリックにするリンクを貼る色を変える文字サイズを変える、などです。

装飾のほかにもさまざまな機能がありますので、試していただければと思います。

画像を入れる方法

画像を入れるときは主に画像ブロックを使います。

画像とテキストを横並びにしたいときはメディアとテキストブロックを使う方法もあります。

メディアとテキストブロック

メディアとテキストブロックは、左側が「メディアエリア」で画像を入力します。右側の「コンテンツ」にテキストを入力します。

「メディアエリア」に画像を入力する方法として、アップロードメディアライブラリがあります。

アップロードパソコンから画像を新規にアップロードして入力する
メディアライブラリWordPressにアップロード済みの画像を入力する
画像の入力方法

他の記事で使ったことのある画像は、WordPressのメディアライブラリに保存されているため、再度のアップロードは不要です。

画像やテキストの各種設定は、ブロックの上部ツールバー及び右側メニューで行えます。

ブロックのレイアウト方法

ブロックエディター画面に配置したブロックを、レイアウトするのに役立つブロックです。

スペーサーブロック

スペーサーブロック

ブロックとブロックの間の空白を調整します。

カラムブロック

カラムブロック
カラムとは

ブロック(コンテンツ)を横並びにしたり、区分けしたいときに使う技法のこと。

カラムの各列には、画像や段落(テキスト)ブロックを挿入できます。

各カラムに画像とテキストを挿入した例

上記のメディアとテキストブロックを使わず、カラムブロックで同様のレイアウトを作ることもできます。

他のメディアのコンテンツを埋め込む方法

ツイートの埋め込み例

上の画像は、僕のTwitterを記事に埋め込んだ例です。

このように、SNSなど他のメディアのコンテンツを埋め込むブロックが用意されています。

埋め込みができるメディアの一覧

埋め込みブロック

Twitter
YouTube
WordPress
SoundCloud
Spotify
Flickr
Vimeo
Animoto
Cloudup
Croudsignal
Dailymotion
Imgur
Issuu
Kickstarter
Mixcloud
Reddit
ReverbNation
Screencast
Scribd
Slideshare
SmugMug
Speaker Deck
TikTok
TED
Tumblr
VideoPress
WordPress.tv
Amazon Kindle
Pinterest
Wolfram Cloud

主なブロックの紹介

上記で解説しました「段落」「見出し」「メディアとテキスト」「スペーサー」「カラム」ブロック以外で、よく使うブロックを紹介しますね。

リスト

  • リストブロックを挿入します。
  • リストブロックを挿入します。
    • リストブロックを挿入します。

引用

引用ブロックを挿入します。引用ブロックを挿入します。引用ブロックを挿入します。

引用元をここに記します。

テーブル

テーブルブロックを挿入します。テーブルブロックを挿入します。
テーブルブロックを挿入します。テーブルブロックを挿入します。
テーブルブロックの例

画像

WordPressのロゴ
画像ブロックを挿入します。

ギャラリー

ボタン

独自ブロック

WordPressテーマやプラグインによって、独自ブロックが追加されます。

独自ブロックには記事を作るための便利な機能が備わっていますよ。

ジュンペイ

このふきだしも独自ブロックです

当ブログではWordPressテーマ「SWELL」を使っています。

SWELLの関連記事▼

ブロックを簡単に呼び出す方法

段落ブロックに「 / 」(半角スラッシュ)とブロック名を入力すると、ショートカットでブロックを呼び出せます。

たとえば、リストブロックを呼び出したいときは、段落ブロックに「/list」または「/リスト」と入力します。

ジュンペイ

便利ですね

また、見出しブロックにはタグのレベル(H2、H3、H4)毎の呼び出し方がありますよ。

ショートカット呼び出されるブロック
/見出し見出し(H2)
/heading見出し(H2)
## + 半角スペース見出し(H2)
### + 半角スペース見出し(H3)
#### + 半角スペース見出し(H4)
見出しブロックの呼び出し方いろいろ

おわりに

コーヒーのイラスト

ブロックエディターは、最初はとっつきにくいかもしれません。

しかし、慣れていくにつれて便利さを実感できると思います。

とくにWordPressテーマやプラグインの独自ブロックには、優れた機能が多くあります。

最初から全部を覚える必要はありません。

基本的な機能を一通り試したら、あとは使っていくうちに「何ができるか」がわかってくるはずです。

本記事で紹介したリンク

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!
目次
トップへ
目次
閉じる