はてなのブログカード風にリンクをカスタマイズする方法！

皆さん「ブログカード」ってご存知ですか？
先に答えを言うとこういうのです↓↓

はてなブログユーザーならよく利用されていると思いますが、このリンクボックスの事を「ブログカード」と呼ぶそうです。

ブログカード

ブログカードはデザインも良いですが、記事のタイトルや概要、アイキャッチ画像なども一緒に表示出来るので、ひと目でどのような内容なのかわかるので凄く便利ですよね！
僕もリンクを掲載する時にはよく使います。

このブログカードですが、はてなブログ以外のWordPressやその他のブログでもよく見かけます。

こんな感じ↓↓

Create LinkとMake Link

「Create Link」も「Make Link」もブログカード用に開発されたわけではなく、自分でリンク方法をカスタマイズするための拡張機能としてあるものです。
どちらも使用方法は同じなので、ご利用のブラウザによって使い分ければ良いと思います。

Create LinkとMake Linkの使い方

使い方は凄く簡単ですが、寝ログさんが詳しく説明されているのでそちらをご覧下さい。

はてなブログカードのような美しい外部リンクをクリック一発で作成する方法

今回は、ブラウザ上から以下のような綺麗なブログカードをクリック一発で作成する方法です。 上記のブログカードの記…

nelog.jp

本題はココからです！

ブログカード風にリンクをカスタマイズ

はてなブログのブログカードも、Create LinkやMake Linkも＜iframe＞を使ってリンクを生成していますが、個人的に＜iframe＞はあまり好きではありませんｗ

好きでは無い理由は、すばりデザインがイジれない点ですね！

ブログカード自体、デザインは気に入っているので特に不満はありませんが、どうしてもはてなさんに依存した仕様となっているので、万が一、いや億が一はてなブログがなくなった場合に利用出来なくなります。

他にも＜iframe＞の場合、通常のリンクよりもリクエスト数が増えるのでおそらくページの読み込み速度も遅くなります。

SEOの観点からいうと昔はiframeはSEO的にマイナス要因と言われていましたが、HTML5では正式に採用されているのでマイナス要因になることは無いと思います。

それなら問題ないやん！

と思われるかもしれませんが、個人的にはiframeを使ってリンクする方法は避けたい。

そこで僕は考えました！

HTMLで生成したら良いやん！

「iframeもHTMLやけど！」とツッコまれそうですが、僕が言いたいのは＜iframe＞で外部ファイルを読み込むのではなく、通常のリンクのようにリンクを生成する！という事です。

はてなブログのブログカードは、OGPの情報を元に記事のタイトルや概要、アイキャッチ画像を生成しています。（多分ｗ）

OGPというのは、Facebookやtwitter等のソーシャルサービスと連携するために記述しているもので、ほとんどのブログサービスでも使用されています。

OGPというのはこんな感じのです↓↓

<meta property="og:title" content="記事タイトル"/>
<meta property="og:url" content="記事URL"/>
<meta property="og:image" content="画像URL"/>
<meta property="og:description" content="記事の説明文" />
<meta property="og:site_name" content="ブログ名"/>

このOGPを読み込む事が出来るなら＜iframe＞である必要は無いですよね！

しかし一つ問題が…

どうしたらOGPを読み込む事が出来るの？

僕には知識がありません＞＜

そこで、僕はまたまた考えました！

知識のある人に相談しよう！

幸いにも、僕の「あ～したい」「こ～したい」を叶えてくれる心優しい友人がいたので、さっそく相談したところ快く引き受けてくれました！

ありがとうS氏！

ブログカード風リンクボックス

使い方を説明する前にまずは作ったブログカード風リンクボックスをご覧ください。

◆作成したリンクボックス ↓

アクセスアップの為のブログ運営マニュアル！ – 晴れ時々晴天なり

ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。アクセスアップ術やSEO、他にも収益方法などを紹介しているので参考になれば幸…

本家ブログカードと比べると若干？の見劣りはあると思いますが、このリンクボックスはCSSを使うことで背景色や文字サイズ等、自由にカスタマイズすることが出来ます。

OGPが設定されていない場合はmeta情報を元に生成します。
その場合、アイキャッチ画像が無いので以下のような形になります。

使用方法

使い方はとても簡単で、「ブックマークレット」を使ってOGP情報を取得します。

＿＿＿＿＿＿＿＿
◆手順1
この【ブックマークレット】を使ってお気に入りのページをブックマークするように登録してください。

上記のリンクをマウスでドラッグして、ブックマークバー上でドロップして下さい。
IEの場合は、リンクの上で「マウスを右クリック」→ 「お気に入りに追加」で登録できます。

もし、どうしても上記のリンクよりブックマークレットが登録出来ない場合には、適当なサイトをブックマークしてその中身（URL部分）を編集して以下の内容をコピーして保存して下さい。

◆コピーする内容

