この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Gutenbergで記事を書いてみた
巷ではすこぶる評判が悪い「Gutenberg」です。WordPressもついに大台(Version5)に乗りましたし、前回「Gutenberg」(グーテンベルグ）を使って、初めての記事を書いてみました。『クラシックエディタ』もインストールしていますが、勉強の為あえて使わずに書きました。
しかしながらやはり不安はありましたね。取り敢えず記事を一つしか書き終えていませんが、現時点での使い心地を感じたままで書いてみます。
現状クラシックブロックは必修
現状クラシックブロック無しで記事を書くのは無理ではないでしょうか？ということは結局まだまだ過度期ということなのでしょうね。
何しろテーマ側の対応が追いついていません。私は現在「SANGO」と言うテーマを使用していますが、「SANGO」に限らずほとんどのテーマが対応に苦慮しているのだと思います。
「SANGO」の中の人は精力的に動いてくれています。「開発ロードマップ」をこちらに公開しています。
SANGO Gutenberg Dev Roadmap | Trello
「SANGO」の進捗状況をネットに公開している画像です。少しずつではありますが、着実に進んでいるようです。今後に期待しています。
Gutenbergのメリット
- ページ内リンクが簡単
- 表作成が出来る
- ボタン作成が出来る
- 記事の全体像が分かりやすい
- ビジュアルエディタとテキストエディタを行き来しなくてすむ
- 項目の順序を簡単に変えられる
- よく使うものは「再利用ブロック」に保存しておける
ページ内リンクが簡単
私も結構使う機能ですが、「Gutenberg」では標準でサポートされています。この機能をよく使う人には便利ですね。
例えば見出しのブロックをクリックすると、HTMLアンカーの欄が出てきますが、そこに「jump」とか記述すれば飛ぶ機能ですね。ちなみに「ボタン作成が出来る」見出しまで飛ばします。
「ここをクリックして戻る」ボタンを押して、又ここに戻って来れます。やり方はいたって簡単です。
作成手順
高度な設定HTMLアンカー「jump」と記述
（例）ここをクリック
をクリック
これが「クラシックエディタ」だと、テキストモードで例えば<div id=”jump”></div>と指定します。
見出し3の部分に飛ばすなら<h3 id=”jump”>ボタン作成が出来る</h3>
後は飛ばす側の設定は上と同じ要領で、#jumpと記述すれば良いのですが、id=”jump”をテキストモードで指定してやらないといけないので、少しだけめんどうです。
記事の全体像が分かりやすい
- 単語数
- 見出し
- 段落
- ブロック
これらがひと目で分かるようになりました。しかもクリックするとジャンプ出来ます。長文書く人には便利な機能ですね。
表作成が出来る
| A | B | |
| 12/28 | AB1 | BC2 |
| 12/29 | AB3 | BC4 |
以前は表作成をしようと思えば、ExcelやNumbersを使ってコピペするか、プラグインの「TinyMCE Advanced」「TablePress」などを使わなければ作成出来ませんでした。
ちよっとした表作成なら標準で出来るので助かります。(中・上級者ならHTMLで直接コードを書く方もいます)
サルワカさんのサイトで参考になる記事はこちらです。
ボタン作成が出来る
テーマ側でも徐々に対応してきています。簡単なボタンなら標準で作成出来るようになりました。
ビジュアルとHTML編集を行き来しなくてすむ
HTMLとして編集を利用することが出来ます。これも結構大きなポイントですね。
<p>タグが正しく使われているか<br>タグが使われていないか、時々確認したりしています。
項目の順序を簡単に変えられる
動画を用意しました。この見出しを移動している様子です。少し分かりにくいかもしれませんが、ドラッグして希望の場所付近に赤いラインが出ますので、ペーストすればOKです。
複数のブロックを選択しても、まとめて移動可能なので便利です。
よく使うものは「再利用ブロック」に保存しておける
いわゆる「テンプレート」機能ですね。出来るだけ「クラシックブロック」を使わないようにするために、結構入れてます。今後テーマ側で対応状況が進めば、又使い方も変わってくるとは思いますが…
デメリット
プラグインの対応
今後「AddQuicktags」がGutenbergに対応するのか少し気がかりではあります。「TinyMCE Advanced」も同様です。
- ブロックの追加
- フォーマット
- クラシックをクリック
テーマ側の対応
「SANGO」に関しては先程書いたとおりです。精力的に対応してくれているようです。私がよく使うものは既に「再利用ブロック」に保存していますが、現時点ではまだまだ未対応の部分が多いですね。
しかしながら例えば見出しなどは、「style.css」の子テーマでお気に入りのスタイルを指定している人が多いのではないでしょうか？問題は「見出し」以外で今後テーマの作者さんがどう対応していくかでしょうね？
クラシックブロックにはテキストモードがないため、テキストモードで使えていたボタンは現状Gutenbergでは使えないですよね。
ボタン作成はGutenbergの「ボタンブロック」でも「クラシックブロック」でも両方出来ますね。
しかし「ボタンブロック」の場合「追加CSS」でクラス名を入力する必要があります。これはユーザーにとってかなり不便ですね。プルダウンメニューを設けて選択出来るようにしていただきたいところです。
旧エディタではテキストモードでしかボタン作成しなかったので、こういうやり方があるとは知りませんでした。お詫びして訂正します。
特に「蛍光ペン」等の文字装飾関係は早く対応していただきたいですね。
「WordPress」テーマ『SANGO』蛍光ペン風のアンダーラインをカスタマイズしてみました
WordPressの埋め込み機能が使いにくい
「埋め込み」から例えば「WordPress」を選択してリンク先を入力するまでは良い。
「追加CSS」欄に記入しても駄目だし、これは少し不親切かな？よって今のところ使えません。
こうやれば出来るよという方がいたら、教えて下さいm(_ _)m
よく分からない点
エラー解析
見ても良く分からないのは、ひとえに私の実力です（笑）例えばこんな感じでエラーが出たとします。
素直に指示に従い、エラー箇所を手直し後「変換」のボタンを押してます。しかしエラー解析をしてくれるのだから、これはメリットに含んでも良いですね。
追加CSS欄
まだ使い方がよく分かりません。ここにコードを書くとデザインやレイアウトが個別に設定できる…と言う認識で良いのかな？するとこれはテーマ作者の仕事かな？スキルのある人以外触ることはないでしょう。
まとめ
使い始めてまだ2週間ほどですから、「Gutenberg」の良さも十分引き出せていませんし、今後もどんどんパワーアップするでしょうから楽しみです。
何だかんだ言ってもこれからブログを続ける限り、「Gutenberg」を遅かれ早かれ使うことになります。まだ使っていない方は「習うより慣れろ」で行きましょう。
私は結構気に入ってますがね。また役に立つ情報を仕入れたらアップします。
以上、お読みいただきありがとうございました。
【WordPress】テーマ「SANGO」をカスタマイズしてみました 
WordPressでテーマに関係なく最低限必要なプラグインは7個です
