ブログカードって何？
この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
唐突に「ブログカードって何？」って聞かれて答えられますか？
筆者は、仕事柄よく利用しているので答えられますけど
今回は、そのブログカードに関することについて掘り下げてみます。
知っているとお友達の記事を自分のブログで紹介する時に便利ですね
ブログカードとは
ブログカードとは、テキストリンクをより魅力的に読者に伝えるアイテムの１つという認識を筆者は、持っておりブログシステムの中でもその表現法は様々です。
下記は、はてなブログではてなブログHELPページに記載されていることを抜粋しました。
「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。
はてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまった ブログカードの形式で埋め込むことができます。
上記のように考え方は、そう大きく変わらないのですが表現方法については様々で人のやり方やブログシステムの違いなどを詳しく見ていくと勉強になることも多いですね。
今回は、WordPressとアメブロとはてなブログで比べてみたいと思います。
WordPressの場合のブログカード
WordPressでの「ブログカード」では基本的にその機能が100%同じではないですがあるのです。
上記のように簡単に表示できる場合があります。
|
1 |
https://wp908.com/2021/01/06/ogp-twittercard/ |
上記のようにアドレスを1行入れただけです。
簡単なのですが、下記の項目に注意していただく必要があります。
- WordPress のバージョンが 4.4以降であること
- URL は 1行に 1 URLを記述すること
- URL の前後には余分なテキストや空白を挿入しないこと
- 自サイトのURLもしくはWordPRess.orgのサイトであること
ただこれだと他社のサイトなどをリンクした時にブログカードになりませんね
そのために２つの方法でブログカードを作ることが可能です。
TCDのテーマがそんな感じですね。
上記のように表示され同じドメインでないとOGP画像の取得ができてないように思いますね。
このようにテーマでブログカードが用意されている場合もあるのです。
プラグインを使ったブログカード
「ブログカード wp プラグイン」でGoogleで検索すると高い確率でPz-HatenaBlogCardが表示されています。
当サイトでも利用させていただいてます。
はてなブックマーク風の表示法方が特徴です。
はてなブックマークの数やTweet数が表示されることがあります。
新しい後継のプラグインが公開されているのでそれを使う方がいいかもしれません。
Pz-LinkCardの方が設定の幅が広くわかりやすいですね。
記事の制作途中に入れ替えてみました。
Pz-HatenaBlogCardを使っていた方はタグの入れ替えなどしなくてもプラグインをインストール有効化した後にPz-HatenaBlogCardを無効化するだけでそのまま利用できます。
設定は、管理画面の設定メニューの中に組み込まれています。
このプラグインについては過去にも紹介した記事があります。
プラグインなしでブログカードを挿入する方法
ちょっと難易度高いですが、 プラグインを使わずにブログカードを実装することもできます。
これは直接テーマを触ることになるために子テーマの使用をオススメいたします。
実際に触るファイルは２つです。
functions.php と style.css ですが、下記にコードを掲載しますね
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// 記事IDを指定して抜粋文を取得 function ltl_get_the_excerpt($post_id){ global $post; $post_bu = $post; $post = get_post($post_id); setup_postdata($post_id); $output = get_the_excerpt(); $post = $post_bu; return $output; } // 内部リンクをはてなカード風にするショートコード function nlink_scode($atts) { extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ),$atts)); $id = url_to_postid($url); // URLから投稿IDを取得 $no_image = 'noimageに指定したい画像があればここにパス'; // アイキャッチがない場合の画像を指定 // タイトルを取得 if(empty($title)){ $title = esc_html(get_the_title($id)); } // 抜粋文を取得 if(empty($excerpt)){ $excerpt = esc_html(ltl_get_the_excerpt($id)); } // アイキャッチ画像を取得 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.'" />'; } $nlink .=' <div class="blog-card"> <a href="'. $url .'"> <div class="blog-card-thumbnail">'. $img_tag .'</div> <div class="blog-card-content"> <div class="blog-card-title">'. $title .' </div> <div class="blog-card-excerpt">'. $excerpt .'</div> </div> </a> </div>'; return $nlink; } add_shortcode("nlink", "nlink_scode"); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.blog-card { width: 100%; background: #f5f5f5; border: 1px solid #dddddd; word-wrap: break-word; margin: 1.5em 0 0; padding: 0; } .blog-card:hover { background: #dbe9f4; } .blog-card a { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } .blog-card-thumbnail { width: 20%; padding: 10px; } .blog-card-thumbnail img { width: 100%; border: none; display: block; padding: 0; } .blog-card-content { width: 78%; line-height: 1.5; } .blog-card-title { font-size: 15px; font-weight: bold; padding: 10px 10px 10px 0; } .blog-card-excerpt { color: #333333; font-size: 13px; padding: 0 10px 10px 0; } |
投稿や固定ページでの使用方法は下記のコードを追加
|
1 |
[nlink url="目的のページアドレス"] |
カスタマイズする時間は、本業に費やした方がいいですね。
筆者の考え方は、下記の記事の通りなので・・・
アメブロのブログカード
アメブロのブログカードは簡単に作成できます。
以前書いた記事があるので参考にしていただければと思います。
はてなブログでのブログカード
上記画像がはてなブログでブログカードを表示させた状態ですが・・・
アメブロのようにアドレスを入れるだけでなくアドレスを入れた後に「プレビュー」ボタンをクリックして選択する方式になってますね。
手間はかかりますが、この方が間違える確率が減り初心者の方にやさしいと思います。
また、文字数もiFrameというタグを使っているのでアメブロと比べてはるかに少ないですね。
タグが長いと記事のファイルサイズに影響するのでそういった意味においてもこの方式はいい方法だと思います。
まとめ：ブログカードとテキストリンクの使い分け
さていかがだったでしょうか？
ブログカードがどんなものなのかこれで少しは理解していただけたでしょうか？
WordPressやアメブロ・はてなブログの３つで比べてみましたがそれぞれに特徴があって面白いですね。
このブログカードとテキストリンクをどう使い分けるのか？
これは記事の書き方に影響してきますね
筆者の場合は、文章の中ではテキストリンクにします。
だいたいよく使うリンクなどはInert Textに登録しているのでそう決めています。
ブログカードにする場合は、「下記の記事を参考にしてください。」などという場合にブログカードを使用しています。
うまく使い分けてください。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存