【SWELL】のリンクカードが手軽に作成できる機能とリンクカードを作成できるWEBサービス(SWELL/Iframely)

2022年8月31日

当サイトで使用しているワードプレステーマ「SWELL」では内部リンク、外部リンクともに手軽にリンクカード（ブログカード）として表示させる機能が実装されています。

toc

SWELLのリンクカードの表示サンプル

ysuke.me

おすすめWordPressテーマ［SWELL］ – ysuke.me SWELL について SWELL – シンプル美と機能性を両立させた、圧巻のWordPressテーマ WordPressテーマ「SWELL」は、ブロックエディター（Gutenberg）中心に開発された、シンプ…

こんな風に綺麗に表示できます。

ただし、外部サイトの場合はそのページでOGPタグが出力されていないと情報が取得できません。

SWELLのリンクカードの挿入方法

ブロックエディタの「関連記事」で挿入します。

内部リンクの場合は「記事ID」もしくは「キーワード」で対象の記事が見つかります。

外部リンクの場合はアドレスを入力すると自動でリンクカードに変換されます。

とても手軽にリンクカードが挿入できるようになっています。

その他のリンクカードを挿入する時の選択肢

SWELL以外のテーマを使用している場合や、CSSでデザインを調整したい方は他のリンクカードの挿入方法を検討すると良いです。

Iframely

Embeds codes for today’s Internet – Iframely Iframely gives you simple APIs to have all the Web’s best media on your site and on all your users’ devices.

上記のリンク先で「Check your URL」をクリックするとアドレスを入力するバーが出現しますのでそこにリンクカード化したいアドレスを入力します。

すると左にコピペ用html、右にプレビューが表示されるので問題なければコピペ用htmlをコピーします。

「https://ysuke.me/swell-wordpress-theme/」をリンクカード化した場合、下記のようなhtmlになりました。

<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 52.5%; padding-top: 120px;"><a href="https://ysuke.me/swell-wordpress-theme/" data-iframely-url="//iframely.net/pqIfS5W"></a></div></div><script async src="//iframely.net/embed.js"></script>

少しカスタマイズして表示を変えています。追記したcssは下記のとおりです。

/* リンクカード(iframely)*/
.iframely-embed{
  transition: box-shadow .25s,background-color .25s;
	margin:30px 0px 30px 0px;
}
.iframely-embed:hover {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
}

余白をつけて、マウスオーバー時に影が浮き上がるようにしています。