文中の説明画像をクリックすると拡大します。
ブログカードって何？
プログカードとは、記事内から他の記事にリンクを設定する際、アイキャッチ画像や抜粋文をカード形式に表示する機能です。リンクカードと呼ばれることもあります。
記事内でブログカードを使うと、一目でリンク先の情報・イメージを伝えることができます。また、テキストだけの場合よりリンクされる確率が高くなると思われるので、サイト内の他の記事に誘導して、サイトの滞在時間を伸ばす効果が期待できます。
実際のブログカードがこちらです↓（「【基本】HTMLって何？」にリンクしています）。
例えば、折り込み広告をイメージして下さい。文章だけの広告の場合、パッと見ただけでは言いたい事が伝わりません。その広告は読まれない可能性が高いと思います。
しかし、伝えたいイメージを写真（又はイラスト）と短い文章でコンパクトに表現されていれば、読み手の興味を引き付けることができるでしょう。
ブログカードの作り方
ブログカードを導入するには、主に以下の3つの方法があります。
- WordPress標準のブログカード作成機能を利用する
- プラグインを使う
WordPress標準のブログカード作成機能を利用する
WordPress4.4から、内部リンクもしくは他ブログの外部リンク（oEmbed対応※）を埋め込み表示できるようになりました。
方法はいたって簡単。投稿の編集画面で、参照したい記事のURLを張り付けるだけです（ただし、1行にURL以外が記載されているとこの機能は使えません。ブログカード化する場合は、1行にサイト内URLのみを記載してください）。
アイキャッチ画像のサイズ、タイトル、抜粋文のレイアウトなどを変更したい場合は、phpファイル、CSSファイルを、独自にコーディングする必要があります。
※oEmbedとは、埋め込みコードを取得するための統一規格です。Twitter、FacebookなどのWebサービスもこの規格を採用しています。
プラグインを利用する
プラグインを利用すると、簡単にブログカードを表示・編集できます。例えば「Pz-LinkCard」は良く利用されているプラグインの1つです。
WordPressの管理画面（ダッシュボード）から「プラグイン」→「新規追加」→「Pz-LinkCard」を検索してインストールできます。
Pz-LinkCardをインストールすると、投稿の編集画面のメニュー欄に専用のボタンが追加されます。編集中の記事でブログカードを挿入したい位置に移動して専用のボタンをクリックすると、下記のようなショートコードが生成されます。
(リンク先のURL)
ブログカードのデザインは、Pz-LinkCardの設定画面で変更でき、コーディングの必要はありません。
設定画面内にある「かんたん書式設定」には、見やすくデザインされたテンプレートが登録されており、イメージにあったブログカードを選ぶことができます。
ブログカード作成機能のあるテーマを利用する
ご利用中のWordPressテーマに、ブログカード作成機能があれば、プラグインをインストールしなくてもブログカードを表示できます。
TCDというレーベルのテーマ、JIN、Simplicity、Cocoonなど、多くのテーマで、ブログカードを作成する機能を持っています。
新規にプラグインをインストールすると、他のプラグインとの競合やテーマとの相性を確認する必要がありますが、当然ながら、テーマが持っているブログカード作成機能を使えば、この確認作業は不要です。
さらに、将来的に考えても不具合の発生リスクが低いと言えます。
もしプラグインを増やしたくない等の事情があれば、テーマが持っている機能を使うのも一手です。
embed.lyを利用する
embed.lyは、次の方法でブログカードを作成するサービスを提供しています。
- プラグイン
- サイト上でコード生成
- ブラウザにブログカード作成機能を追加
ここではプラグイン以外（上記の2と3）について説明します。
サイト上でコード生成
Embed Code Generatorと呼ばれるサイトで、参照したい記事のURLを入力すると、ブログカードを表示するHTMLコードを出力できます。
「Paste in a URL to embed」と記載されたテキストボックスにURLを入力し、「EMBED」ボタンをクリックすると、サイト上にブログカードのプレビューとコードが表示されます。
当サイトのトップページURLで試してみると、↓以下のように表示されます。
サイトに表示されたコードをコピーして投稿の編集画面にペーストすると、記事にブログカードを挿入できます。
なお、ブログカードの右下に「Powered by embed.ly」というロゴが表示されますが、有料版を利用するとロゴが消えます。
ブラウザにブログ作成機能を追加
まず、ブラウザのブックマークバーにブログカードを作成するボタンを追加します。
- 下記のサイトにアクセスする
Bookmarklet: instantly generate a Card for any web page. | EmbedlyGet a Card for any URL, right from your browser. This is a faster workflow perfect for bloggers and power users of Cards...embed.ly - サイトに表示されている手順に従い、[+Embed]ボタンをブックマークバーにドロップする
次に、ブログカードの作成方法について説明します。
- ブラウザで参照したい記事を表示する
- ブックマークに登録した[+Embed]をクリックする
- プレビュー画面を見ながら、アイキャッチ画像のサイズ調整と抜粋文の編集を行う
- 生成されたHTMLコードをコピーして、編集中の記事にペーストする
Google Chrome, Internet Explorer, Firefoxでは、正常に動作するようです（その他のブラウザは、都度ご確認ください）。
まとめ
- ブログカードを利用して読み手に伝わりやすい記事を作成でき、サイトの回遊率を高める効果が期待できる。
- 「Pz-LinkCard」は、デザイン変更が容易にできるブログカード作成プラグイン。
- テーマがブログカード作成機能を持っている場合には、それを使うのもよい。
- embed.lyというサービスは、プラグインの他、サイト上でのコード生成、ブラウザにブログカード作成機能を追加するサービスを提供している。
