シリーズ記事の2回目は、テーマをAFFINGER5からTHE THOR（ザ・トール）に移行した時に起きた表示崩れの一つ「サイトカード」についてです。実際に生じた表示崩れとその対処方法をかんたん解説します。
第1回「見出し編」は、以下の関連記事からご確認いただけます。
サイトカードとは？
サイトカードとは、内部記事リンクのことで、記事のサムネイルや説明文などを含めてカードのように見やすく表示させることができます。
THE THORのサイトカードは、この記事の目次のすぐ上に設置したものです。関連記事として、記事のテーマと説明文の抜粋、サムネイル画像がカード表示されているのをご確認いただけると思います。
AFFINGER5では、ビジュアルエディターのツールバーに「カード」が表示されており、クリックしてリンクさせたい記事の投稿ID（数字）を入力するだけで見栄えの良いサイトカードを設置できました。
移行時に起きたサイトカードの表示崩れ
THE THORにテーマ移行した時、サイトカードは表示されず、AFFINGER5で設置したカードのコードがそのまま表示されているという状況でした。
対処方法
色々調べてみたのですが、結論から言うと、一つ一つ設定し直すしかありませんでした。。。 当ブログとコーポレートサイトブログにある約400記事を確認しつつ、表示崩れしているカードをTHE THORのサイトカードで置き換えていくという方法です。
THE THORでサイトカードを設置する
ビジュアルエディターのツールバーにある「ショートコード」で設置できます。もしツールバーに表示されていない場合は、「ツールバー切り替え」をクリックして表示させてください。
カードを表示させたい部分にカーソルを置いた状態で「ショートコード」をクリックし、「サイトカード（内部記事リンク）」を選択してください。
上の画像の通り、サイトカードを表示させるショートコードが入力されます。
AFFINGER5と大きく異なるのは、記事のIDではなくURLを設定するという点です。上の画像のurl=の後に、リンクさせたい内部記事のURLをコピペします。
サブタイトル
デフォルトで「関連記事」となっています。この部分を書きかえるとサブタイトルを変えられます。例えば、「合わせて読みたい」とか「この記事も読まれています」などに変更している方もいます。
ターゲット
target=blank と入力すると、ブラウザの新しいタブでリンク記事が表示されます。デフォルトのまま未入力であれば、同じウィンドウでリンク先ページが開きます。
基本作業としてはこれだけです。プレビューで正しく表示されているか確認してみてください。
まとめ
いかがでしたか。今回はAFFINGER5のショートコードで設置したサイトカードの表示崩れとその対処方法でした。AFFINGER5からTHE THORへテーマ移行した時に一番地道な作業だったのが、このサイトカードの置き換えでした。次回も別の表示崩れと対処方法です。お楽しみに！