javascript:(function(f,s){s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){var c = [];var r;c.u = document.URL;c.t = $('title').text();c.d = $('meta[name=description]').attr('content').substr(0,99);c.i = $('meta[property="og:image"]').attr('content');c.n = $('meta[property="og:site_name"]').attr('content');c.td = document.domain;if(c.n != null){c.np = '<p>'+c.n+'</p>';} else {c.np = '';};if(c.i != null) {r = '<div class="ogp_card clearfix"><img src="'+c.i+'" alt="'+c.n+'" width="100" height="100"><p class="title"><a href="'+c.u+'" target="_blank">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="http://'+c.td+'" target="_blank">'+c.td+'</a></p></div>';} else {r = '<div class="html_card"><p class="title"><a href="'+c.u+'" target="_blank">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="http://'+c.td+'" target="_blank">'+c.td+'</a></p></div>';};$('body').prepend('<textarea style="width:90%;height:200px;">'+r+'</textarea>');})();

スクリプトの内容を簡単に説明すると、JAVASCRIPTを使ってOGPがあるページではOGP情報を取得し「.ogp_card」のスタイルを適用しています。
またOGP情報が無いページではmeta情報を取得し「.html_card」のスタイルを適用するように設定しています。

＿＿＿＿＿＿＿＿
◆手順2
リンクを作りたいページ上で「ブックマークレット」をクリックするとページ上部に生成されたHTMLタグが表示されるので、そちらをコピー。

生成されるHTMLはこんな感じです↓

<div class="ogp_card clearfix">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kasakasa7970/20160926/20160926185006.jpg" alt="晴れ時々晴天なり" width="100" height="100">
<p class="title"><a href="https://www.aritai.net/entry/blog-manual" target="_blank">アクセスアップの為のブログ運営マニュアル！ - 晴れ時々晴天なり</a></p>
ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。アクセスアップ術やSEO、他にも収益方法などを紹介しているので参考になれば幸…
<p class="copy"><a href="https://www.aritai.net" target="_blank">www.aritai.net</a></p>
</div>

＿＿＿＿＿＿＿＿
◆手順3
手順2でコピーしたHTMLタグをお使いのブログサービスの記事編集画面上に貼り付ければ完了です！

◆適用するCSS

/* デフォルト */
.ogp_card{
display: block;
background: #FFFFFF;
color: #000000;
width: 95%;
max-width: 500px;
border-radius:3px;
border: 1px solid #DDDDDD;
margin: 10px 0 25px 0;
padding: 10px;
font-size: 75%;
line-height: 17px;
}
.ogp_card a{
font-weight:bold;
font-size: 16px;
color: #3D3F44;
text-decoration: none;
}
.ogp_card .title{
margin: 3px 0 5px 0;
}
.ogp_card .copy{
padding: 0;
margin: 10px 0 0 0;
}
.ogp_card .copy a{
font-size: 70%;
font-weight: normal;
color: #9AA5AB;
}
.ogp_card a:hover{
text-decoration: underline;
}
.ogp_card img{
float:right;
margin: 0 0 10px 10px;
}
.ogp_card .clearfix {
clear: both;
}
@media only screen and (max-width: 767px) {
.ogp_card img{
width: 80px;
height: 80px;
margin: 0 0 7px 7px;
}
.ogp_card a{
font-size: 14px;
}
}
/* OGPが無い場合 */
.html_card{
display: block;
background: #FFFFFF;
color: #000000;
width: 95%;
max-width: 500px;
border-radius:3px;
border: 1px solid #DDDDDD;
margin: 10px 0 25px 0;
padding: 10px;
font-size: 75%;
line-height: 17px;
}
.html_card a{
font-weight:bold;
font-size: 16px;
color: #3D3F44;
text-decoration: none;
}
.html_card .title{
margin: 3px 0 5px 0;
}
.html_card .copy{
padding: 0;
margin: 10px 0 0 0;
}
.html_card .copy a{
font-size: 70%;
font-weight: normal;
color: #9AA5AB;
}
.html_card a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
.html_card a{
font-size: 14px;
}
}

※このCSSは素人に毛が生えた程度の人間が書いているのでじゃんじゃん修正してくださいｗ

カスタマイズ例

このリンクボックスは、CSSを使えばお好みのデザインに変更することが出来ます。
CSSの知識がある方は、お好みのデザインに変更してお使い下さい！
僕が作ったデザインも1つ紹介しておきますのでよろしければご利用下さい！

twitter風リンクボックス

twitterやFacebookでよく見かけるリンク方式のリンクボックスです。
アイキャッチ画像とボックスの余白を無くしスペースを抑えました。

アクセスアップの為のブログ運営マニュアル！ – 晴れ時々晴天なり

ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術…

※こちらを使う場合はブックマークレットも変更する必要があります。

こちらの【ブックマークレット】をお使い下さい。

