スポンサーリンク

【WordPress】ブロックエディタ(Gutenberg)の使い方~基本編

WordPress

WordPress5.0から搭載されたブロックエディタですが、旧エディタを使っていた人の中にはこの新エディタは「使いにくい」という人も多く「クラシックエディタ」を使っている人もいます。

私もブロックエディタは使いにくいと思い、旧エディタを使っていました。ですが、「このまま旧エディタを使い続けるのもなぁ」と思うようになりブロックエディタを使うことにしました。

そうことで今更かもしれませんが、今回は「ブロックエディタの使い方」について書いていきます。

スポンサーリンク

ブロックエディタとは

ブロックエディタ(Gutenberg)とは、WordPress5.0から搭載された新しいエディタです。文章や画像などをブロックとして管理できるエディタで、位置やレイアウトがHTMLやCSSの知識がなくても簡単にできるのが特徴です。

きらり
きらり

へぇー!ボクみたいな知識ゼロの初心者でもできるってことだよね。

結耶
結耶

そうだね。私もちゃんと使うまでは「使いにくい」って思ってたけど覚えてしまえば楽だと思うよ。

ブロックエディタは文章や画像などをブロックとして記事に配置できます。使い方を覚えれば効率よく記事を書くことができます。

ブロックエディタの基本的な使い方

ではブロックエディタの基本的な使い方を説明します。

ブロックの挿入

実際に記事にブロックを挿入してみましょう。例として「見出しブロック」を挿入します。

画面左上にあるをクリック。

クリックするとブロックの一覧が表示されます。「見出しブロック」を探して(または検索)クリックしてください。

クリックすると見出しが記事に挿入されます。見出しの内容を入力すれば挿入完了です。

設定を変える

きらり
きらり

結耶、見出しを「h3」にしたいんだけど…見出しブロックは「H2」の見出ししか出てこないよ。どうしたらいいの?

結耶
結耶

『見出しブロック』のデフォルトは「H2」だからね。「H3」に変える設定をしよう!

見出しは「H1」「H2」「H3」…とあります。
他のブロックにもいろいろ設定が必要なものもあります。
ブロックの設定は対象のブロックを選択した状態で右上にあるをクリックしてください。

画面右側に以下のような設定が表示されます。「見出し」の場合は変更したいレベルを選択してください。

また各ブロックにクラスを指定したい場合は、「高度な設定」の中に『追加CSS クラス』という項目があるのでクラス名を入力してください。

きらり
きらり

あっ!なるほど~!こうやって変えるんだね!

結耶
結耶

そうそう。簡単でしょ?

ブロックの削除

挿入したブロックを削除する場合は、削除したいブロックを選択して上に表示されるツールの一番右にあるをクリックしてください。

ブロックを削除』をくりっくするとブロックを削除できます。

ブロックの複製、移動

ブロックを移動したい場合は対象のブロックを選択した状態で上のツールの左にある「」「」で移動できます。

ブロックを複製する場合は、上のツールの一番右のをクリックすると「複製」とあるのでクリックしてください。

「下書き保存」「プレビュー」

右上に『下書き保存』『プレビュー』ボタンがあるので途中で保存したい場合は『下書き保存』、表示の確認をしたい場合は『プレビュー』で確認してください。

投稿設定と公開

カテゴリーやタグ、アイキャッチ画像などの投稿設定は右上のをクリックしてください。

ブロックが選択されているとブロックの設定が表示されます。¥その場合上の「投稿」タブをクリックすると投稿の設定に切り替わりカテゴリーやタグなどの設定ができます。

記事を公開するには公開するをクリックすると記事を公開することができます。

結耶
結耶

ブロックエディタにはいろいrな機能があるけど…基本的な使い方はこんな感じかな~。

きらり
きらり

ボクも難しそうって思ってたけど覚えると便利だね!
ちょっと記事書くのが楽しくなってきたよ!

HTML編集

ブロックエディタのデフォルトは『ビジュアルエディタ』です。
画面右上のをクリックするとビジュアルエディタの他に『コードエディタ』というのがあります。

『コードエディタ』を選択すると記事がHTMLで表示されます。

ブロック単位でHTML編集

『コードエディタ』は記事全体がHTMLで表示にすると目的の場所を探さなくてはいけません。
ですが、ブロックエディタの場合、HTML編集したいブロックだけをHTML表示に切り替えることができます。

HTMLで編集したいブロックを選択して、左上のをクリック。メニューの中の『HTMLとして編集』をクリックすればブロック単位でHTMLで表示され編集することができます。

元に戻す場合は同じようにをクリックして『ビジュアル編集』をクリックすれば戻ります。

結耶
結耶

ちょっとしたHTML編集が簡単にできるね!

きらり
きらり

そうだよね~!逐一コードエディタに切り替えて探さなくて住む~w

最後に

今回はブロックエディタの基本的な使い方を書いてみました。私もブロックエディタは最近やっと使い始めたばかりですが、思ったより難しくなく便利です。

クラシックエディタのビジュアルエディタは私にはちょっと使いづらく私はテキストエディタで記事を書いていました。

ですがブロックエディタではビジュアルエディタの方が断然使いやすいです!

まだブロックエディタを使っていない方は一度使ってみてください(*^^*)

結耶
結耶

ブロックエディタにはまだまだな便利なk使い方があります。
今後もブロックエディタの使い方について記事に書きたいと思います。

きらり
きらり

結耶!頑張って覚えてボクに教えてねぇ。

結耶
結耶

きらりは勉強する気ないんだね。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM