WordPress 初めてのブロックエディタ―でテーブル作成

前回WordPress の設定でクラシックエディタ―からブロックエディタ―への切り替え手順を紹介しました
ブロックエディタ―は WordPress 5.0 から標準搭載された新しいエディターです。
テーブル(表)の作成が簡単にできるようなので切り替えました。

この記事を書いているときは、まさに初めてブロックエディタ―を使っている状態で、タイトルは入力できたのですが、文字を修飾するボタンなどがなく戸惑いました。
今回はブロックエディタ―初心者の筆者が、実際に記事を書きながら学んだことを紹介します。
※ WordPress は 6.1.1 、Cocoon は 2.5.3、OS は Windows 10 です。

テキストの入力

タイトル下の入力欄にテキストを入力するとおなじみのテキスト修飾用のボタンたちが表示されほっとしました。
表示されなくなってもテキストの一部を選択すると再表示されます。

WordPress ブロックエディターで空欄にテキストを入力すると装飾するボタンなどが表示されます。

画像(キャプション)の挿入

画像も編集中のページの行を選んで、ドラッグ&ドロップするだけで追加されました。
その画像をクリックすると、左上に画像用のメニューが表示されました。
キャプションをつけたい場合は、下側にある [キャプションを入力] というプレースホルダーのテキストのところに直接テキストを入力できます。

WordPress ブロックエディタ―に画像を追加したあとの画像メニューの表示とキャプションの追加の手順

テキストの行を見出しにしたい場合はその行を選択して一番左側の 下図(2) [P を水平反転したような] ボタンをおし、プルダウンリストから [見出し] を選択すると H2 の見出しが出来ました。
H2 以外に変えたい場合はその行のテキストをクリックすると上に表示されるメニューの H2 ボタンを押してプルダウンから選択できます。

WordPress ブロックエディタ―でテキストを見出しに修飾する方法

テキストと画像と見出しをとりあえず入力できてほっとしました。
感覚的には、上から順にテキストのブロック(かたまり)や画像のブロックを追加している感覚です。
クラシックエディタ―の段落が、ブロックに置き換わった感じがします。
また^のようなボタンで上下にブロックを入れ替えて移動できるのも便利です。

テーブルの作成

ブロックエディタ―の左上などにある [+] ボタンを押してプルダウンメニューの [テーブル] を選択します。

WordPress ブロックエディタ―左上などの+ボタンのプルダウンからテーブルを選択します。

テーブルを追加する部分に、テーブルを作成するインターフェースが表示されるので、列と行の個数指定して [作成] ボタンをおして、空のテーブルを作成します。

WordPress ブロックエディタ―でテーブルを作成する手順

テーブルへのテキストとインライン画像の挿入

空のテーブルのセルを選択してテキストを入力することができます。
画像をいれたい場合は、いれるセルを選択したあと、上にあるメニューの 下図(2) ▽のようなボタンを押し、プルダウンメニューから [インライン画像] を選択します。

WordPress ブロックエディタ―のテーブルにインライン画像をいれる際のメニュー選択

クラシックエディタ―でも使っている [メディアまたはアップロード] ダイアログが表示されるので、アップロード済みの画像ならば [メディアライブラリ] タブの画像の中から選択し、まだアップロードしていない場合[ファイルをアップロード] タブに切り替えてアップロードしてから選択します。

WordPress ブロックエディタ―のテーブルに挿入するインライン画像のアップロードと選択

選択した画像がテーブルのセルの中にインライン画像として挿入されました。

画像が小さいと思った場合などは、インライン画像をクリックすると幅を数値で指定してサイズを変えられます。

WordPress ブロックエディタ―のテーブルのインライン画像の幅を変えられます。

まとめ

WordPress 5.0 から標準搭載されたブロックエディタ―を初めて使いました。
まだ不慣れですが、見出し・テキスト・画像(キャプション)を扱うことは簡単にできました。
また、クラシックエディタ―では筆者には作成できなかったテーブルの作成も簡単で、表の中に画像をいれることもできました。
これからもブロックエディタ―の使い方を習い、役に立つことがあれば紹介したいです。

参照サイト Thank You!

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました