ブログ作成 PR

JINの画像加工(影・枠・角丸・丸枠)をブロックエディタ(Gutenberg)で使う方法

記事内に商品プロモーションを含む場合があります

きろぐ管理人も今更ながらブロックエディタ(Gutenberg)で記事作成するようになりました。

リリース当初は使いづらくて、すぐにブロックエディタを使うことを止めてしまったのですが、現在はなかなかどうして使いやすくなっています。

しかし、きろぐ管理人が良く利用していたJINの『画像加工』が使えなくなっている?

色々と探してみた結果、『クラシック』ブロックを追加し、そこでショートコードを入力することで、これまで通りJINの『画像加工』を使うことができました。

JINの画像加工をブロックエディタ(Gutenberg)で使う方法を解説

JINの画像加工をブロックエディタ(Gutenberg)で使用するには、まず『クラシック』ブロックを追加します。

『+』アイコンをクリック⇒『クラシック』をクリックします。

すると、クラシックエディターを使っていた人なら見慣れたメニューが表示されます。

ここでクラシックエディターで使っていた時と同じように、『ショートコード』⇒『画像加工』から好きな加工を選びます。

そして画像を張り付けるわけですが、クラシックブロックのメニューバーから画像を貼り付けられないようなので、違う方法で画像を貼り付けます。

まず画像ブロックを追加して、貼り付けたい画像を選択します。
画像を選択したら、右クリックメニューの『画像アドレスをコピー』を選択
そして先ほどのクラシックブロックのショートコードに張り付けます。

すると↑のような感じでショートコードの間に画像を貼り付けられます。
この状態になっていれば、加工された画像がブログに表示されているはずです。
画像コピーするために追加した画像ブロックは忘れずに消しておきましょう。

↑がクラシックブロックの画像加工を使った画像です。以前と同じように枠付きで表示されています。
この記事で使っている画像は枠ありの画像にしていますが、全てこの方法を使って枠ありにしています。

ショートコードブロックでは上手くJINの画像加工ができませんでした

ブロックエディタにはショートコードを使えるブロックもあります。

そのブロックを使って画像加工できないものかと思い、試してみました。

しかし、ショートコードブロックには画像を貼り付けられないようで、↑で紹介した方法で画像のアドレスをコピーして貼り付けても、アドレスがそのまま張り付けられてしまうだけでした。

それでもブログ上では、ちゃんと表示されていれば良いのですが、プレビューしてみるとアドレスの文字列が表示されているだけ。

上手く画像加工することはできませんでした。

まとめ

JINの画像加工をブロックエディタ(Gutenberg)で使う方法を解説しました。

JINの画像加工をブロックエディタ(Gutenberg)で使う方法

クラシックブロックを追加

メニューバーからショートコードを選択

画像ブロックを追加し、使用する画像を選択して右クリックから『画像アドレスをコピー』

ショートコードに画像を貼り付け

クラシックエディターで画像加工をする時よりも手間がかかってしまいますが、この方法ならブロックエディタでも画像加工を使うことができます。

もっと簡単なやり方があるような気もしますが、とりあえずこれで使えていますので、参考にしていただければと思います。

ちなみにもっといいやり方を知っていたら、コメントで教えて頂けると助かります!!

COMMENT

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