【JIN×Gutenberg（グーテンベルク）】内部リンクをテキストとカードで複数貼るとレイアウトが崩れる時の対処法

どうもこんにちは、あまぼしすずめ（＠S＿amaboshi）です。

1ヶ月ほど前、エディタをクラシックからGutenberg（グーテンベルク）に変えました！
（グーテンベルクかグーテンベルグか未だにわからなくなる）

テーマはJINです。
すると困ったことが起きてしまいました。

内部リンクを設置する際、1記事でブログカードとテキストリンクを併用するとレイアウトが崩れてしまうのです。
崩れるのはテキストリンク側。

理想

崩れたレイアウト

カードリンクを挿入するときはテキスト内部リンクが挟めない、という状態になってしまい困っていました。

……が、対処法を見つけましたので、備忘録として残しておきます。
同じような状況になっている方がいましたら、参考までにどうぞ。

当記事の執筆段階では、JINのバージョンは2.530（最新）

Contents

グーテンベルク×JIN　内部リンクのレイアウトが崩れる

ブログ本文に、テキストタイプの内部リンクを入れたい時があると思います。
こんな感じ。

しかしグーテンベルクに変更してから、テキストで内部リンクを入れようとすると表示がおかしくなることに気づきました。

こんなん。
試しにクラシックエディタで記述をしてみたのですが効果なく……。

色々調べた結果、テキストリンクとブログカードリンクを併用した場合レイアウトが崩れるということがわかりました。

テキストリンクのみの場合は、2つ以上挿入しても下記のような状態で正常に表示されました。

またリンクカードのみの場合も、複数挿入しても表示されるようです。

しかしテキストリンクとカードリンクを2個以上入れてしまうと、テキストリンクのみ表示がおかしくなるようです。

こんな感じで分裂してしまいます。

で、まあ色々と試行錯誤した結果、解決方法がわかりました。

記事内でテキストリンクとブログカードリンク、2つの内部リンクを併用されたい場合は――

ブログカードで表示したい内部リンク（URL）をクラシックエディタで書く

これです。

グーテンベルクは、段落ブロックにURLを貼ると自動的に埋め込みブロックへ変化します。

この状態ですと、ブログカードは表示をされてもテキストリンクがバグります。
また、JINブロックの中の「ブログカード」というブロックを使用しても同じです。

時には「ブログカードとしても表示されない」という現象も起きてしまい意味不明。

しかしクラシックブロックを挿入してここにURLを貼り付けると……

ブログカードとして表示され、テキストリンクはテキストのまま正常に表示されることがわかりました。

クラシックに書くのはテキストの方じゃなくてカードの方だったということですね。

原因はわかりません。
クラシックに書かずとも両方がちきんと表示される時も（稀に）あります。

ならない人はならないのかもしれないですし。

今後のアップデート等で改善されていくのか、そもそも個人的な問題なのか今のところわかりません。

しかし、

で私はレイアウトの崩れが防げたので、同じような現象で困っている方はぜひ試してみてください。

ああああグーテンベルクやっぱり難しいよおおおおお！！！！！！！

以上です