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

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

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

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

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

はてなブログカード

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

コード

1
2
3
4
5
6
7
<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タグを簡単にクリップボードにコピーすることができます。

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

1
<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コードを作成できます。

例

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

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

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

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

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

貼り方

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

例

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

まとめ

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

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

PRもっと安く使いたい