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

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

気になりますよね。

menくん

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

専用ブロック

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

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

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

menくん

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

シンプルボックス

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

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

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

試しにやってみると

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

menくん

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

見出し付きボックス

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

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

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

アイコンボックス

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

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

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

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

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

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

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

シンプルボタン

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

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

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

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

ボタンの種類を設定

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

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

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

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

リッチボタン

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

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

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

ボタンの種類を設定する

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

ボタンの色を設定

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

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

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

ホバーアクションを設定

角の丸みを設定

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

吹き出しブロック

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

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

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

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

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

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

設定前にすること

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

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

以上をします。

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

アイコンの枠

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

吹き出しの枠線

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

吹き出しの背景色

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

配置

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

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

ブログカード

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

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

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

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

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

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

記事タイトルで検索

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

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

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

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

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

URLで検索

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

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

サイドバーの設定項目

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

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

注意点

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

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

余白

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

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

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

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

ちなみに

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

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

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

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

区切り線

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

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

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

1. スタイル（3種類）
2. 太さ
3. 色

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

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

スタイルを設定する

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

太さを設定留守

色を設定する

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

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

ランキングブロック

ランキングブロックは一個一個追加していくイメージです

JINにもともとあるランキングっぽいものがグーテンベルクにも実装されましたね。

この設定項目以外にも下の横並びボタンは個別で設定できるで

ランキング順位を設定

JINのランキングブロックはどの順位からも始めることができます

一個一個のランキングブロックが独立しているため、ランキングの入れ替えは簡単かもしれませんね。

広告タグ設定

これはわかりやすくて良いですね。

ボタンを非表示にする

説明文入力欄

画像の横の説明部分には「文字」を入力できます。

ためしにpタグを入れてみましたが、反映されなかったため純粋な文字だけしか入力できません。

スマホでは説明文は画像の下にきます。

ひとつひとつランキングブロックが独立しているので、並び替えはしやすそうですね

横並びボタンは次で説明するな！

横並びボタン

こちらのブロックは「シンプル」と「リッチ」のボタンが2つ並んで挿入されるものです

JIN専用のボタンブロックなので、デザインは変更し放題です

ボタンデザインの変更

サイドメニューから

1. シンプル
2. リッチ

を選ぶことで、それぞれJIN専用ブロックのデザインに変更することができます。

リッチデザインの初期状態は

こんな感じです。

専用ブロックを組み合わせることで自由度がアップしたね

スマホでのボタンの並びを変更

スマホ時横並びをONにしても、今のところCSSが効いて内容に思えますね。まぁすぐに直るでしょう♪

ボタンのテキスト入力

ボタンの文字は右サイドメニューからしか編集しましょう。

横並びボタンはすごく使いやすいからいいね

箇条書きデザイン

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

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

マーカー線

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

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

まとめ

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

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

あとは

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

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

menくん

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