自分の好きなヒト・コト・モノ・バショと暮らすブログ「ストライクゾーン」

【STORK19】関連記事を表示するブログカードの見た目が崩れている原因と対策

長年愛用しているWordPressの人気有料テーマSTORK19の、関連記事を表示させるブログカードの見た目が以下のように崩れてしまった。

別で運営しているブログの関連記事

御覧の状況。「関連記事」と書かれたタグの部分が下へ行けば行くほど乱れてしまう。これが各記事で起きており困り果てていたのだが、インターネットの海に投げかけてもなかなか答えが見つからない。しかしついに解決したので、原因と対策をまとめておく。STORK19を長年愛用している人こそ、これで困っているかもしれない。

STORK19の関連記事を表示するブログカードが乱れる原因

原因はおそらく、関連記事をショートコード表示させていたことだろう。STORKには以前、関連記事を表示させるためのショートコードが割り当てられていた。以下の画像は、表示が乱れていたブログカードの編集画面。

問題が起きていた編集画面

おそらくブロックエディタ導入後もクラシックエディタで作業してきたが、いよいよブロックエディタで頑張るかと思ってクラシックエディタのプラグインを無効化したままの人はこうなっているかもしれない。

STORK19の関連記事のブログカードの乱れを整える方法

関連記事を正しく表示させる方法

ということで原因を突き詰めたので、過去に書いた記事で関連記事をショートコードで表示させるようにしていた部分を置き換えていく。方法は上記の通り、編集画面の「関連記事」を選択し、右側のブロックの項目から記事のURLもしくは記事IDを割り当てていく。もちろん古いショートコードは消そう。

修正後の関連記事とブログカード

無事に「関連記事」のタグの部分の見た目がきれいに整った。

この現象は最近ブログを書き始めた人というよりは、ブロックエディタが導入されるもっと前からSTORKを使ってきた人に起きている現象かもしれない。今後はショートコードでなく、ブロックの項目から関連記事を表示させれば同じような問題は解決するだろう。