カラーユニバーサルデザインに配慮しています

SANGOで「Gutenberg」を約2週間使って感じたメリット・デメリット

読了時間: 約5
2019年2月9日 追記
記事をリライト及び一部追加しています
注意
ちまたで人気の「PORIPU」や「SANGOサポーター」は一切導入していません

Gutenbergで記事を書いてみた

巷ではすこぶる評判が悪い「Gutenberg」です。WordPressもついに大台(Version5)に乗りましたし、前回「Gutenberg」(グーテンベルグ)を使って、初めての記事を書いてみました。『クラシックエディタ』もインストールしていますが、勉強の為あえて使わずに書きました。

しかしながらやはり不安はありましたね。取り敢えず記事を一つしか書き終えていませんが、現時点での使い心地を感じたままで書いてみます。

現状クラシックブロックは必修

現状クラシックブロック無しで記事を書くのは無理ではないでしょうか?ということは結局まだまだ過度期ということなのでしょうね。

何しろテーマ側の対応が追いついていません。私は現在「SANGO」と言うテーマを使用していますが、「SANGO」に限らずほとんどのテーマが対応に苦慮しているのだと思います。

「SANGO」の中の人は精力的に動いてくれています。「開発ロードマップ」をこちらに公開しています。

SANGO Gutenberg Dev Roadmap | Trello

SANGO進捗状況

「SANGO」の進捗状況をネットに公開している画像です。少しずつではありますが、着実に進んでいるようです。今後に期待しています。

Gutenbergのメリット

ここをチェック!
  • ページ内リンクが簡単
  • 表作成が出来る
  • ボタン作成が出来る
  • 記事の全体像が分かりやすい
  • ビジュアルエディタとテキストエディタを行き来しなくてすむ
  • 項目の順序を簡単に変えられる
  • よく使うものは「再利用ブロック」に保存しておける

ページ内リンクが簡単

私も結構使う機能ですが、「Gutenberg」では標準でサポートされています。この機能をよく使う人には便利ですね。

例えば見出しのブロックをクリックすると、HTMLアンカーの欄が出てきますが、そこに「jump」とか記述すれば飛ぶ機能ですね。ちなみに「ボタン作成が出来る」見出しまで飛ばします。

ここをクリック

「ここをクリックして戻る」ボタンを押して、又ここに戻って来れます。やり方はいたって簡単です。

作成手順

ジャンプ先の見出しの前に例えば「jump」と記述

高度な設定HTMLアンカー「jump」と記述

今度はジャンプ元で文章を作成

(例)ここをクリック

リンクボタンをクリックする

をクリック

飛ばす側に#jumpと記述
完了です!

これが「クラシックエディタ」だと、テキストモードで例えば<div id=”jump”></div>と指定します。

見出し3の部分に飛ばすなら<h3 id=”jump”>ボタン作成が出来る</h3>

後は飛ばす側の設定は上と同じ要領で、#jumpと記述すれば良いのですが、id=”jump”をテキストモードで指定してやらないといけないので、少しだけめんどうです。

MEMO
ちなみに今回は、サンプルとしてidの名前を jump にしましたが、これは jump じゃなくても半角の英数字であれば何でもOKです

記事の全体像が分かりやすい

見出し一覧
文章の概要
  • 単語数
  • 見出し
  • 段落
  • ブロック

これらがひと目で分かるようになりました。しかもクリックするとジャンプ出来ます。長文書く人には便利な機能ですね。

表作成が出来る

表作成
 AB
12/28AB1BC2
12/29AB3BC4

以前は表作成をしようと思えば、ExcelやNumbersを使ってコピペするか、プラグインの「TinyMCE Advanced」「TablePress」などを使わなければ作成出来ませんでした。

ちよっとした表作成なら標準で出来るので助かります。(中・上級者ならHTMLで直接コードを書く方もいます)

サルワカさんのサイトで参考になる記事はこちらです。

ボタン作成が出来る

テーマ側でも徐々に対応してきています。簡単なボタンなら標準で作成出来るようになりました。

SANGOボタンスタイル
SANGOも一部対応中

ビジュアルとHTML編集を行き来しなくてすむ

HTMLとして編集

HTMLとして編集を利用することが出来ます。これも結構大きなポイントですね。

<p>タグが正しく使われているか<br>タグが使われていないか、時々確認したりしています。

注意
<br>タグ(改行)は出来るだけ使わないようにしています

項目の順序を簡単に変えられる

動画を用意しました。この見出しを移動している様子です。少し分かりにくいかもしれませんが、ドラッグして希望の場所付近に赤いラインが出ますので、ペーストすればOKです。

赤ライン上でペースト

複数のブロックを選択しても、まとめて移動可能なので便利です。

