ブログ記事内にカード型のリンクを貼る方法3選

ブログ記事内に他のWebページのリンクを貼る際、単純な文字列だけではなくリッチなカード型のリンクを貼るケースが増えています。カード型のリンクを貼る方法はいくつかありますが、当ブログでよく使われている3つの方法をご紹介したいと思います。

諏訪悠紀

2019.12.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

カード型のリンクを貼る方法

ブログ記事内に他のWebページのリンクを貼る際、単純な文字列だけではなくリッチなカード型のリンクを貼るケースが増えています。

このカード型のリンクを貼る方法はいくつかありますが、当ブログでよく使われている3つの方法をご紹介したいと思います。

はてなブログカード

主にはてなブログの記事のリンク向けに用意された機能ですが、はてなブログ以外からも利用できます。

コード

<iframe 
  class="hatenablogcard" 
  style="width:100%;height:155px;max-width:680px;" 
  title="【ブログタイトル】" 
  src="https://hatenablog-parts.com/embed?url=【ブログURL】" 
  width="300" height="150" frameborder="0" scrolling="no">
</iframe>

iframeで表示しています。https://hatenablog-parts.com/embed?url=【ブログURL】" とすることで、はてなブログサービス経由で url パラメータに指定したWebサイトからOGP情報を取得して表示してくれます。

例

次のようなリンクを貼ることができます。

CreateLinkと併用すると便利

Google Chromeをお使いの場合、CreateLinkというプラグインを利用することで上記のHTMLタグを簡単にクリップボードにコピーすることができます。

Create Link - Chrome ウェブストア

以下のようなテンプレートを用意します。

<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="%text%" src="https://hatenablog-parts.com/embed?url=%url%" width="300" height="150" frameborder="0" scrolling="no"></iframe>

Embedly

当ブログでも紹介記事がありますが、外部リンク作成サービスのEmbedlyを利用する方法です。

貼り方

以下のサイトにアクセスし、作成したいWebページのURLを貼るだけでHTMLコードを作成できます。

Embed Code Generator | Embedly

例

次のようなリンクを貼ることができます。

オリジナル企業キャラクターを #コミケ #C97 企業ブースに出展してみた | Developers.IO

2019年12月28日(土)～31日(火)に、コミックマーケット97 が開催されました。場所は東京ビッグサイト。本記事は、初めてコミケに企業ブースを出展した体験をまとめたものとなります。 ...

ブックマークレットが便利

ワンクリックでリンクを作成するには、ブックマークレットを使う方法がもっとも簡単です。

Bookmarklet: instantly generate a Card for any web page. | Embedly

WordPress内のリンクの場合は直接URLを入力するだけ

WordPress限定、かつ同じブログ内のリンクに限定される方法です。ダイレクトにURLを記述するだけで、WordPressが自動で展開してくれます。

貼り方

URLをダイレクトに記述するだけです。WordPressが自動で展開してくれます。

例

以下のようなリンクを貼ることができます。

オリジナル企業キャラクターを #コミケ #C97 企業ブースに出展してみた

まとめ

当ブログでよく使われているリンクの貼り方を3つご紹介しました。

外部サービスを使う方法については、サービスに対するリクエストが発生します。1つの記事内に大量に使うと記事表示の遅延に繋がったり、記事自体がごちゃごちゃして読みづらくなったりすることも考えられます。リンクを貼る際に、どのようなリンクの見え方が読者にとって有益になるかをよく考えて使うようにしましょう。