Still not Gutenberg?

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

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

気になりますよね。

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

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

更新の履歴
  • 2019年1月4日 アプデで「ブログカード」「余白」「区切り線」追加!
  • 2019年11月7日 アプデで「吹き出しブロック」追加!
  • 2019年8月7日 記事作成

JINのアップデート情報(公式)

専用ブロック

専用ブロック
2019年11月7日に追加
2020年1月4日に追加

JINの専用ブロックには現在9つのブロックが用意されています。

説明しよう!

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

JINの専用ブロックの種類
  1. シンプルボックス
  2. 見出し付きボックス
  3. アイコンボックス
  4. シンプルボタン
  5. リッチボタン
  6. 吹き出し(2019年11月7日に追加)
  7. ブログカード(2020年1月4日に追加)
  8. 余白 (2020年1月4日に追加)
  9. 区切り線 (2020年1月4日に追加)

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

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

ちょいと一言

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

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

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

ブログカード

2020年1月4日にJINがver2.3にアップデートされました。

その際に「ブログカード」「余白」「区切り線」が追加されたので、それぞれを紹介していきますね。

ブログカードを挿入した状態
menくん

はい、神アプデきた!これで内部リンクは簡単だね

ブロクカードを挿入して、入力するのはこちらです。

記事検索欄

「URLをペーストするか入力して検索」と書いてありますが、以下の方法で検索できます。

  1. 記事タイトルで検索
  2. URLで検索

記事タイトルで検索

「JIN」を入力した画面

検索欄に「JIN」と入力すると、記事タイトルに「JIN」が含まれる記事がドロップダウンで表示されます。

挿入したいリンクの記事をクリック

目的の記事が見つかったら、クリックすれば内部リンクを挿入することができます。

内部リンクが挿入されたよ
くま

こ、これは革命的に内部リンクが簡単に挿入できるようになtasgdsfa

内部リンクを挿入している動画

ブログカードを使っている動画

グーテンベルクで「ブログカード」を使って挿入した内部リンクは、記事でもちゃんと表示されています。

記事ではこんな感じに表示されます

URLで検索

これも記事タイトルで検索と同様です。

「sns」と入力して検索した結果
menくん

記事タイトルかURLどちらかの一部を覚えておけば、簡単に内部リンクを挿入できるようになりましたね

サイドバーの設定項目

サイドバー

ブログカードにはスタイル(デザインの変更)の設定はありません。

デフォルトである「高度な設定」でCSSのクラス名を追加できます。

説明しよう!

「高度な設定」はカスタマイズするときに無双する機能だ!

注意点

ブログカードはあくまでも内部リンク用です。外部のリンクを貼り付けてもエラーになってしまいます。

内部リンク以外のURLを貼り付けた画面
menくん

ま、いつかは外部リンクもいけるようになるでしょう(適当)

余白

余白ブロックを挿入した初期状態

JINのクラシックエディタにある「余白」機能が追加されましたね。

設定部分

余白の設定は高さを10~100pxまで調整できます。

余白ブロックを使っている動画

こんな感じに高さを調整できます

クラシックエディタのときから余白を使っている人にとって嬉しいブロックですね。

ちなみに

グーテンベルクではもともと「スペーサー」と呼ばれる余白追加ブロックが用意されています

レイアウト要素の中にあるスペーサー

こちらのブロックを使っても余白を調整できます。

それぞれの違いをまとめると

余白ブロック

  • 高さは10~100px
  • 点線で区切られてるのでわかりやすい

スペーサー

  • 高さは20px~ほぼ無限
  • 区切りが無いので一見あるのか無いのかわからない
ヨハネス・G

そんな変わんないから、どっちを使ってもええんじゃ!

区切り線

区切り線を挿入した初期状態

区切り線を挿入した初期状態がこちらになります。

今回のアプデで、一番テンションがあがったのが「区切り線」です。

menくん

こーゆー細かいところこだわるの好き

設定項目
  1. スタイル(3種類)
  2. 太さ

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

※初期は薄い灰色ですが、変化が分かりにくいかもなので、動画では赤色に変更しています。

スタイルを設定する

スタイルを設定

「実線」「破線」「2重線」の3つを選べます。

区切り線のスタイルを変更している動画

太さを設定留守

太さの設定
区切り線の太さを変更している動画

色を設定する

カラーの設定
区切り線のカラーを変更している動画

カラーに関してはカスタムカラーも用意されているので、自分の好きなカラーを選べます。

カスタムカラーで好きな色を選ぶ
menくん

区切り線って意外とよくつかうから助かります♪

箇条書きデザイン

グーテンベルクで普通に箇条書きを書くと、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ボックス」という専用ブロックが用意されているはずですよ‪( ˙꒳​˙ᐢ )

返信する

コメントを残す

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