世界中で多くのウェブサイトを動かしているCMS「WordPress」ワードプレスは、12月06日にメジャーバージョンアップを迎え、バージョンが5.0となりました。
バージョン5.0となり、その大きな変化として、投稿や固定ページを編集する画面であるエディタが大きく変わりました。
新しいブロックエディタ(Gutenberg グーテンベルク）は、今ままでのエディタとどう違うの？
新しいエディタの名前は、ブロックエディタといいます。
その名前が表すように、「ブロック」と呼ばれる要素を組合せて、記事コンテンツを書いていくようになります。
「ブロック」には、「段落」「見出し」「画像」「テーブル」などといった様々な種類が用意されています。
この記事では、新しいブロックエディタ(Gutenberg グーテンベルク）の使い方を見ていきます。
ブロックエディタ(Gutenberg グーテンベルク）の使い方を簡単に紹介
大きく変わったインターフェース。
旧エディタ
ブロックエディタ
(Gutenberg グーテンベルク）
記事を書く画面はこのような感じで、旧エディタに比べると大きく変わったことが分かります。
あまり変化が見られない「タイトル」
まずは、タイトルを入力。
「タイトルを追加」と書かれているところに、タイトルを入力します。
これは、旧エディタとあまり変わりませんね。
「文章入力」は、そのまま普通に入力するだけ
次は、文章を入力します。
「文章を入力、または / でブロックを選択」 と書かれた箇所にクリックすると、左側に＋マーク、右側にアイコンが表示されます。その状態で文章を入力していきます。
そして、文章を入力すると、ブロックに文章が入りました。文章が入力されたことで、段落ブロックというブロックになりました。
文章を一段落入力したので、ENTERキーを押してみます。すると、次のブロックが作成され、新しいブロックに移動します。
旧エディタより使い勝手が良くなった画像挿入
では、次は画像でも挿入してみましょう。
新しいブロックの上を右にカーソルを動かしていくと、「画像を追加」のアイコンが出てきます。
この「画像を追加」アイコンをクリックします。
すると、画像ブロックになるので、画像を選んで挿入していきます。
ブロックの塊で要素を簡単に移動できて便利になりました
続いて、今さきほど挿入した画像と記事の一番上に表示したいので場所を動かしみます。
ブロックの上にカーソルをおくと、上向きと下向きの三角が表示されます。今回は、上向き三角を押します。
すると、最初に書いた文章と画像と順番が変わり、画像を一番上に表示することができました。
このように、ブロックエディタ(Gutenberg グーテンベルク）は直感的に使うことができる新しい編集体験を提供してくれます。
あなたもブロックエディタ(Gutenberg グーテンベルク）を体験してみよう！
文章や画像で説明するよりも、実際に触って体験してもらうほうが、新しいエディターがどういったものか、より分かってもらい易いかもしれません。
このブロックエディタ(Gutenberg グーテンベルク）を使って、自由に入力して、体験できるサンドボックスが用意されています。
こちらを一度試してみてください。
どうだったでしょうか？
要素を積み重ねて文章を書いていく感覚が、まさに「ブロック」で、その名前に納得されたのではないでしょうか。
ブロックエディターの基本的な使い方
先ほども簡単に紹介しましたが、ブロックエディタ(Gutenberg グーテンベルク）の使い方を、もう少し補足していきます。
新しいブロックを追加する
ENTERキーを押して、あたしいブロックを追加する方法のほかにも、何通りか、ブロックを追加する方法があります。
「文章を入力、または / でブロックを選択」を選択した状態で、新しいブロックを追加する
右側のアイコン
右側に最近使ったブロックが表示されるので、使いたいブロックのアイコンがあれば、クリックします。
/ (スラッシュ)を入力
また、/ (スラッシュ)を入力して、ブロックを追加できます。
また、/ (スラッシュ)を入力した後に、英語のブロック名を入力すると、追加するブロックを絞り込んで選ぶことができます。
(左記例では、/im と入力することで、画像ブロックを呼び出せた)
ただし、この / (スラッシュ)は半角なので、日本語で文書を書いている時には、ちょっと使い勝手が悪いかもしれません。
左側の + (プラスマーク)
左側に表示される + (プラスマーク)をクリックしても、追加するブロックを選ぶことができます。
ブロックを選択した状態で、新しいブロックを追加する
真ん中の + (プラスマーク)
既に追加したブロックの真ん中に表示される + (プラスマーク)をクリックすると、選択しているブロックの前に新しいブロックを追加できます。
設定ツールバーから追加
ブロックの上部に表示される設定ツールバーの右端にある３点アイコンをクリックすると、ブロックを「前に挿入」「後に挿入」というメニューが表示されます。
エディタ上部から、新しいブロックを追加する
エディタ上部の + (プラスマーク)
エディタ上部の左端に表示されている + (プラスマーク)をクリックしても、ブロックを追加できます。
・ブロック選択した状態で追加する時は、選択したブロックの直下に
・何もブロックを選択してい状態で追加する時は、文章の最下部に
ブロックが追加されます。
ブロックの設定は２か所にメニュー
ブロックを選択すると、ブロックの上部に、設定項目が並んだツールバーが現れます。このツールバーはブロックの種類ごとに異なります。
また、ブロック上部のツールバーの他にも、エディター上部右側にある歯車マークをクリックすると、右サイドバーにブロックの設定項目が更に表示されます。
ブロックを移動する
ブロックを選択すると、ブロック左上に、上向きと下向きの三角が表示されます。この三角マークをクリックすることで、文書の任意の位置にブロックを移動させることができます。
また、複数のブロックを選択した状態だと、それらのブロックをまとめて動かせるので、かなり便利な機能です。
右サイドバーで、文書の設定
これまではブロックに関する使い方でしたが、文章に関する設定方法も見ていきます。
先ほどのブロックの追加設定表示でもふれましたが、編集画面の右上にある歯車マークをクリックすると、本文の編集画面の右側に、設定パネルが表示されます。
そのパネルの「文書」をクリックすると、次の項目を設定できます。
こちらの項目は、ちょっと表示スタイルが変わっただけで、以前と変わらない項目かと思います。
- 文章設定
- 公開状態
- 公開日時
- パーマリンク
- カテゴリ
- タグ
- アイキャッチ画像 など・・・