◆ブックマークレットの内容

javascript:(function(f,s){s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){var c = [];var r;c.u = document.URL;c.t = $('title').text();c.d = $('meta[name=description]').attr('content').substr(0,49);c.i = $('meta[property="og:image"]').attr('content');c.n = $('meta[property="og:site_name"]').attr('content');c.td = document.domain;if(c.n != null){c.np = '<p>'+c.n+'</p>';} else {c.np = '';};if(c.i != null) {r = '<div class="tw_card clearfix"><img src="'+c.i+'" alt="'+c.n+'" width="100" height="100"><p class="title"><a href="'+c.u+'" target="_blank">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="http://'+c.td+'" target="_blank">'+c.td+'</a></p></div>';};$('body').prepend('<textarea style="width:90%;height:200px;">'+r+'</textarea>');})();

◆適用するCSS

/* twitter風 */
.tw_card{
display: block;
background: #FFFFFF;
color: #000000;
width: 95%;
max-width: 500px;
height: 110px;
border: 1px solid #DDDDDD;
margin: 10px 0 25px 0;
padding: 0 10px 0 0;
font-size: 75%;
line-height: 17px;
}
.tw_card a{
font-weight:bold;
font-size: 16px;
color: #3D3F44;
text-decoration: none;
}
.tw_card .title{
margin: 9px 0 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.tw_card .copy{
padding: 0;
margin: 8px 0 0 0;
}
.tw_card .copy a{
font-size: 70%;
font-weight: normal;
color: #9AA5AB;
}
.tw_card a:hover{
text-decoration: underline;
}
.tw_card img{
height: 110px;
float:left;
margin: 0 10px 0 0;
}
.tw_card .clearfix {
clear: both;
}
@media only screen and (max-width: 767px) {
.tw_card a{
font-size: 14px;
}
.tw_card img{
width: 80px;
height: 80px;
margin: 0 7px 0 0;
}
}

タイトルを省略したい場合

デフォルトではタイトルの文字数を全て表示させていますが、文字数をボックスの幅で省略したい場合は以下のCSSを「.ogp_card .title」「.html_card .title」のそれぞれに追加して下さい。
twitter風のCSS「.tw_card .title」には実装済です。

例）

.ogp_card .title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

◆こんな感じ ↓

アクセスアップの為のブログ運営マニ…

ブログのアクセス数が20万PV達成しましたので、今までブログを運営する上で実践してきたブログ運営術を公開したいと思います。アクセスアップ術やSEO、他にも収益方法などを紹…

上記のようにCSSを使って省略することも出来ますが、生成されたHTMLを直接編集すれば自由にタイトルや説明文を削除することも可能です。

メリット・デメリット

ブログカード風リンクボックスのメリットとデメリットを紹介します。

◆メリット

• デザインが変更できる
• リンク方法（「nofollow」や「target=”_blank”」等）を指定できる
• ページの読み込み速度が早くなる
• はてなブログに依存しない

◆デメリット

• はてブ数、はてなスターを表示出来ない
• タイトルにブログ名が入る（生成されたHTMLを直接修正すれば消せます）

補足事項

このリンクボックスの使用について補足事項を説明しておきます。

• 「.ogp_card」「.html_card」共にボックス内の説明文は最大100文字に設定しています。
• 「.tw_card」の説明文は最大50文字に設定しています。
• ターゲット指定は「_blank」に設定しています。
• アイキャッチ画像は画面サイズに応じて変更しています。

上記のどの部分にも言えることですが、HTMLで生成しているので文字数やターゲットの指定も直接変更することが出来ますのでご自由に変更してみて下さい。

最後に

いかがだったでしょうか？はてブ数やはてなスターを表示することは出来ませんが、HTMLでブログカード風のリンクボックスを作ってみました！もらいましたｗ

はてなブログのブログカードが悪いわけではなく、iframe以外の方法でリンクを生成したかったので作ってみました！もらいましたｗｗ
（CSSは僕ですｗ）

このリンクボックスの一番の特徴はやはりデザインが変更出来る点です。
今回僕が紹介しているのは本家ブログカードに似せたカスタマイズですが、CSSの知識がある方ならもっとオリジナリティのあるデザインも作成出来ると思います！

今回、ブログカードに似せて作ってみましたが、いかにはてなブログのブログカードが優れているかよくわかりましたｗ
細部に渡るまでいろいろと考えられていて感心しました！

HTMLで生成したブログカード風のリンクボックスにどれだけの需要があるかはわかりませんが、もし僕と同じく現在のブログカードに不満を感じている方、デザインをカスタマイズしてみたい方がいれば一度使ってみて下さい！

最後に、最低限の動作確認（safariの動作未確認）は行っていますが、個人的に作成したものなのでスクリプトがうまく起動しない等の動作不良があった場合には申し訳ありません。
その点を了承頂ける方のみご利用下さい。