下記の参考サイト「WordPress5.0の新エディタ「Gutenberg(グーテンベルグ)」の使い方」から、いくつかピックアップしながら投稿見本を作成します。
https://bazubu.com/how-to-use-gutenberg-36143.html
参考サイトは「1.Gutenbergで何が変わったのか」から始まりますが、これは古いエディタとの違いを述べたものとなります。
具体的な投稿の方法については「2.Gutenbergの記事作成の流れ」からご参照ください。現在の投稿画面と若干の相違もありますが、大まかな流れは変わりません。
2-2.コンテンツを作成する
以下、「2-2.」などの見出し冒頭の番号は、参考サイトに準じます。
この「2-2.コンテンツを作成する」の項目の「ブロックの移動、並び替え」については、現在の仕様と少し違っていますので説明させていただきます。
管理画面にログインして、投稿画面を開きます。
既に何か文章やブロックがあることが前提となりますが、見出しでも画像でも段落でも、任意の何かしらのブロックにマウスを合わせるかカーソルを置くかすると出現するメニューをキャプチャーしたものが、以下の画像です。
この出現したメニューの左から2番目、赤枠で囲まれた部分のアイコンにある、上下の矢印を押すと、それぞれ上に移動、下に移動が可能です。
複数をまとめて選択して、一気に順番を入れ替えることもできます。
2-3.記事の情報を設定する
アイキャッチ画像
タイトルの「投稿見本」のすぐ下に表示されているのは、右上の歯車アイコンを押して出てくるメニューの「文書」タブ一番下で設定できる、「アイキャッチ画像」です。
投稿画面の中では右側のメニューの「アイキャッチ画像」の部分にしか表示されませんが、実際の記事ではタイトルの直下のほか、一覧やトップページにもサムネイル(縮小画像)として表示される画像となります。
3-2.段落
普通文章を入力する時に一番使うパーツがこの段落です。大きく段落を空けたい場合はEnterを押すと
このように上に一行空間ができます。反対に、空白は空けずにただ改行だけを行いたい場合はShift+Enterを押すことで
このように改行だけを行うことができます。
3-3.見出し
投稿画面上部、左上の青い+ボタンを押すと、段落や見出し、リストなど様々な内容を投稿することができます。
これはH1の見出しです。
これはH2を選択した見出しテキストです。
通常の投稿で使う「段落」と違い、少し太字、大きめの文字で表現されます。
これはH3の見出しです。
これはH4の見出しです。
これはH5の見出しです。
これはH6の見出しです。
この投稿画面内で表示されている文字の大きさと、実際にサイトで表示される文字の大きさは違いますので、投稿画面の右上にある「プレビュー」で適宜ご確認ください。
3-4.番号なしリスト
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
3-4.番号付きリスト
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
3-5.画像

とても大きなサイズの画像を投稿しても、画面からはみ出すことはありませんが、ユーザーが記事を読む時に、読み込みが遅くなる可能性があります。
3-6.ギャラリー
キャプション例 キャプション例
「ギャラリー」を使うと複数の画像を横並びで表示することができます。画像数が多い場合やスマホの場合もサイズは自動調整されます。
3-7.カバー
カバー写真例です
単色・グラデーションなど
オーバーレイの色も
変更できます
3-8.引用
引用する文章はこのように表示されます。
複数行にも対応しています。段落を空ける場合はEnter、小さく改行だけする場合はShift+Enterすることで実現できます。
yahoo.co.jp(引用元の見本)
3-9.動画
YouTubeであれば、リンクを貼り付けるだけで動画が表示されます。
3-13.テーブル
氏名(中央寄せ) | 年齢 | 郵便番号(右寄せ) |
佐藤太郎 | 30 | 123-4567 |
鈴木花子 | 20 | 987-6543 |
氏名(中央寄せ) | 年齢 | 郵便番号(右寄せ) |
佐藤太郎 | 30 | 123-4567 |
鈴木花子 | 20 | 987-6543 |
スタイルはデフォルトとストライプが用意されています。2番めのテーブルは配置を「中央揃え」にしました。
3-14.整形済み
整形した通り 空白などがそのまま 表示されます
3-15.ソースコード
<p>この中に書いたものはHTMLなどのコードを変換せず、
そのまま表示されます</p>
3-18.詩
私も場合いったいその前後人とともにののうちより起るですん。どうも昨日に話隊はおもにほんの観念んうまでを使いこなすばいるないには留学歩くでしょんて、それほどには行き届いなたんです。招きと見ますのはいかに以後へどうしてもましならで。
改行などそのまま表示されるため、長い文章の場合はスクロールバーが表示されます。
3-19.ボタン
テキスト・色、角丸の半径など、細かい変更が可能です。
3-20.カラム
左右50/50や、3列33/33/33などある程度用意されているカラムからお好みを選んで整形することができます。
すぐ下は、左右50/50の横2列のカラムです。どのカラムもスマホのときには横列が解除されて縦に並びます。
左カラムに入力しているテキストです。
それぞれのカラムの中には動画を入れることもできます。
右カラムに入力しているテキストです。

