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

by ootaharunobu

Slide 1

Slide 1 text

WordPress5.0から実装（予定）の新エディタGutenbergを使ってみよう Wordpress5.0がリリースされてからでは遅い。

Slide 2

Slide 2 text

太田晴信（おおたはるのぶ）自己紹介 • 1995年フィールドエンジニアとして社会人スタート • ソフトウェア会社でSE・プログラマを約9年 • 佐川急便などに仕事を転々 • 2011年イトーヨーカドーに就職 • 2014年フリーのWordPressエンジニアとして、 Webサイト制作を開始 • 2017年から社外のWeb担当者としてWebサイトの運用代行を開始 • 戦略的Web運用プロデューサーとして Webサイトのコンサルタント・運用代行を行っています今ここ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 2

Slide 3

Slide 3 text

注意 • 今回のスライド作成時はGutenbergプラグインのバージョンが Ver2.2で、作成途中にVer2.3がリリースされました。なのでキャプチャーは一部（だいぶ）Ver2.2のままになっています。 • 機能的にはVer2.3で作成してます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 3

Slide 4

Slide 4 text

Gutenbergとは • WordPress5.0から標準掲載予定になっているエディタ（記事入力画面） • 投稿・固定ページ・カスタム投稿タイプの各投稿の仕方がガラリと変わります。 • パラグラフ・ヘディング・エディタ、ウィジェット、ショートコード等々の各要素をブロックという形でくぎりレゴブロックを組み上げるような感じでWebページを完成させます。 • 現在はプラグイン（Ver 2.３.0 2018年３月1０日現在）にて配布。インストール、有効化することで実装可能 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 4

Slide 5

Slide 5 text

Gutenbergプラグイン https://ja.wordpress.org/plugins/gutenberg/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 5

Slide 6

Slide 6 text

Gutenberg使用前 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 6

Slide 7

Slide 7 text

Gutenberg使用後 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 7

Slide 8

Slide 8 text

Gutenbergのブロックとは • 文章、引用文、画像、動画などの各要素をひとつのブロックとして扱い、レゴブロックを組み上げるように、レイアウトを組みながら記事を作成します。出展:https://www.webcreatorbox.com/webinfo/gutenberg 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 8

Slide 9

Slide 9 text

Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 9

Slide 10

Slide 10 text

Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 10

Slide 11

Slide 11 text

Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 11

Slide 12

Slide 12 text

Gutenbergのブロック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 12

Slide 13

Slide 13 text

では実際にGutenbergを使ってみましょう 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 13

Slide 14

Slide 14 text

本番サイトではまだやらないでください • Gutenbergをインストールして動かすのは本稼働しているWebサイトではまだやらないでください。 • ローカル環境もしくはテストサーバーで試してください 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 14

Slide 15

Slide 15 text

プラグインのインストール • プラグインの「新規追加」からGutenbergをインストールします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 15

Slide 16

Slide 16 text

Gutenbergを検索 • 検索ウィンドウから「Gutenberg」と入力します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 16

Slide 17

Slide 17 text

Gutenbergをインストール • Gutenbergが出てきたら今すぐインストールをクリック 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 17

Slide 18

Slide 18 text

Guntenbergを有効化 • Guntenbergを有効化します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 18

Slide 19

Slide 19 text

Gutenbergが有効化されたのを確認 • プラグイン一覧からGutenbergが有効化されたのを確認 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 19

Slide 20

Slide 20 text

Gutenbergのスターターテーマをインストール • Gutenbergのスターターテーマをインストールします。公式ディレクトリにはないのでGitHubからダウンロードします。対応テーマ（テーマ名：Gutenberg） https://github.com/WordPress/gutenberg-starter-theme 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 20

Slide 21

Slide 21 text

GitHubからスターターテーマダウンロードします • ダウンロードボタンを押してスターターテーマをダウンロードします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 21

Slide 22

Slide 22 text

ZIP形式でダウンロードします • ダッシュボードからインストールしやすいようにZIP形式でダウンロードします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 22

