Column

ヒラシカ

Wordpress関連

Gutenbergの使い方を覚えよう

2019.01.31

画像

Gutenbergの基本的な使い方は大きく分けて3段階あります。

  • 1. タイトルを入力する。
  • 2. 文章を入力する。または『ブロック』を追加する。
  • 3. ブロックごとに装飾して体裁を整える。

※情報量の多い投稿は2を繰り返し、最終的には3で整えます。

それでは画像とともに説明していきます。

2.1 編集画面の見方について

2.1.1 編集画面上部

編集画面上部 ~左側~

「ブロックの追加※+ボタン」「取り消し」「やり直し」「コンテンツ構造」「ブロックナビゲーション」
■Gutenbergの「ブロック」の追加は『+』ボタンから行います。
「取り消し」「やり直し」は記事作成の補助になります。

■「コンテンツ構造」「ブロックナビゲーション」は記事の構造を見るためのものですので、今回説明は省略します。

※ブロックには様々な種類があります。

3 Gutenbergには、どんなブロックが存在する?をご確認ください。

【編集画面上部 ~右側~】

「下書き保存」「プレビュー」「公開する/更新」「設定※マーク」「ツールと設定をさらに表示※マーク」

プレビュー 現在の記事の表示をブラウザ上で確認します
下書き保存 作成中の記事を公開せずに下書き保存します。
(保存しました、と表示されていれば自動保存済み)
公開 記事をWeb上に公開します
公開する/更新 一度、公開中の記事への変更を更新します。
(記事を公開すると、公開ボタンが更新ボタンになります。)
設定※歯車マーク 設定の表示非表示です。
投稿のステータスやカテゴリ・タグ設定、アイキャッチ画像の設定などが表示されます。
もう一度押すと設定メニューが非表示になります。
ツールと設定をさらに表示
※マーク
エディタの切り替えやヘルプ的な項目を確認できます。

2.1.2 右サイドバー

右のサイドバーには、『文章』と『ブロック』の文字が確認できるかと思います。

『文章』の項目
ステータスと公開状態※1 今、編集しているページの公開状態や公開時期などといった、コンテンツ自体のステータスを確認する事ができます。
パーマリンク※2 パーマリンクはWordPressで作成した投稿ページや固定ページに振られるURLの形式の事です。
WordPressではこのURLを編集することができます。
カテゴリー 編集中の記事が所属するカテゴリーを設定します。
※企業様の場合、『おしらせ』や『採用情報』などが設定されているかと思います。
タグ 編集中の記事にタグを設定できます。
タグを設定することで、共通にキーワードに関連する記事などを探しやすくなるメリットがあります。
アイキャッチ画像 サイトによって使用方法は異なりますが、
一般的に記事一覧などで表示するアイキャッチ画像を設定します。
※メディアライブラリから選択するか、新しい画像をアップロードします。

・抜粋、・ディスカッションの項目は、省略いたします。
※通常の投稿を行う場合は、上記ボックス内を理解するだけで問題はないかと思います。

ステータスと公開状態※1

■公開状態について
管理画面上での公開状態の選択できます。

公開 全ての人に表示されます。
非公開 サイトの管理者と編集者の権限が与えられたユーザーにだけ表示されます。
パスワード保護 任意のパスワードで保護をします。
パスワードを知っている回覧者のみがこの記事を表示できます。
※アメブロなんかで設定されている『アレ』的な機能です。

■公開状態について
■記事を公開する際の公開予約を時間を設定することでできます。

■先頭に固定表示
■Wordpressの記事は基本的には『投稿日時』が新しい順に先頭から表示されます。
ただし、こちらにチェックを入れることで特定の記事を先頭に表示することができます。

パーマリンク※2

記事のパーマリンクを設定します。
URLの入力欄に自由にパーマリンクを記述できます。

『ブロック』の項目

コンテンツエリアでブロックが選択された状態のときに、
該当するブロックに沿った編集を行うことができます。

例)段落の場合
文字サイズや文字の装飾など
※CSSで文字サイズを指定している場合がサイズが変更できない場合があります。

2.1.3 コンテンツエリア

そして中央のエリアがコンテンツ作成エリアです。
ここでコンテンツを作成します。

新規で記事を投稿する場合、『記事タイトル入力欄』と『段落(記事のテキストを入れるブロック)』の2つが用意されています。

余談ではありますが、「コンテンツエリア」内にあるブロックの左端にある『+』ボタンを押すと、
編集画面上部にある『+』ボタンと同様にブロックの追加を行うことができます。

必要に応じて様々な『ブロック』を追加し、そこにコンテンツをいれていく流れになります。


このコラムを書いた人

ヒラシカ

ヒラシカ

more

おすすめのコラム