【WordPress】グーテンベルグってなに?【初心者向け】

グーテンベルグ ブログ

簡単で高性能なテキストエディタgutenbergを使おう

こんにちは。

この記事はWordpressでブログを書いていて、もっと簡単に記事が書けたらなと思っている人に読んで欲しいです。

簡単操作で直観的に記事を作成できるブロック型エディタGutenberg(グーテンベルグ)を紹介します。

Gutenberg(グーテンベルグ)って知ってましたか?

グーテンベルグはみんな知ってて当たり前なのかも知れませんが、僕はずっと知らなかったので同じようにグーテンベルグって何?知らないっていう方のためにこの記事を書きます。

知らないって本当に損ですから。

スポンサーリンク

ブロックエディタ グーテンベルグとは

グーテンベルグはブロック型エディターを採用しています。

グーテンベルグはWordpress5・0から採用されたテキストエディタのことです。

ブロック型エディターとはその名の通りブロックを積み重ねて記事を作り上げていくようなイメージです。一般的な「H2見出し」「本文」「画像」という構成なら下の画像のようなイメージになります。

ブロック型エディタのイメージ

様々なブロックを好きなように積み上げることで専門知識がなくても、リッチなコンテンツを作成することが可能になります。

ブロックなので下の画像のようにブロックをくるくる移動することが出来ます。赤く囲んだ矢印をクリックすると黄色く囲んだ段落ブロックと入れ替わります。

これは嬉しい機能です。

矢印クリックで
ブロックが一瞬で入れ替わりました
ブロックごと入れ替えることができます。

ちなみに記事作成が簡単なnoteの記事はブロックエディターです。noteみたいに簡単に記事を作りたいとう人はすぐにでもグーデンベルグを使ったほうがいいですね。

それではWordpressのエディターグーテンベルグの使い方について説明します。

グーデンベルグの公式サイトです。

新しい Gutenberg 編集エクスペリエンス
コードネームは「Gutenberg」、WordPress の新しい編集エクスペリエンスが現在開発中です。詳細をお読みの上、テストしてみてください。

グーデンベルグ インストール

グーデンベルグを使うにはWordpressのプラグインをインストールする必要があります。ダッシュボードのプラグイン→新規追加をクリックします。

Gutenbergで検索すると出てきますのでインストールして有効化します。

これでOKです。

グーデンベルグで記事作成

新規投稿をするとこのような画面になります。
今までとは様子が違い過ぎて少し戸惑いますがすぐ慣れます。

タイトルを付ける

やることは今まで通り。

タイトルを付け、見出しを作り、、記事を書き、装飾する。

まずはタイトルを付けます

ブロックを積み重ねて記事を作る

タイトルを書いたらブロックを積み重ねてコンテンツを作成していきます。
ブロックの追加をクリックしましょう。

よく使うもの、一般ブロック、フォーマット、レイアウト要素、ウィジェット、埋め込みと並んでいます。

ブロックをクリックするだけで段落ブロックや見出しブロックなどが自動に作られるので上のほうで書いたように、知識無しでリッチなコンテンツが簡単に作ることができるのです。

タイトルを付け、ブロックで記事を構成してブロックで装飾し、公開が記事作成の流れになります。

パーマリンク、カテゴリー選択、アイキャッチ画像選択は文書をクリックすることで出来るようになります。

次は簡単にブロックを説明していきます。

一般ブロックの説明

一般ブロックは使用頻度の高いブロックが多いです。

一般ブロックだけでも十分に記事が書けそうです。

段落 <p>タグ

文章を入力します。段落ブロックはブロックを選択しなくても文章を入力するだけで出ます。

見出し <H2>タグなど

見出しを入力します。

何度でもH2 H3 H4を選択しなおせます。

画像 <img>タグ

画像を挿入します。

クラシック

旧エディターを使用してブロックを作成することが出来ます。

ギャラリー

ボックス内に複数の画像を挿入します。

リスト <ul> <ol>タグ

リストを作成します。番号無し、番号付きを選択できます。

引用 

引用ブロックを作成します

引用を入力します

https://the-technorogy.com/

音声

音声ファイルを挿入出来ます。

カバー

背景画像付きのテキストを挿入出来ます。選んだ画像は少し暗く表示されます。

ボンゴレビアンコ食べたい

ファイル

ダウンロード可能なファイルを挿入する。

画像や文書、zipなど様々なファイルを選択出来ます。ファイルを選択するとダウンロードボタンが作成されます。

動画

動画を挿入することが出来ます。

mp4などのファイルをアップロードしたり、URLを入力するだけでYouTube動画を埋め込むことも出来ます。

加圧シャツロングバージョン

フォーマット ブロックの説明

HTMLなどさらに表現を広げるブロックです

カスタムHTML

カスタムHTMLコードを入力できます。プレビューを見ながら作業することが出来ます。

HTMLについて少し知識があると楽しくなります。