画像も入れることが可能です。
ここから下は横3列 25/50/25のカラムを表示します。このカラムの中に画像や文章、見出しなどを組み合わせることで様々な表現を可能にします。
左カラムのテキスト
これは25/50/25のカラムです
中央カラムには画像を挿入しました。

右カラムの見出し
右カラムにテキスト
3-21.メディアと文章

画像とテキスト
横並びで表示できます
3-23.改ページ
この機能は未対応です。
3-24.区切り
区切り線です。すぐ下がデフォルト。
この下が幅広線です。色も変更できます。
3-25.スペーサー
いわゆる余白です。文章の一区切りで沢山の余白を空けたい時に利用します。
このように大きな空白を空けることができます。
3-31.埋め込み
YouTubeと同じようにInstagram、Twitterなどはリンクを貼り付けるだけで内容を埋め込むことができますが、複数サービスを埋め込みすると、どちらかが失敗することもあるようです。
最後に、これは普通のリンクです。リンクは「新しいタブで開く」などの設定を行うことができます。
http://www.google.com
外部サイトの場合は「新しいタブで開く」をONにしておくと、ユーザーは元の記事を開いたまま他のサイトを閲覧することができます。
タイポグラフィ
左側メニューの「ブロック」タブには「タイポグラフィ」というメニューがあり、デフォルトの他に以下のサイズが用意されています。
「見出し」とは違い、段落全てを大きく、あるいは小さくする際に利用します。
特大サイズ
大サイズ
中サイズ
標準サイズ
小(小さいサイズ)
パターンなど
投稿画面の左上、青い+ボタンを押して出てくるメニューは、デフォルトで「ブロック」というタブが表示されていますが、その右横には「パターン」という見本も用意されています。
以下はその用意されたパターンを、そのまま編集せずに並べたものです。
高名なる郷士、ドン・キホーテ・デ・ラマンチャの人柄と冒険について
それほど昔のことではありません。その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。羊肉よりも牛肉の方が多めの煮込み鍋、ほとんどの夜食はサラダ、土曜日には臓物、金曜日にはレンズ豆、日曜日には少し贅沢に小鳩を余分に食べ、これで収入の4分の3ほどは消えていました。
残りは休日用の上質な上着、ベルベットのズボン、靴になりましたが、平日の間は最高の手織りの服で勇敢な姿を見せていました。彼の家には、40歳を越えた家政婦、まだ20歳前の姪、そして畑や市場で働く若者がおりました。この郷士はもうすぐ50歳になろうとする年齢で、骨組みは頑丈、肉付きは薄く、細面、たいへんな早寝早起きで、部類の狩猟好きでした。

それならば、この郷士は暇な時 (もっとも、ほとんど一年中暇なのでしたが)、騎士道の本を熱心に読みふけって、狩猟はおろか、財産の管理さえもほとんど完全に忘れるほどだったことを彼らは知っていたに違いありません。さらに彼の情熱は何エーカーもの耕作地を売って読みたい騎士道の本を買い求めるほどで、手に入る限りの本を持ち帰ったのでした。

しかし、それら多くの中でも有名なフェリシアーノ・デ・シルバの作品ほど彼が好んだものはありませんでした。その文章の明晰さと錯綜した論理は、彼の目には珠玉のように思われたからです。特に、文中で恋文や決闘状に出くわしたときには「道理なき道理の前に我が道理の力も弱まり、君が美しさをつぶやくこともまた道理なり」、あるいは「高い天は、君をその偉大さに値する砂漠にふさわしく映す」というような一節をしばしば見つけたからです。
汝は見た
まだ何もありません
2.
才知あふれる郷士ドン・キホーテの最初の旅立ち
これらの準備が終わった後、彼は計画の実行をこれ以上先延ばしにしようとは思いませんでした。正そうとしている過ち、取り消そうとしている不平、修復しようとしている不公平、取り除こうとしている虐待、そして放棄しようとしている義務のことを考え、自分の遅れによってそれだけ世界の損失も大きいとの思いに駆られたのです。

「友よ、サンチョ。向こうに30だか40だかの大きな巨人が見えるか ? 私は彼らと戦い、殺すつもりだ」
— ドン・キホーテ
投稿見本は以上です。
Comments by pwa_admin