WordPressブロックエディターって何?基本操作を覚えよう!

WordPressブロックエディターって何?基本操作を覚えよう!

WordPressでブログ始めたけど「ブロックエディター」や「カラムブロック」の使い方がわからなくて立ち止まっていませんか?

実は、私は初めてWordPressでブログ始めた頃は「クラシックエディター」で記事を作成していて、WordPressのバージョンアップと共に今では主流になった「ブロックエディター」や「カラムブロック」に変わったことでブログを書くことを一度やめました。

なぜなら、文書を作成する感覚の「クラシックエディタ」に慣れてしまい、新しい「ブロックエディター」や「カラムブロック」の使い方や利点がわからなかったからです。

この記事を読むとWordPressブロックエディターの基本操作から、カラムブロックの使い方と注意点を理解することができ「ブロックエディター」や「カラムブロック」を使いこなしてブログ記事を作成することができるようになります。

目次

WordPressブロックエディターとは?

Wordpressの画像

ブロックエディターって何?

WordPress5.0から導入された新しい記事編集機能です。

従来のテキストエディターとは異なり、テキスト、画像、動画、ボタンなど様々なコンテンツを表現する「ブロック」と呼ばれるパーツを組み合わせて記事を作成します。

好きなパーツをドラッグ&ドロップで配置していく感覚で、自由度の高いレイアウトを実現できます。

ブロックエディターのメリット

従来のクラシックエディターと比較したブロックエディターのメリットは以下の通りです。

直感的な操作

マウス操作でブロックを追加・編集・移動できるため、初心者でも簡単に使いこなせます。

豊富なブロック

テキスト、画像、動画、ギャラリー、カラム、ソーシャルメディアボタンなど、50種類以上のブロックが用意されており、高度なレイアウトも簡単に作成できます。

レスポンシブデザイン

作成したページは、自動的にスマートフォンやタブレットにも最適化されます。別途スマホ用のデザインを作成する必要がなく、手間をかけずにマルチデバイス対応を実現できます。

高度な機能

複数カラムレイアウト、背景画像設定、アニメーション効果など、高度な機能も備えています。

集中しやすい環境

コード編集の必要がなく、視覚的に記事作成に集中できます。

作業効率の向上

ショートカットキーや一括編集機能など、作業効率を向上させる機能も充実しています。

ブロックエディターの機能

  • ブロックの追加・削除: “+”ボタンをクリックして、様々なブロックを追加できます。不要なブロックは、ゴミ箱アイコンをクリックして削除できます。
  • ブロックの移動: ブロックをドラッグ&ドロップして、自由に配置できます。
  • ブロックの設定: 各ブロックには、個別の設定があります。ブロックを選択して、右側のサイドバーで設定を変更できます。expand_more
  • プレビュー: 作成中のページを、実際にどのように表示されるか確認できます。

ブロックエディターの基本操作

  • ブロックの追加: 「+」ボタンをクリックして、追加したいブロックを選択します。
  • ブロックの編集: ブロックを選択して、内容を変更できます。
  • ブロックの移動: ブロックをドラッグ&ドロップして、好きな場所に移動できます。
  • ブロックの削除: ブロックを選択して、右上の「×」ボタンをクリックすると削除できます。
  • ブロックの設定: ブロックを選択して、右側のサイドバーで設定を変更できます。

カラムブロックの使い方と注意点

ブロックの例えとしての積み木の画像

カラムブロックとは?

カラムブロックとは、複数の列を作成できるブロックです。

コンテンツを並べて表示したり、見やすくレイアウトしたりするのに役立ちます。

カラムブロックの挿入方法

  1. “+”ボタンをクリックして、「カラム」ブロックを選択します。
  2. 検索バーに「カラム」と入力して、カラムブロックを選択します。

カラムレイアウトの種類

  • 2カラム: 2つの列を作成します。
  • 3カラム: 3つの列を作成します。
  • 4カラム: 4つの列を作成します。
  • 左右均等: 左右の列を同じ幅で作成します。
  • 不等幅: 左右の列の幅を自由に設定できます。

各カラムレイアウトの設定

  • 列数: 2〜4列を選択できます。
  • カラム幅: 各列の幅を自由に設定できます。
  • 背景色: 各列の背景色を設定できます。
  • 余白: 各列の余白を設定できます。

カラムブロック使用時の注意点

  • レスポンシブデザイン: 作成したページは、自動的にスマートフォンやタブレットにも最適化されます。ただし、複雑なレイアウトの場合は、スマートフォン等で表示が崩れる可能性があります。
  • コンテンツのバランス: 各列にバランス良くコンテンツを配置する必要があります。
  • 読みやすさ: 見出しや画像などを活用して、読みやすいレイアウトを心がける必要があります。

基本機能解説

段落ブロック

段落ブロックは、文章を入力するための基本的なブロックです。

見出しブロック

見出しブロックは、文章の見出しを設定するためのブロックです。H1〜H6までの6つのレベルを選択できます。

画像ブロック

画像ブロックは、画像を挿入するためのブロックです。

リストブロック

リストブロックは、箇条書きや番号付きリストを作成するためのブロックです。

ブロックがうまく表示されないときの原因と対処法

  • ブラウザのキャッシュ: ブラウザのキャッシュをクリアしてみてください。
  • プラグインの競合: 使用しているプラグインが競合している可能性があります。プラグインを無効化して確認してみてください。
  • テーマの互換性: 使用しているテーマとブロックエディターが互換性がない可能性があります。ご使用されているテーマにもよりますが、テーマの作者に問い合わせてみてください。

以上、WordPressブロックエディターをご紹介しました。

WordPressブロックエディターを使ってたくさん記事を書きましょうね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ペンです。
「ペンギン」のペンと「書くペン」の「ペン」からの「ペン」です。

目次