ブログ運営

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

グーテンベルク・JIN内部リンクのレイアウト

どうもこんにちは、あまぼしすずめ(@S_amaboshi)です。

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

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

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

理想

内部テキストリンク

崩れたレイアウト

JINブログカードレイアウト崩れる

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

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

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

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

グーテンベルクを使ってJINの内部リンクレイアウトが崩れるときの対処法(下部に飛びます)

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

内部リンク

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

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

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

ワードプレスクラシック
段落ブロックではなく、クラシックブロックに記述
JINブログカードレイアウト崩れる

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

テキストリンクのみならいくつでもOK

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

グーテンベルク テキストリンク

リンクカードのみならいくつでもOK

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

グーテンベルク ブログカード
JINブログカード

テキストリンク×リンクカードを併用すると崩れる

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

グーテンベルクJINブログカード

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

グーテンベルクJIN 内部リンク

最新バージョンでは改善されたとのことだが……

調べてみたところ、同じような方がいたようです。
どうやら以前はJINの仕様だったみたいですね。

2020年2月頃の回答

表題の件ですが、こちらJIN側の不具合で次回以降のアップデートで対応する予定でございます。
お手数ではございますが、今一度お待ちいただけますと幸いでございます。

しかし最新バージョン(2020年6月現在ver.2.530)では、不具合は修正されたとのこと。

2020年6月頃の回答

現状のバージョンで解決しているので問題ないかと思うのですが。。
こちらで再度確認しましたが、問題なく表示されるのでプラグインを全て停止していただき再度ご確認いただけますでしょうか?

……新バージョンだけど解決されてないんだが!!!
プラグインをすべて無効にしても駄目なんだが!!!

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

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

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

これです。

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

グーテンベルクJIN ブログカード

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

JINブログカードレイアウト崩れる
ブログカードブロック

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

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

グーテンベルククラシック
クラシック

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

グーテンベルク JIN内部リンク

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

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

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

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

しかし、

  • テキストリンクは段落ブロック
  • カードリンクはクラシックにURL貼り付け

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

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

以上です

月額1,980円で学べる『ABCオンライン』

ブロガー・アフィリエイターとして成果を出している「ヒトデ」さん&「なかじ」さん主催のオンラインサロン。

ブログ初心者が、「0⇒月1万円」を目指すために必要な事が全て学べます。

  • 会員限定のオンライン講座
  • 週1回のヒトデさん&なかじさんによるリアルタイム生放送
  • ABCスペースでの勉強会やセミナー動画視聴
  • ヒトデさん・なかじさんへの質問ができるチャット

etc……

ブログ運営の正しい知識が欲しい方、ブログ仲間が欲しい方。
月額1,980円で『ABCオンライン』を始めてみませんか?

すずめ

私もABCオンラインで月1万稼げるようになりました~♪

詳しくは下記のボタンからご覧ください。

/今すぐチェック!\

COMMENT

メールアドレスが公開されることはありません。