超簡単!URLをコピペするだけでリンクをブログカード風にする方法

他の人のブログとかを見てると、みなさん記事内のリンクのデザインがオシャレだ!

アイキャッチ画像とともに、説明文も添えられていてなんかいい感じ!←当時はこのいい感じなデザインを指す言葉を知らなかったのですが、のちに「ブログカード」ということを知りました。

↓みたいな感じのやつ。

【悲報】アナザーエデンでガチャ不正操作発覚

 

WordPressのテーマによっては、ブログカード風にリンクを表示させる機能が備わっている場合もありますが、当ブログで利用しているLION MEDIAには備わってないので(多分)何かいい方法はないかな~と探していたら、『embed.ly 』が提供するサービスを使えば簡単にできることを知りました。

試してみたら、アラ簡単。URLをコピペするだけでブログカード風デザインのリンクを一瞬で生成できちゃうので紹介したいと思います。

使い方

使い方は3種類あります。

Embed Code Generator

1つ目は『Embed Code Generator』を利用する方法です。

https://embed.ly/code

↑のページを開き、ブログカードにしたいリンクのURLを貼り付けます。

「Paste in a URL to embed…」というところにリンク対象のURLを貼り付けたら「EMBED」ボタンをクリックします。

するとこんな感じでプレビューが表示されます。

画面下部に表示されているEmbed Codeをコピーして記事に貼り付けるだけで、プレビューに表示されているデザインのリンクが生成されます!

ちなみに、記事にコードを貼り付けるときは右上タブの「テキスト」を選択してから貼り付けてください。

そうしないと、貼り付けたコードが文字列として表示されてしまいます。

 

プレビュー右側のカスタマイズではリンクのデザインを変更することができます。

  • Social Buttons

チェックを入れるとSNSの共有ボタンが表示されます。

  • Dark Theme

チェックを入れると文字色が白っぽくなります。背景がダーク系のサイトの場合はチェックを入れたほうが見やすいかもしれません。

  • SEO Embed

チェックを入れるとリンクが”blockquote“タグで囲まれます。

blockquote とは?

blockquote とは、引用、転載であることを示すタグです。

他サイトの内容をそのままコピペしてしまうと、Google検索エンジンからペナルティを受ける可能性があります。blockquote は検索エンジンに対して、ここの内容は引用してきた内容ですよ~と教えてあげるタグです。

  • Width

横幅を”px”もしくは”%”で指定できます。

  • Card Align

表示位置を「左」、「中央」、「右」の3つから選択できます。

 

カスタマイズを変更すると、自動でEmbed Codeも変更されるのですが、なぜかWidthCard Alignは変更してもプレビュー上は変わるのですが、コードは何も変わりません…。

したがって、横幅と表示位置をデフォルトから変更したい場合は手動でコードを変更する必要があります。手動で変更する場合は自動生成されたコードの「class=”embedly-card”」の後ろに以下を追加します。

【横幅を変更したい場合】

data-card-width=”横幅”

【表示位置を変更したい場合】

data-card-align=”left” or “center” or  “right”

EMBED BOOKMARKLET

2つ目は『EMBED BOOKMARKET』を利用する方法です。

https://embed.ly/bookmarklet

↑のページを開いたら画面に表示されている『+Embed』をブックマックバーにドラックします。

リンク対象のサイトを開いて、先ほどブックマックバーに追加した『+Embed』をクリックします。

するとこんな感じでモーダル画面が表示されます。画面下部にコードが生成されているので、これをコピーして記事に貼り付ければOKです。

プレビューに表示されているアイキャッチ画像はカーソル合せると、左下に縮小、拡大のアイコンが表示されるのでクリックすることで、サイズを切り替えられます。

また、タイトルと説明文はクリックすれば編集することも可能です。

この方法で生成したコードには”blockquote”タグがついていません。引用扱いとしたい場合は手動で”blockquote”タグを追加する必要があるので注意してください。

 

Embedlyプラグイン

最後はプラグインを利用する方法です。

「Embedly」で検索してプラグインを追加し有効化してください。プラグインを追加するとダッシュボードに「Embedly」が追加されます。こちらで、デザインのカスタマイズができます。

カスタマイズできる内容は1つ目に紹介した『Embed Code Generator』とほとんど変わりません。

 

あとは、ブラグインを有効化した状態で記事内にURLを貼り付けるだけで勝手にブログカード風のデザインになり、使い勝手としてはプラグインを利用する方法が一番使いやすいです。

ですが、僕の環境が悪いのか、なぜかカスタマイズを変更しても反映されなかったり、デザインが崩れたりするのが残念です。

 

まとめ

今回紹介した方法なら、めんどくさい手順を踏まずとも簡単にブログカード風のリンクが作れるので、是非利用してみてください。

もちろん、レスポンシブにも対応しているのでオススメです!