【WordPress】手軽にブログカード(Embed)を作る方法

【WordPress】手軽にブログカード(Embed)を作る方法

この記事ではWordPressにブログカードを設置するいくつかの方法をご紹介します。

ブログカードとは

そもそもブログカードとはなんなのか?ですが、以下のようなサムネイルと概要付きのリンクのことです。

【WordPress】手軽にブログカード(Embed)を作る方法


(この記事自身のリンクです。)

普通のテキストリンクより目を引きやすいですし、アイキャッチ画像と概要も記載されているので、読者も安心してリンクを踏むことができるというメリットがあります。

ブログカードの設置方法

WordPress標準機能

特徴

・自サイトURLのみが対象
・外部サイトのURLではカード化されない

使用例

記事冒頭の通りで、こんな感じの見た目になります。

【WordPress】手軽にブログカード(Embed)を作る方法

設置方法

非常に簡単で、URLを記載するだけです。

注意点としては、1行にURLのみを記載すること。
URLの前後に文章や空白文字等余計な文字があるとカード化されません。

WordPressプラグイン「Pz-LinkCard」

特徴

・ショートコードにURLを指定するだけの容易さ
・見た目を細かく設定可能

使用例

作者さんのサイトをブログカード化してみました。

インストール方法

WordPressの管理画面から「プラグイン」>「新規追加」で「Pz-LinkCard」と検索してプラグインをインストールし、有効化します。

使い方

以下の作者のサイトに細かく解説が載っています。
バージョンアップされるごとに操作性も変わる可能性があるため、この記事では使い方については割愛します。

埋め込みリンク作成サービス「Embedly」

特徴

・手軽さはプラグインの次点
・簡易的ではあるが、その時々でレイアウトをカスタマイズ可能

使用例

当ブログのトップページでブログカードを作ってみました。

mupic.net

音楽と写真を中心に情報発信をする個人ブログ。カメラ、ギター、DTM機材、Apple製品、IT関連、ライフハックなど多岐に扱います。

使い方その1「コードジェネレータ」

公式サイト(http://embed.ly/code)に行き、フォームにブログカード化したいURLを入力します。

そうすると、プレビュー画面が表示されます。

右側のツールバー細かくセッティングが可能です。
例えばソーシャルリンクを表示させるかどうかを設定したり、

ダークテーマにしたりできます。

一番下の「Embed Code」を記事に貼り付けることで、ブログカードを設置することができます。

使い方その2「ブックマークレット」

公式サイト(http://embed.ly/bookmarklet)からブックマークレットを取得します。

ブログカード化したいサイトを開いた状態で、ブックマークレットをクリックすると、こんな画面が表示されます。

画面上部に完成イメージが表示されており、画面下部のURLを記事に貼り付ければ記事にブログカードを設置することができます。

右上の×ボタンを押すとサムネイルを消すことができます。
左下の拡大縮小ボタンを押すことでサムネイル画像を小さくすることができます。

サムネイル画像を縮小した時の図。

サムネイル画像を消した時の図。

タイトルや説明文も編集することが可能です。

Pz-LinkCardの場合、レイアウトを変える場合設定画面から変更しなければなりませんし、その変更は全体に反映されてしまいます。こちらの方法では記事内のデザインやリンク先サイトのデザインを見た上で臨機応変にブログカードを作成できる点が良いです。すごく柔軟性があります。

まとめ

いかがでしたでしょうか。僕が最近よく使うのはembedlyです。
手軽にインパクトのあるブログカードを入れることができるのですごく重宝しています。
参考になれば幸いです。

WordPressカテゴリの最新記事