1. Home
  2. /
  3. テーマ
  4. /
  5. JIN
  6. /
  7. JIN で Gutenberg も使い方が簡単で良いですよ♪
JIN

JIN で Gutenberg も使い方が簡単で良いですよ♪

JIN で Gutenberg も 使い易くなりました!

JINは、2020年8月12日にGutenberg+WordPress5.5 へ対応しました。

今までClassicEditorで作成することに慣れている方は、なかなか手を出しづらいですよね。

実際にGutenberg(WP5.5)で記事を作成してみました。

Lightning G3 Pro Pack(アップデート期間1年)

JINとGutenbergで困る人は?

Gutenbergといえば、ブロックエディタ。

クラシックエディタユーザーにとって、いつかは触って慣れておかないといけない。

でも、慣れるまでの時間がもったいない。

わかります😁

考え方、変えないといけないですものね。

JINの良いところは、

使いたいデザインコードをコピペするだけ

ってところなんですよね。あと、

文字を囲ってマーカーを選ぶだけでマーカータグで囲ってくれる

とかです。

で、誰が一番困るか?それは、

先に原稿を書き、後からデザインする人

です。はい、私ですねー😓

ただね、ボックスデザインなどはコードをコピーするでしょう?

それはGutenbergと変わらないんですよ。

大きな違いと言えば、

実際のデザインを見ながら選べない

ってところ。

Gutenbergは、画面右にある設定リストを変更するだけだし、使っているうちに操作も早くなる。

それほど気にならなくなります。

ブロックエディタはブロックを作ってから文字を入れる

そらまめ

原稿を書いてから装飾するタイプの方、手を上げてー!

といえば、ほとんどの人が手をあげるんじゃないかな?

Gutenbergはそういう人には扱いづらいエディタ。

本当は、

書き上げた文章の入ったブロックを選択し、好みのスタイルに変換できれば良い

しかし、Gutenbergのブロック互換はまだまだ弱い。

基本の段落ブロックから、見出しブロック、リストブロック、整形済み、引用、プルクオートへの変換ができるのみ

テーマ特有のスタイルへの変換ができれば文句なしなのに!

実現はまだまだ先になりそうかなあ・・・

現在JINで使えるブロック

JINの公式サイトでもGutenbergに対応したということで、対応ブロックが載せられていました。

Gutenbergの使い方は別に紹介することにして、JINで使えるGutenbergのブロックを確認しましょう。

各ボックスの色は、Classic同様に【カスタマイズ】→【ボックスデザイン設定】から変更します。

※ブロック選択画面内の名前、()内は、カスタマイズ画面の名称です。

シンプルボックス(太枠線ボックス)

ボックス内が選択時に選ぶ名前です

太線ボックス

太点線ボックス

二重線ボックス

細枠背景色ボックス

背景色ボックス

太枠背景色ボックス

左線ボックス

端折れボックス

注意点ボックス

良い例ボックス

悪い例ボックス

参考ボックス

メモボックス

ポイントボックス

見出し付きボックス(タイトル付きボックス)

Classicだと、「要約リスト」となっているボックスです。

背景色付きボックス1

ボックス16と同じ

背景色付きボックス2

ボックス20と同じ

細線ボックス1

ボックス17と同じ

細線ボックス2

ボックス19と同じ

黒板ボックス

ボックス18と同じ

アイコンボックス

注意

電球

カート

お知らせ

吹き出し

チェック

鉛筆

情報

歯車

クリップボード

いいね!

よくない

ハート

はてなマーク

シンプルボタン

デザイン・色の変更は、【カスタマイズ】→【ボタンデザイン設定】でできます。

デザインは、マテリアル・フラット・立体の3種類。これは全ボタン共通になります。

マテリアルボタンの例)

シンプルボタン

シンプルボタン

シンプルカスタムボタン1

シンプルカスタムボタン2

リッチボタン

色・種類・アクションなどは、右サイドバーに設定画面が表示されます。

2つのボタンを横に並べるには、別のブロックを利用します!

そらまめ

右側で変更できるのが楽でいいなあ。

吹き出し

そらまめ

枠線、背景色など変更できます。

そらまめ

丸枠と名前もつけれます

ブログカード

同ブログ内回遊用のブログカード。外部は非対応なのね😓

JINを高速化するには?
表示速度が遅いという評判のJINを高速化するには?JINはデザインが可愛らしくて素敵なテーマなのですが、ページ表示スピードが遅いということで不満を沢山書かれています。最新のAMPにも非対応でどうやってページスピードを上げていくかを紹介しています。...

余白

余白をいれるためのブロックがあります。

区切り線

実線・破線・二重線が選べます。

ランキング

おなじみにランキング。こっちのほうが使いやすくないですか?

1位〜3位、と4位以下の4種類が選べます

広告タグを入れる
2位の広告タグ

横並びボタン

Gutenbergのブロック内に2つのボタンを並べられないので、別のブロックを利用します。

Gutenbergで楽になった

いかがでしたか?

HTMLでBoxコードをコピペするよりも楽だと思いませんか?

確かにHTMLやCSSを覚えるのも大事だと思います。

ですが、Gutenbergはそれをあまり知らなくてもなんとかなるようにできてます。

むしろ、ボックスのHTMLを触ろうとするとエラーが出ることの方が多いくらいです。

文章作成のやり方はいろいろとあると思いますが、Gutenbergで文章作成も慣れると簡単に感じられるようになりますよ。

JINであれこれ使えた全てが利用できるわけではありません。

ですが、有料テーマのJIN

いずれクラシックエディタで利用できたもの全てが利用できるようになると期待してます!

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!

 

そのほかにも沢山ありますよ♪

PAGE TOP