この記事は約 9 分で読めます。

ブログカードとは、ページ内に内部リンクを貼る際にアイキャッチ画像と記事タイトル・テキストなどの要素を1枚のカードのようにまとめて装飾したリンクのことです。

ブログカードを設置する目的は、ページを訪れたユーザーにより分かりやすい形で有益なリンク先を提示することで内部リンクのクリック率を上げて(離脱率を下げて)、より多くのページを見てもらい、PV(ページビュー)・回遊性アップに繋げることです。

本記事ではそんな便利な「ブログカード」をプラグインを使わずにWordPressの投稿記事内に簡単に設置する方法を考察を交えて紹介します 。

ブログカードを設置する目的

ブログカードを設置する目的は、内部リンクのクリック率を上げて、PVアップに繋げることです。

記事内にテキストリンクを貼る場合、通常は以下のようになりますが、
https://dis-play.net/blog/wordpress/shortcoder/

これをブログカードリンクにすると以下のようになります。

同じリンク先でも画像や記事タイトル・抜粋文が記載されているので内容が分かりやすいですよね。

但し、注意点として記事内の全てのリンクを「ブログカードにしたほうがよい」というわけではなく、記事内容に関連した有益なリンク先に絞ってブログカード化した方がよいでしょう。

アフィリエイト系サイトで広告をペタペタ貼りまくっている場合は、広告とブログカードの違いが曖昧になるため、使い方には注意した方がよいでしょう。

また、ブログカードはテキストリンクと違って物理的な面積を占有します。
スマートフォンではリンク範囲が広くタップしやすい反面、乱用するとUI・操作性が悪くなるため、注意が必要です。

重要なことなので何度も言いますが、ブログカードの設置目的は冒頭で述べた通り、あくまでページを訪れたユーザーにより分かりやすい形で有益なリンク先を提示することで内部リンクのクリック率を上げて、PV・回遊性アップに繋げることです。

それでは設置方法を解説していきます。

ブログカードの設置方法

最初にお伝えしておきますが、本手順ではWordPressのPHPテンプレートファイル(functions.php)を直接編集することになるため、そのリスクを理解した上で必ず一度テスト環境上で試されることを奨励します。

作業はWordPressの管理画面上で行わず、FTPなどでファイルをローカルに落とした上でバックアップを取ってから行った方がよいでしょう。

設置に際して調整が必要なファイルは以下の2点です。
作業はいずれもコピペ+@でおよそ10分もあれば完了します。

  • functions.phpの編集(コードをコピペ)
  • CSSの設定(任意のstyle.cssにCSSコードをコピペ)

functions.phpの編集

最初にfunctions.phpの編集を行います。
子テーマが利用できる環境であれば子テーマのfunctions.phpを利用しましょう。

以下ソースを丸ごとコピーして、functions.phpの一番下に貼り付けてください。

貼り付け箇所を間違えたり、不用意な操作で閉じタグなどのソースを消さない限り、基本的にコピペするだけでfunctions.phpの編集は完了します。

もしfunctions.php編集中にソースのコピペミスや閉じタグ忘れなどのミスで画面が真っ白になってしまった場合は、バックアップしておいたファイルをFTP経由で上書きアップロードすれば直りますのでご安心ください。

//内部リンクをブログカードにするショートコード
function show_blogcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//URLから投稿IDを取得
	$id = url_to_postid($url);
	//画像サイズの横幅を指定
	$img_width ="90";
	//画像サイズの高さを指定
	$img_height = "90";
	//アイキャッチ画像がない場合の画像を指定
	$no_image = '/wp-content/uploads/xxxx/xx/xxx.png';
	
	//タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
	
	//本文を取得
	if(has_excerpt($id)){
		//抜粋文字列がある場合
		$excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
	} else {
		//抜粋文字列がない場合本文から切り出し
		$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
	}
	
	//アイキャッチ画像を取得
	if(has_post_thumbnail($id)) {
		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
		$img_tag = '<img src="'. $img[0] .'" alt="'. $title .'" width="'. $img[1] .'" height="'. $img[2] .'" />';
	} else { 
		$img_tag = '<img src="'. $no_image .'" alt="" width="'. $img_width .'" height="'. $img_height .'" />';
	}
	
	//ブログカード部分のHTML
	$sc_blogcard .='
	<div class="blogcard">
	<a href="'. $url .'">
	 <div class="blogcard_thumbnail">'. $img_tag .'</div>
	 <div class="blogcard_content">
	  <div class="blogcard_title">'. $title .'</div>
	  <div class="blogcard_excerpt">'. $excerpt .'</div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	return $sc_blogcard;	
}

//ショートコードに追加
add_shortcode("sc_blogcard", "show_blogcard");

ご自身の環境に合わせて任意で変更が必要な箇所は以下です。

  • 画像サイズ
  • アイキャッチ画像がない場合の$no_image画像のパス
  • 本文を取得した時の抜粋文字数

画像サイズ
12/14行目:サムネイル画像のサイズや縮尺比率を調整。
そのままのサイズで利用する分には変更の必要はありません。

//画像サイズの横幅を指定
$img_width ="90";
//画像サイズの高さを指定
$img_height = "90";

アイキャッチ画像がない場合の$no_image画像のパス
16行目:記事に設定されたアイキャッチ画像が見当たらない場合に入る画像。

//アイキャッチ画像がない場合の画像を指定
$no_image = '/wp-content/uploads/xxxx/xx/xxx.png';

ここはご自身の環境に合わせて画像アップ&画像までのパスを入れてください。


本文を取得した時の抜粋文字数
26/29行目:記事タイトル下の本文抜粋文字数を調整。