よく使うものは「再利用ブロック」に保存しておける

再利用ブロックに追加

いわゆる「テンプレート」機能ですね。出来るだけ「クラシックブロック」を使わないようにするために、結構入れてます。今後テーマ側で対応状況が進めば、又使い方も変わってくるとは思いますが…

デメリット

プラグインの対応

今後「AddQuicktags」がGutenbergに対応するのか少し気がかりではあります。「TinyMCE Advanced」も同様です。

2019年2月9日 追記
「AddQuicktags」はクラシックブロックで利用出来ますね。「TinyMCE Advanced」は「Gutenberg」に対応したようです。(私は使っていません)
クラシックブロックの挿入
  • ブロックの追加
  • フォーマット
  • クラシックをクリック

テーマ側の対応

「SANGO」に関しては先程書いたとおりです。精力的に対応してくれているようです。私がよく使うものは既に「再利用ブロック」に保存していますが、現時点ではまだまだ未対応の部分が多いですね。

しかしながら例えば見出しなどは、「style.css」の子テーマでお気に入りのスタイルを指定している人が多いのではないでしょうか?問題は「見出し」以外で今後テーマの作者さんがどう対応していくかでしょうね?

クラシックブロックにはテキストモードがないため、テキストモードで使えていたボタンは現状Gutenbergでは使えないですよね。

2019年2月9日 追記

ボタン作成はGutenbergの「ボタンブロック」でも「クラシックブロック」でも両方出来ますね。

しかし「ボタンブロック」の場合「追加CSS」でクラス名を入力する必要があります。これはユーザーにとってかなり不便ですね。プルダウンメニューを設けて選択出来るようにしていただきたいところです。

旧エディタではテキストモードでしかボタン作成しなかったので、こういうやり方があるとは知りませんでした。お詫びして訂正します。

参考サイト
12436288584_94d6bc46d2_b.jpg
SANGOではたくさんの種類のボタンを用意しています。どれも使うのにHTMLやCSSの知識は不要、ビジュアルエディタのスタイル設定やショーコードにより簡単に記事内に挿入ができます。 目次Gutenbergエディタを使う場 … 続きを読む
12436288584_94d6bc46d2_b.jpg
SANGO Gutenbergでは様々な種類の見出しを使うことができます。 目次SANGO見出しブロックを使用する見出しのスタイルを変えるその他の種類の見出しを使用する手順1. 通常の見出しブロックを挿入する手順2. 追 … 続きを読む

特に「蛍光ペン」等の文字装飾関係は早く対応していただきたいですね。

注意
あくまで「クラシックモード」を使わずにと言う意味です
あわせて読みたい
ラインマーカー4色「SANGO」蛍光ペン風のアンダーラインをカスタマイズしてみました

WordPressの埋め込み機能が使いにくい

リンクの埋め込み

「埋め込み」から例えば「WordPress」を選択してリンク先を入力するまでは良い。

しかし困ったことに
「新しいタブ」で開く・nofollowなどのtarget=”_blank” rel=”nofollow”を指定する場所がないのです。

「追加CSS」欄に記入しても駄目だし、これは少し不親切かな?よって今のところ使えません。

こうやれば出来るよという方がいたら、教えて下さいm(_ _)m

よく分からない点

エラー解析

見ても良く分からないのは、ひとえに私の実力です(笑)例えばこんな感じでエラーが出たとします。

エラー表示
エラー画面

素直に指示に従い、エラー箇所を手直し後「変換」のボタンを押してます。しかしエラー解析をしてくれるのだから、これはメリットに含んでも良いですね。

追加CSS欄

追加CSS

まだ使い方がよく分かりません。ここにコードを書くとデザインやレイアウトが個別に設定できる…と言う認識で良いのかな?するとこれはテーマ作者の仕事かな?スキルのある人以外触ることはないでしょう。

MEMO
先ほど「テーマ側の対応」 追記で書きました。クラス名の入力が必要ですね。

まとめ

使い始めてまだ2週間ほどですから、「Gutenberg」の良さも十分引き出せていませんし、今後もどんどんパワーアップするでしょうから楽しみです。

何だかんだ言ってもこれからブログを続ける限り、「Gutenberg」を遅かれ早かれ使うことになります。まだ使っていない方は「習うより慣れろ」で行きましょう。

私は結構気に入ってますがね。また役に立つ情報を仕入れたらアップします。

以上、お読みいただきありがとうございました。

あわせて読みたい
SANGOカスタマイズ編アイキャッチ画像【WordPress】テーマ「SANGO」をカスタマイズしてみました(11箇所) アイキャッチ画像【WordPress】でテーマに関係なく最低限必要なプラグインは7個です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です