WordPress5.0から実装（予定）の新エディタGutenbergを使ってみよう

WordPress5.0から実装（予定）の新エディタGutenbergの基本的な部分の使い方をまとめたスライドです。後日動画を作成しますのでご期待ください。

Transcript

1. WordPress5.0から実装（予定）の 新エディタGutenbergを使ってみよう Wordpress5.0がリリースされてからでは遅い。
2. 太田晴信（おおたはるのぶ） 自己紹介 • 1995年フィールドエンジニアとして社会人スタート • ソフトウェア会社でSE・プログラマを約9年 • 佐川急便などに仕事を転々 • 2011年イトーヨーカドーに就職 • 2014年フリーのWordPressエンジニアとして、 Webサイト制作を開 始 • 2017年から社外のWeb担当者としてWebサイトの運用代行を開始 • 戦略的Web運用プロデューサーとして Webサイト のコンサルタント・運用代行を行っています 今ここ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 2
3. 注意 • 今回のスライド作成時はGutenbergプラグインのバージョンが Ver2.2で、作成途中にVer2.3がリリースされました。なので キャプチャーは一部（だいぶ）Ver2.2のままになっています。 • 機能的にはVer2.3で作成してます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 3
4. Gutenbergとは • WordPress5.0から標準掲載予定になっているエディタ（記事入 力画面） • 投稿・固定ページ・カスタム投稿タイプの各投稿の仕方がガラ リと変わります。 • パラグラフ・ヘディング・エディタ、ウィジェット、ショート コード等々の各要素をブロックという形でくぎりレゴブロック を組み上げるような感じでWebページを完成させます。 • 現在はプラグイン（Ver 2.３.0 2018年３月1０日現在）にて配 布。インストール、有効化することで実装可能 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 4
5. Gutenbergプラグイン https://ja.wordpress.org/plugins/gutenberg/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 5
6. Gutenberg使用前 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 6
7. Gutenberg使用後 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 7
8. Gutenbergのブロックとは • 文章、引用文、画像、動画などの各要素をひとつのブロックと して扱い、レゴブロックを組み上げるように、レイアウトを組 みながら記事を作成します。 出展:https://www.webcreatorbox.com/webinfo/gutenberg 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 8
9. Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 9
10. Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 10
11. Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 11
12. Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 12
13. では実際にGutenbergを使ってみましょう 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 13
14. 本番サイトではまだやらないでください • Gutenbergをインストールして動かすのは本稼働しているWebサ イトではまだやらないでください。 • ローカル環境もしくはテストサーバーで試してください 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 14
15. プラグインのインストール • プラグインの「新規追加」からGutenbergをインストールします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 15
16. Gutenbergを検索 • 検索ウィンドウから「Gutenberg」と入力します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 16
17. Gutenbergをインストール • Gutenbergが出てきたら今すぐインストールをクリック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 17
18. Guntenbergを有効化 • Guntenbergを有効化します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 18
19. Gutenbergが有効化されたのを確認 • プラグイン一覧からGutenbergが有効化されたのを確認 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 19
20. Gutenbergのスターターテーマをインス トール • Gutenbergのスターターテーマをインストールします。公式ディ レクトリにはないのでGitHubからダウンロードします。 対応テーマ（テーマ名：Gutenberg） https://github.com/WordPress/gutenberg-starter-theme 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 20
21. GitHubからスターターテーマダウンロード します • ダウンロードボタンを押してスターターテーマをダウンロード します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 21
22. ZIP形式でダウンロードします • ダッシュボードからインストールしやすいようにZIP形式でダウ ンロードします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 22
23. ダッシュボードのテーマを選択します • ダッシュボードの「外観」＞「テーマ」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 23
24. 新規追加します • 「新規追加」ボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 24
25. テーマをアップロードします。 • テーマのアップロードボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 25
26. ファイルを選択します • 「ファイルを選択」から先ほどダウンロードしたZIPファイルを クリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 26
27. アップロードします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 27
28. テーマをインストール • 今すぐインストールをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 28
29. 有効化します • インストールが成功したら有効化します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 29
30. 有効化成功 • 有効化が成功したら反映されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 30
31. テーマが反映された画面 • そっけない画面になります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 31
32. プラグインをインストールすると • プラグインをインストールするとダッシュボードの左のメ ニューに「Gutenberg」というのができます。デモというのがあ り、どんな感じで編集画面が構成されるのか確認することがで きます。デモを見てみましょう。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 32
33. Gutenbergのデモ • デモその1 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 33
34. Gutenbergのデモ • デモその２（スクロールを下のほうにする） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 34
35. 新規投稿 • ダッシュボードの「投稿」＞「新規投稿」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 35
36. 投稿画面 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 36
37. ヘッダー部 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 37
38. ⊕ボタン • ⊕ボタンをクリックするとブロックを新しく追加できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 38
39. Recent(最近） • Recentタブは最近使ったブロックが表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 39
40. Block（ブロック） • Blockでブロックを選択できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 40
41. Embeds(埋め込み） • EmbedsでFacebook、YouTubeなどを埋め込むアイテムを選択し ます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 41
42. Save(保存） • Saveは保存したブロックを選択できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 42
43. Search for a block(ブロックの検索) • ブロックが見つからない時に検索で探し出すことができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 43
44. ひとつ前に戻る • 左上の をクリックすると一つ前の状態に戻ります。間 違えたときとかに使います。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 44
45. ひとつ先に進む • 左上の をクリックすると一つ先の状態に進みます。戻 りすぎたときとかに使います。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 45
46. ヘッダー（右部） • ヘッダーの右はこのようになってます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 46
47. 下書き保存 • 「Switch to Draft」は下書き保存します。この段階では公開ま たは更新はされません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 47
48. 歯車のボタン • 歯車のボタンで右側の設定エリアを消したり出したりできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 48 右側の設定部を消えた
49. 歯車ボタン • もう一度押すと設定エリアが表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 49 表示部が表示された
50. 点3つボタン • 点3つ「…」部分をクリックするとエディタの変更などが設定 できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 50
51. 点3つ「…」（Editor) • Visual EditorとCode Editorが変更できます • デフォルトではVisual Editorになっており、 Code Editorをク リックするとコードが入力できるエディタに代わります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 51
52. Code Editor • Code EditorをクリックするCode Editorに変わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 52 コードエディタに変更
53. 点3つ（Setting) • SettingはToolbarをトップに固定して設置しておけます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 53
54. Toolbarをトップに固定 • ブロックのToolbarがヘッダー部分に固定されました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 54
55. 記事（コンテンツ）入力部 • タイトルを入力欄があるのでタイトルを入力します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 55
56. 記事の入力 • タイトルと文章を入力します。デフォルトでParagraghがあるの でそこに記事を入力してみます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 56
57. ブロックのタイプを切り替えます • 一番左のタブはブロックのタイプを切り替えます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 57
58. 文字を左寄せします • 文字をブロック内で左寄せします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 58
59. 文字のセンタリング • ブロック内で文字をセンタリングします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 59
60. 文字の右寄せ • ブロック内で文字を右寄せします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 60
61. 文字を太字する 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 61 • 文字をドラッグして太字にします。ドラッグした部分が太字に なります。
62. 文字を打ち消す • 文字をドラッグして打消しにします。ドラッグした部分が線が 入ります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 62
63. リンクを貼る • 一番右側のチェーンのボタンはリンクです。クリックすると 「Paste URL or type」というウインドウがでます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 63
64. リンクを貼る • 「Paste URL or type」のところにジャンプしたいURLを貼りま す。矢印ボタンをクリックします。 以前のようにあたらしいタブ を増やすとかの選択はなく なった様子です 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 64
65. リンクを貼る • ページを見るとリンクになっています。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 65
66. リンクを貼る • リンクをクリックすると指定したページに飛びます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 66
67. 記事をテキストからコピーする場合 • 記事をテキストからコピーする場合、ブロックごとに改行を入 れておくことでコピーしたときブロックに分割されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 67
68. 記事をテキストからコピーする場合 • ⊕でParagraphのブロックを作成して起き、ブロックにコピーし たものをペースト（貼り付け）します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 68
69. 記事をテキストからコピーする場合 • 改行で区切ったもの一つ一つがブロックに分割されています 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 69
70. 見出しはH2タグに変更します • すべてParagraphになるので、見出しはHeadingブロックに変え ます。 • Heading以外にもQuoteなどにも変更できますので、適宜変更し てください 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 70
71. 見出しはH2タグに変更します • H2を選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 71
72. 見出しを全部H2に • 見出しを全部H2にしました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 72
73. Publish(公開） • 右上にある をクリックすると公開されます。 • Publishは2段階で公開されます。1回クリックするとウィンドウ が表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 73
74. Public • Publicのテキストリンクをクリックすると一般公開、私的公開、 パスワードの設定が選べます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 74
75. 表示日時 • 日時をクリックするとカレンダーが表示され日時を設定できま す 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 75
76. もう一度Publish • もう一度 をクリックすると公開されます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 76
77. 公開すると • 公開すると書きウィンドウが出ます パーマリンクがコピーで きます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 77
78. プレビュー • 右上の をクリックするとプレビューされます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 78
79. Update(更新） • 一度上げた記事の更新は1段階です。 • を1回クリックするだけです。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 79
80. Document • 右側の設定エリアには「Document」と「Block」があります。 • 「Document」では記事にいろいろな設定をします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 80
81. Status&Visiblity • Status&Visiblityでは、現在のステータスの状況表示状況を設定 します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 81
82. Visiblity • Visiblityでは表示の一般公開、私的公開、パスワード公開が表示 され変更できるようになります。 • Publicの部分をクリックすると変更できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 82
83. Publish • Publishでは公開された日時を表示します。 • 日時をクリックするとカレンダーが出て日時を変更できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 83
84. Post Format • Post Formatは投稿のフォーマットが設定できます。クラッシッ クエディタにもありました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 84
85. Stick to the Front Page • Stick to the Front Pageをオンにするとトップページの先頭に固 定で表示されます。 • 投稿一覧で先頭に固定で置かれていることが分かります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 85 Stick to the Front Page
86. Revision • WordPressはもともとRevision機能がデフォルトでついてます。 自動保存してますので、前の状態に戻したいときに使います。 • RevisionをクリックするとRevision画面に遷移します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 86
87. Category&Tag • Category&Tagではカテゴリーとタグの設定ができます。ここは クラッシックエディタと操作の違いはほとんどありません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 87
88. アイキャッチ画像 • アイキャッチ画像が追加できるテーマの場合、アイキャッチ画 像が設定できます。 • 操作はクラッシックエディタとほとんど違いはありません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 88
89. Excerpt • Excerptは抜粋を書きます。抜粋は投稿内容から自分で作成する 要約で、テーマの中で使用できます (オプション) • 詳しい使い方は Learn more about manual excerpts(opens in a new window)をク リックしてマニュアルを読んで ください。 • クラッシックエディタでは表示オプションをオンに する必要がありましたが、Gutenbergはデフ ォルトでつくようです。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 89
90. Discussion • ディスカッションでは投稿にコメントやピンバックなどを受け 付けるかを設定できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 90
91. Table of Contents • ブロックの構造がリスト化されて見られます。ただ DreamweaverのDomパネルのようにここでブロックの追加や移 動はできません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 91
92. リスト構造の確認 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 92 • 左上の をクリックするとブロックのリスト構造が表示 されます。ブロック数、単語数なども表示されます。
93. Blockの設定 • 右側にある設定エリアのタブをBlockにすると各ブロックの設定 ができます。 • ブロックによって設定できるものは違い ます。ここではParagraphを例にご紹介 します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 93
94. Drop Cap • Drop CapをONにするとブロックの先頭の文字を大きくできま す。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 94
95. Font size • Font Sizeでフォントサイズを変更できます。数字を打ち込むだ けでなくスライダーでも設定できます。Resetでデフォルトの 大きさに戻せます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 95
96. Background color • Background colorでブロックのバックカラーを変更できます。 • •の部分をクリックするとその色になります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 96
97. Background colorの設定 • Background colorの一番右のカラフルな•をクリックすると色を パレットから選択ができます • 3種類の数値で指定することもできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 97
98. Background color • このようにバックカラーが変わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 98
99. Text color • Text colorで文字カラーを変更できます。変更の仕方は Background colorと同じです。ブロック内全部の色が変わってし まい、ブロック内の一部を色を変えることは、現在はできない 様子です 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 99
100. Block Alignment • Block Alignmentブロックのアライメントを変更できます。 • 左まわり、右回り、ワイド、横幅いっぱいなどが設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 100
101. Block Alignment（左回り） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 101 • ブロックが左により下のブロックが右に入ってきます。
102. Block Alignment（ワイド） • ブロックの横幅が広がります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 102
103. Block Alignment（横幅いっぱい） • ブロックが横幅いっぱいに広がります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 103
104. Additional CSS Class • ブロックに独自のクラスを入れられます。CSSで指定してデザ インなどで使えます • 試しに「firstcontent」と入れてアップデートしてみます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 104
105. Additional CSS Class • Code editerっでみると「class=“firstcontent」がついてます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 105
106. ブロックの右上にある… • ブロックの右上にある…を縦にしたのをクリックするとエディ タの変更、ブロックの削除、ブロックの変更などができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 106
107. 見出しの部分のBlock • 見出しをBlockの設定は「h1,h2など」にくわえて、「左寄せ、 センタリング、右寄せ」と「HTML Anchor」というのがありま す。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 107
108. 見出しの左寄せ、センタリング、右寄せ • で左寄せ、センタリング、右寄せがえらべま す。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 108
109. HTML Anchor • HTML Anchorではアンカーテキストを設定できます。 • ためしに「anchor1」と入れてアップデートします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 109
110. HTML Anchor • idに「anchor1」が入りました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 110
111. HTML Anchor • 別の単語のリンク先を#anchor1にします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 111
112. HTML Anchor • ページを表示させて先のリンクをクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 112
113. HTML Anchor 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 113 • 先ほどの「anchor1」を代入した見出しにジャンプします
114. Convert to Reusable Block • ブロックの右上の…の部分にある「Convert to Reusable Block」 でブロックのセーブができます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 114
115. ブロックに名前を付ける 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 115 • Convert to Reusable Blockをクリックするとブロックに名前を付 ける欄が表示されます。Editをクリックします。
116. ブロックに名前を付ける • 適当に名前を付けてSaveします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 116
117. Saveに表示される 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 117 • をクリックして「Save」タブを開くと先ほど保存したブ ロックが表示されます
118. Saveしたブロックを追加 • Saveしたブロックを追加するとコンテンツごと追加されます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 118
119. ブロックを上のブロックと上下を逆にす る。 • ブロックの左側にある＾をクリックするとブロックが一つ上に 上がります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 119
120. ブロックを上のブロックと上下を逆にす る。 • このように上下が入れ替わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 120
121. ブロックを下のブロックと下上を逆にす る。 • ブロックの左側にあるvをクリックするとブロックが一つ上に 上がります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 121
122. ブロックを下のブロックと下上を逆にす る。 • このように上下が入れ替わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 122
123. 画像の挿入 • Imageを選択すると画像が挿入できます。下の絵のようにアッ プロードすることとライブラリから選ぶことができます。今回 はアップロードしてみます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 123
124. 画像の挿入 • Uploadをクリックすると画像が選択できるウィンドウが出ます。 選択して開くボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 124
125. 画像の挿入 • 画像が挿入されました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 125
126. 画像の左寄せ・右寄せ • 文字同様、左寄せ・右寄せができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 126
127. 画像のワイド・横幅いっぱい 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 127 • ワイド・横幅いっぱいにもできます
128. Edit image Insert link • 画像の編集やリンクの挿入もできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 128
129. テキスト代替 • 代替えテキストは右側の設定エリアでできます。「fuji」と入れ てみました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 129
130. テキスト代替 • コードエディタで見るとalt＝“fuji”がはいりました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 130
131. Size • Sizeを変更できます。サムネイル、ミディアム、ミディアム ラージ、フルの4つから選べます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 131
132. Caption • 画像には説明文が書けますWrite captionの部分に書くことがで きます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 132
133. Caption • このように書けます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 133
134. Gallery • Galleryをクリックすると画像群を組むことができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 134
135. Gallery • 画像を複数枚同時に選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 135
136. Gallery • 選んだ画像が一つの群として表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 136
137. Gallery カラム数 • 右の設定エリアでカラム数を変更することができます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 137
138. Gallery （Link to） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 138 • 画像をクリックしたときの表示の仕方をアタッチメント、メ ディアファイルから選べます
139. Gallery （Link to） • アタッチメントを選ぶと画像のように表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 139
140. Gallery （Link to） • メディアファイルを選ぶと画像のように表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 140
141. ボタン • クリックボタンなども設置できます。ブロックの中から 「Button」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 141
142. ボタン • ボタンを選ぶと下の画像のようなボタン領域ができリンク先が 設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 142
143. ボタン • クリック先のURLを指定します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 143
144. ボタン • 真ん中に寄せることもできます。文字も変更できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 144
145. 埋め込み • YouTubeを埋め込んでみます 「Embeds」の「YouTube」を選 択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 145
146. 埋め込むブロックの作成 • 埋め込むブロックが作成されます。URLを入力する欄ができま す 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 146
147. リンクするYouTubeを開きます • リンクしたいYouTubeを開き 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 147
148. URLをコピーします • 共有をクリックすると出てくるURLをコピーします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 148
149. URLをペースト • WordPressに戻り、URLを記入する欄に先ほどのURLをペースト します。 • 「Embed」ボタンを押します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 149
150. YouTubeの埋め込み • 先ほどのYouTubeが埋め込まれました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 150
151. Copy All Content • コンテンツ（記事）を丸ごとコピーできます「…」の一番下に ある「Copy All Content」をクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 151
152. 新しいページの作成 • 新規投稿で新しいページを作ります。デフォルトでできている 「Paragraph」ブロックにペーストします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 152
153. Copy All Content • 先ほどのページがまるごとペーストされました。「タイトル」 はコピーされません 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 153
154. パーマリンクについて • 現行では固定ページ投稿ももパーマリンクの変更ができません。 固定ページの場合パーマリンクの変更は一度投稿してから、ク ラッシックエディタに戻って変更します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 154
155. パーマリンクの変更 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 155
156. ブロックのデータはHTMLコメントで分か るようになっています 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 156 • コードエディタで見るとブロックはHTMLコメントで見分けがし やすいようになっています。
157. ３つの専門サイトを運用しています • 私（太田晴信）は現在３つの専門サイトを運用しています。 • 戦略的WEB運用センター https://harupress.jp/knowhow/ • WordPress運用支援センター https://wp-operation.com/ • WEB専門サイト専門制作所 https://harupress.jp/specialsite/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 157
158. 今後のGutenbergについては… • 今後Gutenbergを使って気づいたことは、「WordPress運用支援 センター」の方で記事として公開していきます。 https://wp-operation.com/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 158
159. ご清聴ありがとうございました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 159