ブログカードって何?

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

唐突に「ブログカードって何?」って聞かれて答えられますか?
筆者は、仕事柄よく利用しているので答えられますけど
今回は、そのブログカードに関することについて掘り下げてみます。
知っているとお友達の記事を自分のブログで紹介する時に便利ですね

 

目 次

ブログカードとは

アメブロのブログカード
ブログカードとは、テキストリンクをより魅力的に読者に伝えるアイテムの1つという認識を筆者は、持っておりブログシステムの中でもその表現法は様々です。
下記は、はてなブログはてなブログHELPページに記載されていることを抜粋しました。

「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。
はてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまった ブログカードの形式で埋め込むことができます。

上記のように考え方は、そう大きく変わらないのですが表現方法については様々で人のやり方やブログシステムの違いなどを詳しく見ていくと勉強になることも多いですね。
今回は、WordPressアメブロはてなブログで比べてみたいと思います。

 

WordPressの場合のブログカード

ワードプレスのブログカード
WordPressでの「ブログカード」では基本的にその機能が100%同じではないですがあるのです。

OGP画像とTwitterカードが反映しない時の対処法


上記のように簡単に表示できる場合があります。

上記のようにアドレスを1行入れただけです。
簡単なのですが、下記の項目に注意していただく必要があります。

  • WordPress のバージョンが 4.4以降であること
  • URL は 1行に 1 URLを記述すること
  • URL の前後には余分なテキストや空白を挿入しないこと
  • 自サイトのURLもしくはWordPRess.orgのサイトであること

ただこれだと他社のサイトなどをリンクした時にブログカードになりませんね
そのために2つの方法でブログカードを作ることが可能です。
TCDテーマがそんな感じですね。
TCDテーマのブログカード挿入
TCDテーマでのブログカード
上記のように表示され同じドメインでないとOGP画像の取得ができてないように思いますね。
このようにテーマでブログカードが用意されている場合もあるのです。

 

プラグインを使ったブログカード

Pz-HatenaBlogCard

Pz-HatenaBlogCard


「ブログカード wp プラグイン」でGoogleで検索すると高い確率でPz-HatenaBlogCardが表示されています。
当サイトでも利用させていただいてます。
はてなブックマーク風の表示法方が特徴です。
はてなブックマークの数やTweet数が表示されることがあります。
新しい後継のプラグインが公開されているのでそれを使う方がいいかもしれません。

Pz-LinkCard


Pz-LinkCardの方が設定の幅が広くわかりやすいですね。
記事の制作途中に入れ替えてみました。
Pz-HatenaBlogCardを使っていた方はタグの入れ替えなどしなくてもプラグインをインストール有効化した後にPz-HatenaBlogCardを無効化するだけでそのまま利用できます。
設定は、管理画面の設定メニューの中に組み込まれています。
このプラグインについては過去にも紹介した記事があります。

 

プラグインなしでブログカードを挿入する方法

functions.php
ちょっと難易度高いですが、 プラグインを使わずにブログカードを実装することもできます。
これは直接テーマを触ることになるために子テーマの使用をオススメいたします。
実際に触るファイルは2つです。
functions.php と style.css ですが、下記にコードを掲載しますね

 

投稿や固定ページでの使用方法は下記のコードを追加

 WordPressのブログカードについて紹介しましたが、オススメは プラグインを使ったブログカードです。
カスタマイズする時間は、本業に費やした方がいいですね。
筆者の考え方は、下記の記事の通りなので・・・

 

アメブロのブログカード

アメブロのブログカード
アメブロのブログカードは簡単に作成できます。
以前書いた記事があるので参考にしていただければと思います。

 

はてなブログでのブログカード

はてなブログ
上記画像がはてなブログでブログカードを表示させた状態ですが・・・

はてなブログ ブログカード作成
アメブロのようにアドレスを入れるだけでなくアドレスを入れた後に「プレビュー」ボタンをクリックして選択する方式になってますね。
手間はかかりますが、この方が間違える確率が減り初心者の方にやさしいと思います。
また、文字数もiFrameというタグを使っているのでアメブロと比べてはるかに少ないですね。
タグが長いと記事のファイルサイズに影響するのでそういった意味においてもこの方式はいい方法だと思います。

 

まとめ:ブログカードとテキストリンクの使い分け

ブログカードって何?
さていかがだったでしょうか?
ブログカードがどんなものなのかこれで少しは理解していただけたでしょうか?
 WordPressアメブロはてなブログの3つで比べてみましたがそれぞれに特徴があって面白いですね。
このブログカードとテキストリンクをどう使い分けるのか?
これは記事の書き方に影響してきますね
筆者の場合は、文章の中ではテキストリンクにします。
だいたいよく使うリンクなどはInert Textに登録しているのでそう決めています。
ブログカードにする場合は、「下記の記事を参考にしてください。」などという場合にブログカードを使用しています。
うまく使い分けてください。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!