//本文を取得
if(has_excerpt($id)){
	//抜粋文字列がある場合
	$excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
} else {
	//抜粋文字列がない場合本文から切り出し
	$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
}

当サイトでは現在の文字サイズで基本的に2行で収まるように72文字に設定しています。
抜粋文字数を多く載せたい場合は文字数を多めに設定するとよいでしょう。

※抜粋の有無で分岐させているのは特定環境下で表示を担保するためです。


以上、コピペ+@でそのまま利用できますが、抜粋の有無で分岐させた理由を一応書いておきます。

固定ページへの内部リンクをブログカード化する場合、使用するテーマによっては本文取得時にテーマ固有のページビルダーによって自動挿入されるショートコードが原因で崩れが発生する現象が見られました。
※当サイトでは問題なく動作しますが、別テーマのサイトで見られました。

これは固定ページとブログ投稿記事ではテンプレートの構造が異なるからなのですが、その場合は固定ページに「抜粋」文字列を設定しておくことで回避できます。

この辺りの処理はもっとよいやり方があると思いますが・・・

投稿から文字列を切り出す際の方法は以下の記事で詳しく説明しています。

CSSコードの設定

CSSは以下になります。
使用中の任意のスタイルシートに丸ごとコピペしてください。

.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  word-wrap: break-word;
  margin: 40px;
  box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
}
.blogcard a:hover {
  opacity: 0.6;
}
.blogcard_thumbnail {
  float: left;
  padding: 20px;
}
.blogcard_title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  padding: 17px 20px 10px;  
}
.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px;
}

CSSを調整することで装飾は任意に変更いただけます。
参考までに主な調整箇所を記載しておきます。

  • 枠線や塗りの色
  • 文字サイズ
  • その他

枠線や塗りの色
2行目:background-color:#ffffff; でボックス内の背景色を調整。
3行目:border: 1px solid #eeeeee; で枠線の色を調整。


文字サイズ
22行目:font-size: 1em; で記事タイトルの文字サイズを調整。
28行目:font-size: 0.85em; で抜粋文の文字サイズを調整。

ブログ記事に設定している大元の文字サイズとの兼ね合いでバランスを見て調整するとよいでしょう。


その他
余白関係を調整したい場合は、6行目のmargin(カード左右上下の余白)、各行にあるpadding(カード内部の余白)、テキスト行間はline-heightの各数値で調整可能なので、お好みの数値に調整してご使用ください。

また、ブログカード部分のHTML構造を保持している限りは追加で装飾用のタグを加えたりすることも可能です。

スマートフォン用のCSS調整

こちらは任意になりますが、スマートフォンで表示した際に抜粋文を非表示にしたい場合や、それに伴う調整用のCSSを参考までに記載しておきます。

コピペ+@で任意で調整してください。

@media screen and (max-width: 768px) {
  .blogcard {
    margin: 40px 0;
  }
  .blogcard_title {
    font-size: 0.95em;
    padding-bottom: 17px;
  }
  .blogcard_excerpt  {
    display: none;
  }
}

CSSの設定が完了したら、テーマで使用しているCSSに反映して保存・アップロードしてください。

設定については以上で完了です。

ブログカードの使い方

エディタ内でブログカードとしてリンクを貼る際は、以下のようなショートコードとして挿入します。

[sc_blogcard url="リンク先URL"]

sc_blogcardはfunctions.php内で先ほど設定したショートコード名で、
url=”リンク先URL”の部分を以下のように任意のURLに置き換えて利用します。

[sc_blogcard url="https://dis-play.net/wordpress/shortcoder/"]
↓ ショートコードはビジュアルエディタ上でのプレビューはできませんが、以下のようになります。

内部リンクであれば、通常の固定ページもブログカードとして挿入することが可能です。

まとめ

今回はプラグインを使わずにWordPressの投稿記事内に「内部リンクのブログカードを作成する方法」をご紹介しました。

ブログカードは設置が簡単な上に、その特性を理解した上で上手く活用すればPV・回遊率アップにはそれなりの効果があります。

ブログカードよりテキストリンクの方がSEOには効果的?
テキストリンクの方が実はクリック率が高い?

という意見がネット上で見られるケースがありますが、比較対象と状況によるでしょう。

例えば当該ページのコンテンツと全く関連性のない、PVアップのためだけに有益でないリンク先をブログカードで並べた場合、どうでしょうか?

アフィリエイト目的のサイトで広告を貼り付けまくりな上に、PVアップのためだけにブログカードで他ページへ誘導するリンクを貼りまくる、といった場合はむしろユーザビリティを阻害しているペナルティリンクとも受け止められかねません。

ブログカードを使用する場合はテキストリンクを併用しつつ、当該ページのコンテンツと関連性の高い有益なリンク先をブログカード化して流入を狙うのがよいでしょう。

記事数が増える程、記事間を横断して読まれるケースも増えるため、ロングテールSEOの強い味方になるのが今回ご紹介したブログカードです。

筆者が運営管理をしているいくつかのウェブサイトにおいてはブログカードを設置後、PVがゆるやかな上昇傾向にあります。

また状況によっては依然としてテキストリンクの方が効果的なケースもあると思われるため、自サイトでテキストリンクとブログカードのクリック率をABテストで検証して、ゴールデンパターンを探してみるとよいかもしれませんね。

5/31追記:外部リンク対応のブログカードも作成しましたのでご興味ある方はどうぞ。

弊社では、補助金を活用したECサイト構築やホームページ制作の無料相談を承っております。お気軽にご相談ください。
無料で相談してみる