Slide 23

Slide 23 text

ダッシュボードのテーマを選択します • ダッシュボードの「外観」＞「テーマ」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 23

Slide 24

Slide 24 text

新規追加します • 「新規追加」ボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 24

Slide 25

Slide 25 text

テーマをアップロードします。 • テーマのアップロードボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 25

Slide 26

Slide 26 text

ファイルを選択します • 「ファイルを選択」から先ほどダウンロードしたZIPファイルをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 26

Slide 27

Slide 27 text

アップロードします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 27

Slide 28

Slide 28 text

テーマをインストール • 今すぐインストールをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 28

Slide 29

Slide 29 text

有効化します • インストールが成功したら有効化します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 29

Slide 30

Slide 30 text

有効化成功 • 有効化が成功したら反映されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 30

Slide 31

Slide 31 text

テーマが反映された画面 • そっけない画面になります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 31

Slide 32

Slide 32 text

プラグインをインストールすると • プラグインをインストールするとダッシュボードの左のメニューに「Gutenberg」というのができます。デモというのがあり、どんな感じで編集画面が構成されるのか確認することができます。デモを見てみましょう。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 32

Slide 33

Slide 33 text

Gutenbergのデモ • デモその1 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 33

Slide 34

Slide 34 text

Gutenbergのデモ • デモその２（スクロールを下のほうにする） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 34

Slide 35

Slide 35 text

新規投稿 • ダッシュボードの「投稿」＞「新規投稿」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 35

Slide 36

Slide 36 text

投稿画面 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 36

Slide 37

Slide 37 text

ヘッダー部 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 37

Slide 38

Slide 38 text

⊕ボタン • ⊕ボタンをクリックするとブロックを新しく追加できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 38

Slide 39

Slide 39 text

