Still not Gutenberg?

JINのグーテンベルク(Gutenberg)事情

さまざまなテーマのグーテンベルク対応はどうなっているの

気になりますよね。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

この記事ではJINのグーテンベルク事情を見ていきます

更新の履歴
  • 2019年11月7日 JINアップデートで「吹き出しブロック」追加!
  • 2019年8月7日 記事作成

専用ブロック

専用ブロック

JINの専用ブロックには今のところ5つのブロックが用意されています。

説明しよう!

専用ブロックとはそのテーマでのみ使用できるブロックのことである。

JINの専用ブロックの種類
  1. シンプルボックス
  2. 見出し付きボックス
  3. アイコンボックス
  4. シンプルボタン
  5. リッチボタン
  6. 吹き出し(2019年11月7日に追加)

ざっくり分けるとボックスが3つにボタンが2つですね。

それぞれを見ていきましょう。

ちょいと一言

グーテンを使用するなら、クラシックブロックを使うのはなるべく避けましょう。あとあとリライトする時に邪魔になりますし、グーテンの良さ(プレビューいらず)が半減してしまいます。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

専用ブロックがある場合は、専用ブロックを使用したほうが管理が楽になります

シンプルボックス

シンプルボックスを挿入した状態

JINのシンプルボックスのブロックを挿入すると、太枠ボックスのデザインが初期設定になっています。

デザインを変更する場合は、右のサイドメニューから変更できます。

ボックスデザインを変更する

ドロップダウン方式で選択することができ、とっても便利です。

試しにやってみると

ボックスのデザインを変更してる動画

ぱぱぱっと変更できるのが便利ですね。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-kirakira.png
menくん

JINはボックスデザインが多いけど、簡単に挿入できるね!

見出し付きボックス

見出し付きボックスを挿入した状態

見出し付きボックスを挿入すると背景色付きボックス1が初期設定になっています。

シンプルボックスのときと同様に、右サイドバーでデザインを変更することができます。

ボックスデザインを変更する

こちらも簡単に変更できますね。

デザインを変更してる動画

アイコンボックス

アイコンボックスを挿入した状態

アイコンボックスを打ち込むと、こちらが初期設定になっています。

他のボックスブロックと同様に、右サイドバーでデザインを変更することができます。

ボックスのデザインを変更する部分

これも簡単に変更できますね。

ちなみに、アイコンボックスだけ、注意書きが書いてあります。

注意書き部分

記事を公開・更新し、リロードすると反映されると書いてありますが、ぼくのJINではリアルタイムで変更されました。

キャッシュ系プラグインとかの関係かな?

さて、こちらのボックスブロックもデザインを変更した動画をのせておきます。

ボックスのデザインを変更している動画

シンプルボタン

シンブルボタンを挿入した初期状態

JINでよく見るボタンで出てきましたね♪

設定部分

右サイドバーに設定部分があります。ボックスブロックの時よりもちょっと設定項目が多めですね。

  1. ボタンの種類(デザイン変更)
  2. ボタンテキスト
  3. リンク先URL
  4. リンク先を別タブで開く

以上の4つを設定することができます。

ボタンの種類を設定

ボタンの種類

こちらは外観カスタマイザーで設定した4つのボタンになります。

カスタムボタンを選択した際に、グーテンベルク上では少しデザインが違うので、注意しましょう。

グーテンベルク上のカスタムボタン
記事内でのカスタムボタン

影の部分がグーテンベルク上では横いっぱいに広がっています。

記事内ではしっかりと表示できているので、気にしなくてもいいかもしれませんね。

リッチボタン

リッチボタンを挿入したときの初期状態

リッチボタンブロックの場合は、シンプルボタンよりも更に設定項目が増えます。

設定項目-1
設定項目-2
  1. ボタンの種類
  2. ボタンの色
  3. ボタンをグラデーションにする
  4. ボタンのホバーアクション
  5. ボタンの丸み
  6. ボタンテキスト
  7. リンク先URL
  8. リンク先を別タブで開く

以上の8つの設定をすることができます。

ボタンの種類を設定する

ボタンの種類を設定

簡単にボタンの種類を変更することができます。

ボタンの種類を変更している動画

ボタンの色を設定

ボタンの色を設定している動画

ボタンをグラデーションにする設定

グラデーションを設定している動画

ちなみに、グラデーションは一度設定するとクリアボタンを押しても、グーテンベルク上でデザインが反映されません。

いったん下書き保存して、再読み込みすればデザインが反映されます。

グーテン上でデザインが反映されない場合の対処法

ホバーアクションを設定

ホバーアクションを設定している動画

角の丸みを設定

角の丸みを設定している動画

他の設定は普通のボタンブロックのときと同じですね。

吹き出しブロック

2019年11月7日にJINがVer2.20にアップデートされました。

その際に「吹き出しブロック」が追加されたので、そちらを紹介します。

吹き出しブロックを挿入した状態
こんな感じで表示されます
menくん

あれ?ツールバー部分が左上になった?これも今回のアプデのあれかな?(笑)

設定項目はこちらになります。

設定項目
  1. アイコンの枠
  2. 吹き出しの枠線
  3. 吹き出しの背景色
  4. 配置

以上の4つを設定することができます。

設定前にすること

吹き出しブロックのデザインを設定する前に

  1. 画像を選択
  2. 名前を追加
  3. 吹き出しの中身を追加

以上をします。

吹き出しに画像と名前、テキストを追加している動画

吹き出しはグーテンベルクの良さが出ていますね。

ここに注意

名前を書く場所に「アイコン名を入力」と書いてありますが、こちらを全部消してから名前を記入しないといけません。

アイコンの枠

アイコンの枠を簡単に切り替えることができます。

アイコンの枠を変更している動画

吹き出しの枠線

枠線の色は6色から選ぶことができます。

吹き出しの枠色を変更している動画

吹き出しの背景色

吹き出し部分の背景色も簡単に変更できます。

吹き出しの背景色を変更する動画

配置

左右もワンクリックで変更できるのでかなり便利。

吹き出しの位置を変更する動画
ヨハネス・G

ヨホホホ、吹き出し対応は素晴らしいですね!

箇条書きデザイン

グーテンベルクで普通に箇条書きを書くと、JINでは自動でデザインを変更してくれるようです。

これはとっても便利ですね。

マーカー線

JINではもともとマーカー線を用意してくれているみたいです。

マーカーを引く動画

簡単にマーカーが引けるのはいいですね。

まとめ

2019年8月7日の段階でJINのグーテンベルクはかなり使いやすいです。

JINのデザイン装飾もほぼすべて使用できる状態なので、グーテンに移行してもそれほど困らないのではないでしょかね。

あとは

  • 付箋ボックス
  • 横並びボタン
  • 画像加工
  • カラム

とかが充実してくるとグーテン完全移行できますね。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

アップデートされて追加されたら、記事にも追記していくね!

他のテーマのグーテンベルク事情

2 COMMENTS

Gutenbergを使用する際、専用ボックスが表示されないのですがどうすればいいのでしょう…

返信する
bear face

おおっと、それは一大事!
専用ボックスもとい、専用ブロックが行方不明ということですね!

ひとまず、JINのテーマは最新verでしょうか( ˙꒳​˙ )?
通常であれば「ブロックを追加」に「JINボックス」という専用ブロックが用意されているはずですよ‪( ˙꒳​˙ᐢ )

返信する

コメントを残す

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