関連記事

ソースコード

HTMLコードを変換せずそのままテキストとして表示します。

このように入力すると

このように表示されます。

<a href="https://the-technorogy.com/">ブログのテクノロジー</a>

整形済み

改行やスペースなどをそのまま表示する

こう入力すると

こう表示されます。

改行や
  スペースなどを  そのまま  
                      表示する

プルクオート

テキストの引用に特別な強調を加えます。インパクトのあるブロックを作れます。

引用に特別な強調

https://the-technorogy.com/

表の挿入。チャートとデータの共有に最適です。

列数2の行数2の表は

こうなります。

6列6行だと

こうなりますね。

詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。

詩を書くことが出来ます。  横スクロール機能が付いているのでいつもと違った表現ができますね。  詩を書く才能があれば喜べたのかも知れぬ。

レイアウト要素 ブロック説明

レイアウトを整えるためのブロックです。

ボタン

ボタンスタイルのリンクで訪問者に行動を喚起しましょう。

背景色を変えたり
文字色を変えたり
ボタンの角を付けたり丸くしたり出来ます。

メディアと文章

画像と文章を横並びのリッチなレイアウトにします。

グーテンベルグ、便利な機能多すぎてブログ書き終わらない

PCでは思い通りに表示されましたがスマホで見るとバランスが崩れていました。工夫が必要ですね。

カラム

複数のカラムのレイアウトでブロックを表示します。

3カラムのレイアウトです。上の画像のレイアウトでは一番右のものになります。

カラムってすごいですね。

工夫しだいでこれはかなり遊べそうです。

スマホでは縦に並ぶだけでカラムがどうした?ということになってしまいます。

続きを読む

アーカイブに表示する抜粋分を設定する。

ネットニュースなんかでよくあるやつですね。

改ページ

コンテンツを複数のページに分けて表示します。

このブロックを境にコンテンツが別ページに分割されます。

区切り

水平の区切りを使ってアイデアやセクションの間で改行します。


スペーサー

ブロックの間に高さをカスタマイズ。可能な余白を追加します。

グループ

他のブロックをグループ化したブロック。

グーテンベルクすごすぎる

グループでまとまって移動できます。

グループ化、この機能は素晴らしいですね。

見出しと段落と画像をひとつのグループにまとめてあります。

便利すぎます。

関連記事。グループ化についてです。

ウィジェット ブロックの説明

ウィジェットを記事内に設置するためのブロック。

ショートコード

WordPressショートコードで追加のカスタム要素を挿入します。

アーカイブ

記事の月別アーカイブを挿入します。

カレンダー

このサイトの投稿カレンダーを挿入します。

カテゴリー

全てのカテゴリーをリスト表示します。

最新のコメント

最新のコメントを表示します。

最新の記事

最新の記事を表示します。

RSS

RSSまたはAtomフィードからの投稿を表示します。

検索

訪問者がコンテンツを見つけられるよう手助けしましょう。

タグクラウド

タグ・クラウド はタグの視覚的記述を指す。テキストデータの斬新な視覚表現であり、通常はWebサイトでキーワードメタデータを描写したり、自由形式のテキストを視覚化するが、通常タグは単一の単語であり、各タグの重要性はフォントサイズまたは色で示される。

ウィキペディア

埋め込み

動画やSNSなどサイト外のコンテンツを埋め込む。32種類のブロックがあります。

旧エディタよりも簡単に様々なコンテンツを埋め込むことが出来ます。

いくつか埋め込んでみます。

YouTube動画を埋め込む

YouTubeの動画URLを貼り付けて埋め込みます。

加圧ロマンチック

ツイッターを埋め込む

旧エディタとは違い、ツイートの埋め込みコードではなくURLを入力するのでURLをコピーして貼り付けてください。

Wordpressの記事を埋め込む

WordPressの記事のURLをコピーして貼り付るとブログカードが表示されます。

Instagramの投稿を埋め込む

旧エディタでは面倒だったインスタグラムの投稿の埋め込みも簡単に出来ます。

インスタグラムの投稿の・・・ボタンをクリックしてリンクをコピーして貼り付ければいいだけです。

グーテンベルク まとめ

グーテンベルグ、まだまだ便利な機能がありますがブロックの説明が出来たのでとりあえずここでまとめます。

今回伝えられたのは

  • グーテンベルグとはWordpressのブロック型エディタ
  • 様々なブロックを作成し、それを自由に入れ替えて直観的な操作が出来る
  • グループ化機能は最強。
  • 知識が無くてもリッチなコンテンツを作成できる。
  • 埋め込みが簡単すぎる。

旧エディタとグーテンベルグ、好きなほうを使うのがいいと思います。

ここまで長い記事を書くのは初めてで疲れましたがこの記事が誰かの役に立てたのならそれだけで満足です。

長くなりましたが最後まで読んでいただきありがとうございました。

コメント

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