Recent(最近） • Recentタブは最近使ったブロックが表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 39

Slide 40

Slide 40 text

Block（ブロック） • Blockでブロックを選択できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 40

Slide 41

Slide 41 text

Embeds(埋め込み） • EmbedsでFacebook、YouTubeなどを埋め込むアイテムを選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 41

Slide 42

Slide 42 text

Save(保存） • Saveは保存したブロックを選択できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 42

Slide 43

Slide 43 text

Search for a block(ブロックの検索) • ブロックが見つからない時に検索で探し出すことができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 43

Slide 44

Slide 44 text

ひとつ前に戻る • 左上のをクリックすると一つ前の状態に戻ります。間違えたときとかに使います。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 44

Slide 45

Slide 45 text

ひとつ先に進む • 左上のをクリックすると一つ先の状態に進みます。戻りすぎたときとかに使います。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 45

Slide 46

Slide 46 text

ヘッダー（右部） • ヘッダーの右はこのようになってます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 46

Slide 47

Slide 47 text

下書き保存 • 「Switch to Draft」は下書き保存します。この段階では公開または更新はされません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 47

Slide 48

Slide 48 text

歯車のボタン • 歯車のボタンで右側の設定エリアを消したり出したりできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 48 右側の設定部を消えた

Slide 49

Slide 49 text

歯車ボタン • もう一度押すと設定エリアが表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 49 表示部が表示された

Slide 50

Slide 50 text

点3つボタン • 点3つ「…」部分をクリックするとエディタの変更などが設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 50

Slide 51

Slide 51 text

点3つ「…」（Editor) • Visual EditorとCode Editorが変更できます • デフォルトではVisual Editorになっており、 Code Editorをクリックするとコードが入力できるエディタに代わります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 51

Slide 52

Slide 52 text

Code Editor • Code EditorをクリックするCode Editorに変わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 52 コードエディタに変更

Slide 53

Slide 53 text

点3つ（Setting) • SettingはToolbarをトップに固定して設置しておけます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 53

Slide 54

Slide 54 text

Toolbarをトップに固定 • ブロックのToolbarがヘッダー部分に固定されました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 54

Slide 55

Slide 55 text

記事（コンテンツ）入力部 • タイトルを入力欄があるのでタイトルを入力します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 55

Slide 56

Slide 56 text

記事の入力 • タイトルと文章を入力します。デフォルトでParagraghがあるのでそこに記事を入力してみます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 56

Slide 57

Slide 57 text

ブロックのタイプを切り替えます • 一番左のタブはブロックのタイプを切り替えます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 57

Slide 58

Slide 58 text

文字を左寄せします • 文字をブロック内で左寄せします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 58

Slide 59

Slide 59 text

文字のセンタリング • ブロック内で文字をセンタリングします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 59

Slide 60

Slide 60 text

文字の右寄せ • ブロック内で文字を右寄せします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 60

Slide 61

Slide 61 text

文字を太字する 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 61 • 文字をドラッグして太字にします。ドラッグした部分が太字になります。

Slide 62

Slide 62 text

文字を打ち消す • 文字をドラッグして打消しにします。ドラッグした部分が線が入ります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 62

Slide 63

Slide 63 text

リンクを貼る • 一番右側のチェーンのボタンはリンクです。クリックすると「Paste URL or type」というウインドウがでます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 63

Slide 64

Slide 64 text

リンクを貼る • 「Paste URL or type」のところにジャンプしたいURLを貼ります。矢印ボタンをクリックします。以前のようにあたらしいタブを増やすとかの選択はなくなった様子です 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 64

Slide 65

Slide 65 text

リンクを貼る • ページを見るとリンクになっています。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 65

Slide 66

Slide 66 text

リンクを貼る • リンクをクリックすると指定したページに飛びます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 66

Slide 67

Slide 67 text

記事をテキストからコピーする場合 • 記事をテキストからコピーする場合、ブロックごとに改行を入れておくことでコピーしたときブロックに分割されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 67

Slide 68

Slide 68 text

記事をテキストからコピーする場合 • ⊕でParagraphのブロックを作成して起き、ブロックにコピーしたものをペースト（貼り付け）します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 68

Slide 69

Slide 69 text

記事をテキストからコピーする場合 • 改行で区切ったもの一つ一つがブロックに分割されています 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 69

Slide 70

Slide 70 text

見出しはH2タグに変更します • すべてParagraphになるので、見出しはHeadingブロックに変えます。 • Heading以外にもQuoteなどにも変更できますので、適宜変更してください 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 70

Slide 71

Slide 71 text

見出しはH2タグに変更します • H2を選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 71

Slide 72

Slide 72 text

見出しを全部H2に • 見出しを全部H2にしました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 72

Slide 73

Slide 73 text

Publish(公開） • 右上にあるをクリックすると公開されます。 • Publishは2段階で公開されます。1回クリックするとウィンドウが表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 73

Slide 74

Slide 74 text

Public • Publicのテキストリンクをクリックすると一般公開、私的公開、パスワードの設定が選べます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 74

Slide 75

Slide 75 text

表示日時 • 日時をクリックするとカレンダーが表示され日時を設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 75

Slide 76

Slide 76 text

もう一度Publish • もう一度をクリックすると公開されます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 76

Slide 77

Slide 77 text

公開すると • 公開すると書きウィンドウが出ますパーマリンクがコピーできます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 77

Slide 78

Slide 78 text

プレビュー • 右上のをクリックするとプレビューされます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 78

Slide 79

Slide 79 text

Update(更新） • 一度上げた記事の更新は1段階です。 • を1回クリックするだけです。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 79

Slide 80

Slide 80 text

Document • 右側の設定エリアには「Document」と「Block」があります。 • 「Document」では記事にいろいろな設定をします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 80

Slide 81

Slide 81 text

Status&Visiblity • Status&Visiblityでは、現在のステータスの状況表示状況を設定します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 81

Slide 82

Slide 82 text

Visiblity • Visiblityでは表示の一般公開、私的公開、パスワード公開が表示され変更できるようになります。 • Publicの部分をクリックすると変更できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 82

Slide 83

Slide 83 text

Publish • Publishでは公開された日時を表示します。 • 日時をクリックするとカレンダーが出て日時を変更できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 83

Slide 84

Slide 84 text

Post Format • Post Formatは投稿のフォーマットが設定できます。クラッシックエディタにもありました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 84

Slide 85

Slide 85 text

Stick to the Front Page • Stick to the Front Pageをオンにするとトップページの先頭に固定で表示されます。 • 投稿一覧で先頭に固定で置かれていることが分かります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 85 Stick to the Front Page

Slide 86

Slide 86 text

Revision • WordPressはもともとRevision機能がデフォルトでついてます。自動保存してますので、前の状態に戻したいときに使います。 • RevisionをクリックするとRevision画面に遷移します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 86

Slide 87

Slide 87 text

Category&Tag • Category&Tagではカテゴリーとタグの設定ができます。ここはクラッシックエディタと操作の違いはほとんどありません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 87

Slide 88

Slide 88 text

アイキャッチ画像 • アイキャッチ画像が追加できるテーマの場合、アイキャッチ画像が設定できます。 • 操作はクラッシックエディタとほとんど違いはありません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 88

Slide 89

Slide 89 text

Excerpt • Excerptは抜粋を書きます。抜粋は投稿内容から自分で作成する要約で、テーマの中で使用できます (オプション) • 詳しい使い方は Learn more about manual excerpts(opens in a new window)をクリックしてマニュアルを読んでください。 • クラッシックエディタでは表示オプションをオンにする必要がありましたが、Gutenbergはデフォルトでつくようです。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 89

Slide 90

Slide 90 text

Discussion • ディスカッションでは投稿にコメントやピンバックなどを受け付けるかを設定できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 90

Slide 91

Slide 91 text

Table of Contents • ブロックの構造がリスト化されて見られます。ただ DreamweaverのDomパネルのようにここでブロックの追加や移動はできません。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 91

Slide 92

Slide 92 text

リスト構造の確認 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 92 • 左上のをクリックするとブロックのリスト構造が表示されます。ブロック数、単語数なども表示されます。

Slide 93

Slide 93 text

Blockの設定 • 右側にある設定エリアのタブをBlockにすると各ブロックの設定ができます。 • ブロックによって設定できるものは違います。ここではParagraphを例にご紹介します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 93

Slide 94

Slide 94 text

Drop Cap • Drop CapをONにするとブロックの先頭の文字を大きくできます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 94

Slide 95

Slide 95 text

Font size • Font Sizeでフォントサイズを変更できます。数字を打ち込むだけでなくスライダーでも設定できます。Resetでデフォルトの大きさに戻せます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 95

Slide 96

Slide 96 text

Background color • Background colorでブロックのバックカラーを変更できます。 • ●の部分をクリックするとその色になります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 96

Slide 97

Slide 97 text

Background colorの設定 • Background colorの一番右のカラフルな●をクリックすると色をパレットから選択ができます • 3種類の数値で指定することもできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 97

Slide 98

Slide 98 text

Background color • このようにバックカラーが変わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 98

Slide 99

Slide 99 text

Text color • Text colorで文字カラーを変更できます。変更の仕方は Background colorと同じです。ブロック内全部の色が変わってしまい、ブロック内の一部を色を変えることは、現在はできない様子です 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 99

Slide 100

Slide 100 text

Block Alignment • Block Alignmentブロックのアライメントを変更できます。 • 左まわり、右回り、ワイド、横幅いっぱいなどが設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 100

Slide 101

Slide 101 text

Block Alignment（左回り） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 101 • ブロックが左により下のブロックが右に入ってきます。

Slide 102

Slide 102 text

Block Alignment（ワイド） • ブロックの横幅が広がります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 102

Slide 103

Slide 103 text

Block Alignment（横幅いっぱい） • ブロックが横幅いっぱいに広がります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 103

Slide 104

Slide 104 text

Additional CSS Class • ブロックに独自のクラスを入れられます。CSSで指定してデザインなどで使えます • 試しに「firstcontent」と入れてアップデートしてみます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 104

Slide 105

Slide 105 text

Additional CSS Class • Code editerっでみると「class=“firstcontent」がついてます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 105

Slide 106

Slide 106 text

ブロックの右上にある… • ブロックの右上にある…を縦にしたのをクリックするとエディタの変更、ブロックの削除、ブロックの変更などができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 106

Slide 107

Slide 107 text

見出しの部分のBlock • 見出しをBlockの設定は「h1,h2など」にくわえて、「左寄せ、センタリング、右寄せ」と「HTML Anchor」というのがあります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 107

Slide 108

Slide 108 text

見出しの左寄せ、センタリング、右寄せ • で左寄せ、センタリング、右寄せがえらべます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 108

Slide 109

Slide 109 text

HTML Anchor • HTML Anchorではアンカーテキストを設定できます。 • ためしに「anchor1」と入れてアップデートします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 109

Slide 110

Slide 110 text

HTML Anchor • idに「anchor1」が入りました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 110

Slide 111

Slide 111 text

HTML Anchor • 別の単語のリンク先を#anchor1にします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 111

Slide 112

Slide 112 text

HTML Anchor • ページを表示させて先のリンクをクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 112

Slide 113

Slide 113 text

HTML Anchor 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 113 • 先ほどの「anchor1」を代入した見出しにジャンプします

Slide 114

Slide 114 text

Convert to Reusable Block • ブロックの右上の…の部分にある「Convert to Reusable Block」でブロックのセーブができます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 114

Slide 115

Slide 115 text

ブロックに名前を付ける 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 115 • Convert to Reusable Blockをクリックするとブロックに名前を付ける欄が表示されます。Editをクリックします。

Slide 116

Slide 116 text

ブロックに名前を付ける • 適当に名前を付けてSaveします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 116

Slide 117

Slide 117 text

Saveに表示される 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 117 • をクリックして「Save」タブを開くと先ほど保存したブロックが表示されます

Slide 118

Slide 118 text

Saveしたブロックを追加 • Saveしたブロックを追加するとコンテンツごと追加されます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 118

Slide 119

Slide 119 text

ブロックを上のブロックと上下を逆にする。 • ブロックの左側にある＾をクリックするとブロックが一つ上に上がります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 119

Slide 120

Slide 120 text

ブロックを上のブロックと上下を逆にする。 • このように上下が入れ替わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 120

Slide 121

Slide 121 text

ブロックを下のブロックと下上を逆にする。 • ブロックの左側にあるvをクリックするとブロックが一つ上に上がります。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 121

Slide 122

Slide 122 text

ブロックを下のブロックと下上を逆にする。 • このように上下が入れ替わります 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 122

Slide 123

Slide 123 text

画像の挿入 • Imageを選択すると画像が挿入できます。下の絵のようにアップロードすることとライブラリから選ぶことができます。今回はアップロードしてみます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 123

Slide 124

Slide 124 text

画像の挿入 • Uploadをクリックすると画像が選択できるウィンドウが出ます。選択して開くボタンをクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 124

Slide 125

Slide 125 text

画像の挿入 • 画像が挿入されました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 125

Slide 126

Slide 126 text

画像の左寄せ・右寄せ • 文字同様、左寄せ・右寄せができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 126

Slide 127

Slide 127 text

画像のワイド・横幅いっぱい 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 127 • ワイド・横幅いっぱいにもできます

Slide 128

Slide 128 text

Edit image Insert link • 画像の編集やリンクの挿入もできます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 128

Slide 129

Slide 129 text

テキスト代替 • 代替えテキストは右側の設定エリアでできます。「fuji」と入れてみました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 129

Slide 130

Slide 130 text

テキスト代替 • コードエディタで見るとalt＝“fuji”がはいりました。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 130

Slide 131

Slide 131 text

Size • Sizeを変更できます。サムネイル、ミディアム、ミディアムラージ、フルの4つから選べます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 131

Slide 132

Slide 132 text

Caption • 画像には説明文が書けますWrite captionの部分に書くことができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 132

Slide 133

Slide 133 text

Caption • このように書けます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 133

Slide 134

Slide 134 text

Gallery • Galleryをクリックすると画像群を組むことができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 134

Slide 135

Slide 135 text

Gallery • 画像を複数枚同時に選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 135

Slide 136

Slide 136 text

Gallery • 選んだ画像が一つの群として表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 136

Slide 137

Slide 137 text

Gallery カラム数 • 右の設定エリアでカラム数を変更することができます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 137

Slide 138

Slide 138 text

Gallery （Link to） 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 138 • 画像をクリックしたときの表示の仕方をアタッチメント、メディアファイルから選べます

Slide 139

Slide 139 text

Gallery （Link to） • アタッチメントを選ぶと画像のように表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 139

Slide 140

Slide 140 text

Gallery （Link to） • メディアファイルを選ぶと画像のように表示されます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 140

Slide 141

Slide 141 text

ボタン • クリックボタンなども設置できます。ブロックの中から「Button」をクリックします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 141

Slide 142

Slide 142 text

ボタン • ボタンを選ぶと下の画像のようなボタン領域ができリンク先が設定できます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 142

Slide 143

Slide 143 text

ボタン • クリック先のURLを指定します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 143

Slide 144

Slide 144 text

ボタン • 真ん中に寄せることもできます。文字も変更できます。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 144

Slide 145

Slide 145 text

埋め込み • YouTubeを埋め込んでみます「Embeds」の「YouTube」を選択します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 145

Slide 146

Slide 146 text

埋め込むブロックの作成 • 埋め込むブロックが作成されます。URLを入力する欄ができます 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 146

Slide 147

Slide 147 text

リンクするYouTubeを開きます • リンクしたいYouTubeを開き 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 147

Slide 148

Slide 148 text

URLをコピーします • 共有をクリックすると出てくるURLをコピーします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 148

Slide 149

Slide 149 text

URLをペースト • WordPressに戻り、URLを記入する欄に先ほどのURLをペーストします。 • 「Embed」ボタンを押します 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 149

Slide 150

Slide 150 text

YouTubeの埋め込み • 先ほどのYouTubeが埋め込まれました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 150

Slide 151

Slide 151 text

Copy All Content • コンテンツ（記事）を丸ごとコピーできます「…」の一番下にある「Copy All Content」をクリックします 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 151

Slide 152

Slide 152 text

新しいページの作成 • 新規投稿で新しいページを作ります。デフォルトでできている「Paragraph」ブロックにペーストします。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 152

Slide 153

Slide 153 text

Copy All Content • 先ほどのページがまるごとペーストされました。「タイトル」はコピーされません 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 153

Slide 154

Slide 154 text

パーマリンクについて • 現行では固定ページ投稿ももパーマリンクの変更ができません。固定ページの場合パーマリンクの変更は一度投稿してから、クラッシックエディタに戻って変更します。 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 154

Slide 155

Slide 155 text

パーマリンクの変更 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 155

Slide 156

Slide 156 text

ブロックのデータはHTMLコメントで分かるようになっています 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 156 • コードエディタで見るとブロックはHTMLコメントで見分けがしやすいようになっています。

Slide 157

Slide 157 text

３つの専門サイトを運用しています • 私（太田晴信）は現在３つの専門サイトを運用しています。 • 戦略的WEB運用センター https://harupress.jp/knowhow/ • WordPress運用支援センター https://wp-operation.com/ • WEB専門サイト専門制作所 https://harupress.jp/specialsite/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 157

Slide 158

Slide 158 text

今後のGutenbergについては… • 今後Gutenbergを使って気づいたことは、「WordPress運用支援センター」の方で記事として公開していきます。 https://wp-operation.com/ 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 158

Slide 159

Slide 159 text

ご清聴ありがとうございました 2018/2/19 WordPress5.0からの新エディタGutenbergを使ってみよう Copyright ハルプレス 159