Web技術系中心に割と何でも更新中

WordPressでブログカードを実装する方法【3パターン】

Blog

Web制作者

WordPressでブログ運営している人
「ブログにリンク設置するときに、テキストリンクだとなんかダサいな…。他のブログとか見ると、サムネイル付きのおしゃれなブログカードを設置したい。」

こういった悩みにお答えします。

本記事の内容

  • WordPressでブログカードを実装する方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

ブログ記事上にリンク設置する時に見栄えを良くするために、ブログカードがよく使用されます。

ブログカードとは

ブログカードとは、リンク先のタイトル、ディスクリプション、サムネイルをまとめてリンクバッジのように表示させたものです。

僕が最初にブログカードを認識したのは、はてなブログで使用されているはてなブログカードを見た時です(標準で設置できる機能)。

下記はmineblogで採用しているブログカードの例です。

mineblogのブログカード

ブログカードをHTMLやCSSを使って自作してもいいんですが、正直めんどいですよね。

WordPressでブログカードを実装する方法をいくつか紹介します。

WordPressにも標準ブログカード(oEmbed機能)があるんですが、まあまあ使いにくいのでここでは却下します。

WordPressプラグインを使う方法

プラグイン

WordPressを利用するメリットといえば、プラグインです。
ブログカードを表示させるためのプラグインをいくつか紹介します。

Pz-LinkCard

まず、ブログカード実装プラグインといえばPz-LinkCardです。

Pz-LinkCardダウンロードページ

Pz-LinkCard

WordPressの管理画面のプラグイン > 新規追加で右上の入力欄にPz-LinkCardと入力して検索すればヒットするので、そこからインストール可能です。

[blog-card href="https://to-benefit7.com/blog-url/" type="hatena"]

このプラグインでは、上のようなあらかじめ用意されたショートコードにURLを入れるだけでOKです(typeは表示させるデザインパターン)。

主な便利機能

  • 配色を指定可能
  • ブログカードの上下左右の空白を調整可能
  • 内部リンクと外部リンクとで見栄えを変えられる
  • URL指定だけでファビコンの画像を取得可能
  • Facebookやはてなブログのシェア数を表示可能

他にもかなり細かく設定が可能です。
これが無料で使用できるのがすごいです。ほとんど有料レベルだと思います。

【公式】Pz-LinkCardの使い方

プラグイン作者のブログでも詳しい使い方を解説しています。参考にしてください。

kk-blog-card

こちらのプラグインは、株式会社アイスタイルという会社が自社のTechブログで使用するために作成されたブログカードプラグインです。

kk blog cardダウンロードページ

WordPressの管理画面のプラグイン > 新規追加で右上の入力欄にkk blog cardと入力して検索すればヒットするので、そこからインストール可能です。

デザインを選択可能

  • Facebook
  • Twitter
  • はてなブログ

上のリストのような感じのブログカードデザインを選択可能になります。

アップデートも数年前を最後にストップしているため、あまり使用を推奨はしません。参考程度に紹介しました。

外部のWebツールを使う方法

外部ツール

リンクさせたいURLから、ブログカード用のHTMLを発行して、そのHTMLを記事にコピペする方法です。

ShareHtmlを、もっと綺麗にしたメーカー

mineblogでも利用しているブログカード生成ツールです。

ファビコンの画像取得や、SNSのシェア数などは表示できません。
しかし、シンプルさを求めるのであれば、無駄が排除されたスッキリとしたデザインなので、おすすめします。

簡単な使い方

  • 入力欄にリンク先URLを入力
  • 入力欄にカーソルを合わせてEnterを押す
  • ブックマークレットを選択する
  • HTMLコードをコピペする
  • CSSをコピペする

同じ画面でプレビューも可能です。

ブックマークレット

ブログカード作成ができるブックマークレットを紹介します。
株式会社グランフェアズという会社がブログカード発行用のブックマークレットを作成して公開してくれています。

【公式】グランフェアズのブックマークレット

codepen(CSS)

ブログカード用のCSS

ブックマークレットで発行するHTMLに対応したCSSが公開されています。

簡単な使い方

  • ブックマークレットをブックマークする
  • リンク先のページに飛ぶ
  • ブックマークレットを選択する
  • HTMLコードをコピペする
  • codepenでCSSをコピペする

Embed Code Generator

Embedlyのブログカードです。
ファビコンの画像取得や、5種類のSNSシェアボタン表示(非表示も可)が可能になります。

【公式】Embed Code Generator

簡単な使い方

  • 入力欄にリンク先URLを入力
  • EMBEDボタンをクリック
  • SNSシェアボタンの表示切り替え、幅指定、位置指定
  • Embed Codeの入力欄内のHTMLをコピペ

多少、読み込み時間がかかるのが難点かもしれません。

ブログカードが標準で実装のテンプレートを使用する

cocoon

ブログカード機能が標準で実装されているWordPressテンプレートを使用することも一つの手です。

ブログカード機能標準搭載のテンプレート

ブログにおすすめの有料テンプレートにはだいたいブログカード機能が標準で実装されていることが多いです。

この中でも無料で利用できるCocoonは有料級の機能が使えるので費用を抑えたい人にはおすすめです。

まとめ

WordPressでブログカードを実装する方法について再度まとめます。

実装方法

  • WordPressプラグインを使用してショートコードを設定
  • 外部のWebツールでHTMLを発行してコピペする
  • ブログカード機能標準実装のテンプレートを使用する

状況や用途を考えて、最適な方法を選んでみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果