必要なもの
- オシャレな記事内リンク(ブログカード)を作りたい！
- 画像付きのリンクの作り方を知りたい
- 出来ればプラグインなしで作成する方法はないですか？
こんな悩みに答える記事になっています。
リンク、記事内に沢山置いていますか？
色々な記事を見てもらうために、記事をリンクでつなげていくのはSEO的にも必須。
でも、そのリンクのデザイン次第で回遊率は当然変わってくるわけです。
おしゃれなリンクの作り方ってない？でも難しいのは無理。
とりあえず、コピペで終わるのをお願いします！！
という方に向けた記事になっています。
この記事では、誰でも簡単に画像付きのおしゃれなリンク（ブログカードやリンクカードともいいます）を作成する方法について解説していきます。
maipyon
タダのリンクと、今回紹介するブログカード(シンプルな見た目のもの)で比較をしてみたのですが、クリック率は2.3%→2.8%まで上昇しました。
リンクを変えただけで上記の結果になったので、効果については実証済みです。
maipyon
「はてなブログみたいなリンクを作りたい」という人、必見です。
この記事の目次
今回作成するブログカード
今回作成するブログカードは、以下のようなものです。（画像です）
シンプルなバージョンも！
画像・抜粋文付きでかなりおしゃれにできたのではないでしょうか。
レスポンシブ対応で、スマホでもPCでも同じように見えます。
ここぞという場面で使ってください。
ブログカード化してないリンクと比較する
ブログカード化していないリンクだと、以下のようなものになります。
コピペでOK!今までにやってきたブログデザインをまとめてみました
単純なテキストリンクや・・・
コピペでOK!今までにやってきたブログデザインをまとめてみました
こんなリンク。（上記のリンクの作り方はリンク先の記事内にあります。）
あまりにもブログカードが多いとうっとおしいので、使い分けつつ、ブログカードは必殺技みたいなイメージで使えばいいのではないでしょうか。
ブログカードを使うようになってから、確実に直帰率は減少傾向にあります。
ブログカードの作り方（プラグインなし）
ブログカードを作成するには、自作するか、プラグインに頼るくらいの方法しかありません。
タダのリンクだと画像をとってこれないんですよね。
プラグインに頼ると
- 重くなる
- デザインも完全に自由とは言えない
という弊害が。
ブログカードを作成するときには、「Pz-LinkCard」という有名なプラグインがありますが、重くなります。
検索しようと思ったら、関連キーワードに出てくるくらいです。
ブログカードを自作する方法
というわけで、自作で軽く済ませましょう！
自作？難しいんじゃないの？
いいえ、function.phpとstyle.cssにて、コピペをするだけでOKですので、簡単です。
function.phpは超大事な部分なので、いじるときはバックアップを取っておいてくださいね。
参考記事：【WordPress】コピペで実装ブログカードの作り方【プラグインなし】
ブログカード化するためのコード
まずは、以下のコードをfunction.phpに貼り付けましょう。
一番下側でOKです。
どちらのデザインにする場合も、function.phpは同じです。
ややこしくない。万歳。
// 記事IDを指定して抜粋文を取得
function ltl_get_the_excerpt($post_id){
global $post;
$post_bu = $post;
$post = get_post($post_id);
setup_postdata($post_id);
$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);//YoastSEOから
$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),'medium');
$img_tag = "<img src='" . $img[0] . "' alt='{$title}'/>";
}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>
<div class="clear"></div>
</a>
</div>';
return $nlink;
}
add_shortcode("nlink", "nlink_scode");
これ、抜粋文の部分を、きちんと設定したメタディスクリプションからとってきています。
上記のコードはYoastSEOを使っている場合で、All in One SEOを使用しているなら、少しコードを変更してください！
いやどっちも使ってねーし！という方は、抜粋文（上から110文字）をとってくるようにしましょう。以下のコードを参考に、7行目の$output =・・・の部分を変更してみてください。
追記：最近はテーマ自体にデスクリプションを指定できる機能があるので、各テーマで調べてみて書き換えた方が良さそうです。
//YoastSEOを使っている人（そのままでOK)
$output = get_post_meta($post_id,'_yoast_wpseo_metadesc',true);//YoastSEOから
//上記のコードの部分を、All in One SEOを使っている人は↓に変更
$output = get_post_custom()['_aioseo_description'][0];//AllinOneSEOから
//どっちも使っていない人は↓に変更
$output = get_the_excerpt();
//SANGOを使っている人は↓に変更
$output = get_post_meta( $post_id, 'sng_meta_description', true );
これでfunction.phpについては完了です！
ブログカードのデザインを変更するためのコード
このままではブログカードのデザインはズタズタです。
ブログカードのデザインを綺麗に見せるために、CSSもstyle.cssの一番下側にコピペしていきます。
色付きのものと、シンプルなものと、2種類あるので好きなほうどちらかを選んでコピペしてください！
色付き&抜粋文付きの見本
.blog-card {
background: rgba(251, 140, 0, 0.02);
border: 1px solid #fb8c00;
word-wrap: break-word;
max-width: 100%;
border-radius: 5px;
margin: 0px 10px 15px 10px;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .2);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.blog-card:before {
font-family: FontAwesome;
position: absolute;
padding: 2px 6px;
content: "\f02e 詳細を見る";
background-color: #fb8c00;
color: #fff;
font-size: .8em;
z-index: 1;
}
.blog-card a {
text-decoration: none;
}
.blog-card-thumbnail {
width: 35%;
display: table-cell;
vertical-align: middle;
padding: 10px 0 10px 10px;
}
.blog-card-thumbnail img {
padding: 0;
}
.blog-card-content {
display: table-cell;
vertical-align: middle;
}
.blog-card-title {
font-size: 1em;
margin: 5px 10px 5px 0px;
font-weight: bold;
line-height: 1.4;
}
.blog-card-title:hover {
text-decoration: underline;
}
.blog-card-excerpt {
font-size: .74em;
color: #4c4c4c;
margin: 0 10px 5px 0;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card .clear {
clear: both;
}
@media screen and (max-width: 500px) {
.blog-card:before {
font-size: .56em;
}
.blog-card-title {
font-size: .70em;
}
.blog-card-excerpt {
font-size: .60em;
}
}
ブログカードをデザインをシンプルに見せるためのコード
シンプルな見た目にする場合でも、function.phpは変えなくてOK！
同じようにそのままCSSを貼り付けましょう。(ただし、両方のCSSを貼るのはNGですよ)
シンプルバージョン見本
抜粋文はCSSで消しているだけなので、どうしても気になる方は危険をおかしてfunction.phpを改変してくれればと思います。
気にならないのであればそのままコピペすればいいです。
.blog-card {
position: relative;
border: 2px solid #e5e5e5;
word-wrap: break-word;
box-sizing: border-box;
max-width: 100%;
margin: 1em 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card:hover {
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.blog-card a {
text-decoration: none;
display: block;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card a:hover {
color: #333;
background: rgba(235, 235, 235, 0.8);
text-decoration: none;
}
.blog-card-thumbnail {
width: 200px;
display: table-cell;
vertical-align: middle;
}
.blog-card-thumbnail img {
padding: 0;
max-width: 100%;
}
.blog-card-content {
display: table-cell;
vertical-align: middle;
padding: 0.4em;
border-left: #e5e5e5 solid 2px;
}
.blog-card-title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
color: #333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card-excerpt {
display: none;/*消します*/
}
.blog-card .clear {
clear: both;
}
@media screen and (max-width: 500px) {
.blog-card-title {
font-size: .85em;
}
.blog-card-thumbnail {
width: 160px;
}
}
これで完成です！
各自で色を調節してみてください。
シンプルなブログカードデザインにラベルを付ける方法
シンプルなブログカードデザインは、逆にリンクとして認識されないという恐れがあります。
そこで、以下のようなラベルを付け足す方法も紹介します。
これでリンクだと認識されやすくなるので、クリック率も上がるかと思います！
やり方は、まず最初に紹介したfunction.phpに1行付け足します。
付け足すコードは以下のコードの3行目の部分。
「関連記事」の文字を「人気記事」に変えるなども可能です！
$nlink .=' <div class="blog-card"> <a href="'. $url .'"> <div class="blog-card-label">関連記事</div> <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> <div class="clear"></div> </a> </div>';
そして、さらに以下のCSSを追加すればOKです。
ラベル部分のCSSですね。
/*ブログカードでラベルを付ける*/
.blog-card-label{
display: inline-block;
position: absolute;
background-color: #ffb36b;
top: 0px;
left: 0px;
width: 70px;
height: 25px;
color: #fff;
font-size: .8rem;
font-weight: 700;
text-align: center;
line-height: 25px;
transform-origin: 50% 50%;
animation: animScale 3.5s ease-out;
}
ラベルの名前は自由に変更可能なので、是非もっとクリック率を高めたいのであれば追加しましょう！
ブログカードの使い方
使い方は簡単です。
以下の画像の通りに書けば大丈夫！
簡単に実装できますね。
毎回書くのが面倒な時は、辞書登録しておくか、AddQuickTagというプラグインを使用して登録しておけば簡単です。
ブログカードを使って直帰率を下げよう！
誰でも簡単に、おしゃれなブログカードを実装する方法について解説しました。
私も離脱率の高さに悩んでおりまして、これを使用することで確実に数パーセント下げることができました！
アイキャッチ画像に凝っているブログは、特に実装すべきではないかと！
参考にしつつ、やってみてください～！
