はじめに
この記事は「はてなブログをカスタマイズして良くするプロジェクト」第5弾です。
先日「はてなスター★」を廃止し、サイトのページスピードを少し改善したのですが、他に通信速度を遅くしている所が無いか探したところ「はてなブログカード」が怪しいことが分かりました。
「はてなブログカード」はhttp://hatenablog.com/embed?url=[記事のURL]で記述されますが、はてなブログ以外でも使える便利なブログカードです。
しかし、はてなブックマーク件数、はてなスター、はてなスター画像をAPI取得しているので一定の通信時間が発生しており、ページの読み込みスピードが遅くなっている可能性があるようです。
今回の記事は「はてなブログカード」の代わりに、ブックマークレットを使った「Hatena風ブログカード」を埋め込み、ページスピードを速くする方法の説明です。
「ブログカード」の高速化やカスタマイズに興味がある方は、お暇な時に遊んでみて下さい。
「はてなブログカード」と「Hatena風ブログカード」の違い
さっそくブログカードのサンプルを表示してみます。
総説 新型コロナウイルス感染症（COVID-19）｜中外医学社Online｜note
2020年3月8日 国立国際医療研究センター 国際感染症センター 忽那賢志 感染症総合情報誌J-IDEOでは、本誌号外として国立国際医療研究センターの忽那賢志先生による「総説 新型コロナウイルス感染症（COVID-19）」を先行公開致します。忽那先生に現時点における最新知見をまとめて頂きました。 【3月10日更新】 本文中および文献リストの文献番号をクリックすることで、PubMed等の原著論文情報にアクセス出来るようになりました（一部文献は非対応）。 ポイント ・新型コロナウイルス感染症（COVID-19）はSARS-CoV-2による呼吸器感染症である。 ・
note.com
2つブログカードを表示しましたが、どちらが「はてなブログカード」でしょうか？
・
・
・
・
・
1番目のブログカードが「はてなブログカード」で、2番目のブログカードが「Hatena風ブログカード」です。
ご覧のように見た目は違いは、ほぼありません。
理由は管理人がデザインを似せたからです。（笑）
「Hatena風ブログカード」のメリット
「はてなブログカード」を「Hatana風ブログカード」に変更すると、どんなメリットがあるのでしょうか。
アクセス元が分かる
「はてなブログカード」経由での訪問は、参照元がすべて「hatenablog-parts.com」となるので、どのWebサイトからアクセスして来たのか知ることができません。
はてなユーザ同士は「言及」というドッキリ通知システムにより、ID〇〇さんがリンクを貼りました、と分かるようになってますが、はてなブログ以外のサイトは対象外です。
また、自サイトの「はてなブログカード」、他サイトの「はてなブログカード」のどちらからのアクセスなのか分からない不便さもあります。
「Hatena風ブログカード」を導入すれば、自サイトに他サイトのリンクを貼った場合、相手側もアクセス元を調べることが可能なので、自サイトをもっと詳しく知ってもらえるチャンスが生まれると思います。
ページスピードを改善できるかも
「はてなブックマーク」「はてなスター」を表示しないブログカードなら、はてなAPIを使わない分、通信速度の改善が期待できます。
なお「はてなブックマーク」「はてなスター」は幸い画像ファイルです。Lazylodingを使えば遅延読込が出来るため、「はてなブックマーク」「はてなスター」を表示してもページの読込みスピードが遅くなることを防止できます。
自由にカスタマイズできる！
「はてなブログカード」はiframeを使っているので、外観部分以外は弄れませんが、「Hatena風ブログカード」は自己責任で好き勝手にカスタマイズできます。
実は「Hatena風ブログカード」を作った一番の理由は、ブログカードのカスタマイズをやりたかったためです。
前回Twitter埋め込みのカスタマイズを紹介しましたが、これと同様にエッチなブログカードに変身させることが可能となります。（笑）
Twitterを自分好みのデザインにカスタマイズして埋め込む方法 - after work Labo
はじめに なぜTwitterの埋め込みをカスタマイズするのか タイムラインとツイートで使える属性 埋め込みコードの属性一覧表 タイムラインとツイートの埋め込み ツイートの埋め込み方法 ツイートを埋め込むを選択 https://publish.twitter.comへ移動 CopyCodeを選択します タイムラインの埋め込み タイムラインの埋め込み方法 https://publish.twitter.comでツイッターのURLを入力 Embedded Timelineを選択 set customization optionsをクリック タイムラインの高さ・幅を入力しUpdateをクリック Cop…
カスタマイズが好きなブロガーの方は、いろいろ遊べて楽しいと思いますので、お試し下さい。
「Hatena風ブログカード」の製作と使用方法
世間一般では「Embedly」が有名なようですが、カスタマイズがやりずらいようなので、先人が作られた「ブログカード」を活用させて頂くことにしました。
ネットで検索すると、さっそく元祖「はてな風ブログカード」が見つかりました。
はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ
こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。...
これはめぐたんさんが作られたものですが、ブックマークレットで「ブログカード」のHTMLを簡単にコピペできる仕組みとなってます。
一方、FC2ブログではAkira先生がブログカードのブックマークレットを製作し公開されてます。
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
当サイトではAkira先生提案のブログカードのCSSをほぼそのまま使用させて頂き、ブックマークレットのJavaScriptをカスタマイズして使用することにしました。
Akira先生、汎用的なブログカードのブックマークレットの公開、感謝いたします。
ブックマークレットとは
ところで、ブックマークレットとは何なんでしょう。
ググってみると、ブックマークレットはWebブラウザのブックマークにJavaScriptのコードを登録し、ブックマークをクリックするとJavaScriptのコードが実行される便利な技術だということが分かりました。
“あトん”は良く訪問するサイトをブックマークでリンク登録してますが、ブックマークレットはJavaScriptを実行できるとは今まで知らず不勉強であったことを少し反省しました。
ブックマークレットの登録方法
登録方法は簡単です。
Hatena風ブログカードのリンクをドラッグ（マウスの左ボタンをクリック）し、ブラウザのブックマークバーにドロップ（マウスの左ボタンを離す）して下さい。
ブックマークレットがブックマークバーに登録されました。
固定ページに3タイプのHatena風ブログカード・ブックマークレットを用意したので、お好みのものをご利用下さい。
Hatena風ブログカードのブックマークレット - after work Labo
ブックマークレットの登録方法 Hatena風ブログカードのリンクをドラッグ（マウスの左ボタンをクリック）し、ブラウザのブックマークバーにドロップ（マウスの左ボタンを離す）して下さい。 ３タイプのHatena風ブログカードを用意したので、お好みのものをご利用下さい。 Hatena風ブログカード Type1 「はてなブックマーク」「はてなスター」を排除したシンプルなブログカードです Hatena風ブログカード Type2 「はてなブックマーク」「はてなスター」も表示するブログカードです。 Hatena風ブログカード Type3 「はてなブックマーク」「はてなスター」をLazyloadingで遅延読…
ブックマークレットの使用方法
ブログカードを作りたいページを表示させます。
ブックマークレットをクリックするとJavaScriptが実行され、Hatena風ブログカードのHTMLが自動生成されます。OKをクリックしてコピーして下さい。
HTML編集モードで挿入したい位置にブログカードのHTMLをペーストします。
注意点
HTMLを埋め込んだら必ずプレビューで確認して下さい。まれに表示が崩れる場合がありますので、万が一表示がおかしくなった場合は、更新せず離脱して下さい。
ブログカードのCSS
お手数ですが、デフォルトCSSは出典元のAkira先生のサイトより入手頂き、デザインCSSにコピペ下さい。
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
既にネタバレしてますが、当ブログで埋め込んだ「Hatena風ブログカード」は、本物の「はてなブログカード」とほぼ同じになるように見た目を調整し、「Hatena風ブログカード」にすり替わったことを読者に気づかれない様に配慮してます。（笑）
参考にデフォルトCSSから変更した部分のCSSを載せて置きます。
/*** 出典元：https://vanillaice000.blog.fc2.com/blog-entry-583.html ***/
.blogcard {
width: 354px;/** 追加 **/
/** margin-bottom: 10px; 削除**/
padding: 12px;/** 変更 **/
margin: 20px 5px;/** 追加 **/
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;/** 追加 **/
}
.blogcard-content {
margin-bottom: 0px;/** 変更 **/
}
.blogcard-image,
.blogcard-image-wrapper,
.blogcard-image-wrapper img { /** 変更 **/
width: 80px;
height: 80px;
}
.blogcard-title {
font-size: 15px;/** 変更 **/
line-height: 1.4;/** 変更 **/
}
.blogcard-title a {
color: rgb(36, 37, 39);/** 変更 **/
padding-right: 10px;/** 追加 **/
letter-spacing: 0.3px;/** 追加 **/
}
.blogcard-description {
margin: 4px 0 !important;/** 変更 **/
font-size: 12px;/** 変更 **/
overflow: hidden;/** 追加 **/
display: -webkit-box;/** 追加 **/
-webkit-box-orient: vertical;/** 追加 **/
-webkit-line-clamp: 3;/** 追加 **/
padding-right: 6px;/** 追加 **/
color: rgb(0, 0, 0);/** 追加 **/
letter-spacing: 0.1px;/** 追加 **/
}
.blogcard-footer {
margin-top: 8px;/** 追加 **/
font-size: 11px;/** 変更 **/
}
.blogcard-footer a {
color: rgb(107, 115, 119);/** 変更 **/
/** text-decoration: underline; 削除 **/
}
.blogcard-footer a img {
margin-right: 3px;/** 変更 **/
}
@media screen and (min-width:600px) { /** 追加 **/
.blogcard {
width: 500px;
}
.blogcard-image,
.blogcard-image-wrapper,
.blogcard-image-wrapper img {
width: 100px;
height: 100px;
}
.blogcard-description {
font-size: 12px;
padding-right: 2px;
letter-spacing: 0.1px;
}
.blogcard-title {
font-size: 16.5px;
line-height: 1.3;
}
.blogcard-title a {
padding-right: 4px;
letter-spacing: 0.01em;
}
.blogcard-footer {
margin-top: 2px;
}
}
2020年3月20日追記
スマホでの表示が少しおかしかったので一部修正し、media screenを追加しました。
ところで、FC2ブログではAkira先生が作った「ブログカード」をぼっちんさんが「Akira風ブログカード」とネーミングされFC2内に広報活動されてます。
FC2ブログユーザーさん向けの内容ですが、楽しいカスタマイズがたくさん紹介されているので、興味のある方は一度ご覧になることをおススメします。
さてさて、弊ブログのちょっと前の記事でAkira風ブログカードをCSSでカラフルにカスタマイズしてみました - Akira風ブログカード今回の記事タイトルにあります 『 Akira風ブログカード 』 とは、筆者が勝手にネーミングしたものですのでご承知於き下さい...oops0011.blog.fc2.comこんな記事を書きました。そうしたところ、この 『 Akira風ブログカード 』 の開発者さん（Akira先生＝弊ブログのテンプレートの作者さん）のご本人記...
先日、弊ブログで下記のブログカードの記事を書いたんですよね。 Akira風ブログカード グラディエーション背景色ふわ～っと変色のCSS配布ずっと以前より、弊ブログでメイン的に利用している Akira風ブログカードの、グラディエーション背景色がマウスホバーでふわ～っと変色するタイプ、、、これのCSSの公開を望んでおられる方がおりましたので...oops0011.blog.fc2.com ［ デフォルトのブログカード ］ その時に、ブロ...
Akira風ブログカードにチラリズムアクションを加える方法（面白お遊び）
Akira風ブログカード に、ちょっと面白いアクションを加えて閲覧者さんを楽しませてあげましょう（笑） 既にあなたのブログにAkira風ブログカードを導入しておりましたら、簡単に利用出来ます。 要はブログカードにチラリズムアクションを加える（笑）んです。...
ブックマークレットのJavaScript
管理人が作成したブックマークレットのJavaScriptは、先人のコードを多少弄ってます。
例えば記事のtitleやdescriptionを取得できなかった場合はundefinedと表示されてしまうので、万が一取得に失敗した場合は、第二候補から情報を取得するようにしました。
OGP画像が設定されていない場合は、Webサイトのスクリーンキャプチャ画像を取得し表示するようにしました。
また、パフォーマンス低下防止とセキュリティ上の脆弱性対応の為、rel="noopener" を使用して外部リンクを開くようにしてます。
ブックマークレットを自分好みにカスタマイズしたい方は、ソースコードを公開するので、自己責任で弄ってみて下さい。
Hatena風ブログカード Type1
// Hatena風ブログカード Type1
javascript: (function () {
(function (d, f, s) {
s = d.createElement("script");
s.src = "//j.mp/1bPoAXq";
s.onload = function () {
f(jQuery.noConflict(!0))
};
d.body.appendChild(s)
})(document, function ($) {
var obj = [];
obj.url = document.URL;
obj.domain = location.host;
obj.title = $('meta[property="og:title"]').attr('content');
if (obj.title == undefined) {
if (document.title == undefined) {
obj.title = $('title').text();
}
else {
obj.title = document.title;
}
}
obj.desp = $('meta[property="og:description"]').attr('content');
if (obj.desp == undefined) {
obj.desp = $('meta[name="description"]').attr('content');
}
obj.img = $('meta[property="og:image"]').attr('content');
if(obj.img == undefined) {
obj.img = 'https://capture.heartrails.com/200x200?' + obj.url.replace('https:', '');
}
var favicon = '<a href="' + obj.url + '" target="_blank rel="noopener""><img src="//www.google.com/s2/favicons?domain=' + obj.url + '" alt="">' + obj.domain + '</a>';
var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="' + obj.url + '" target="_blank" rel="noopener"><img src="' + obj.img + '" alt=""></a></div></div>';
var cardText = '<div class="blogcard-text"><p class="blogcard-title"><a href="' + obj.url + '" target="_blank" rel="noopener">' + obj.title + '</a></p><blockquote cite="' + obj.url + '"><p class="blogcard-description">' + obj.desp + '</p></blockquote></div>';
var cardFooter = '<div class="blogcard-footer">' + favicon + '</div>';
var card = '<div class="blogcard"><div class="blogcard-content">' + cardImg + cardText + '</div>' + cardFooter + '</div>';
prompt('Hatena風ブログカードのHTMLです。', card);
})
})();
Hatena風ブログカード Type2
// Hatena風ブログカード Type2 スターとブックマーク追加
javascript: (function () {
(function (d, f, s) {
s = d.createElement("script");
s.src = "//j.mp/1bPoAXq";
s.onload = function () {
f(jQuery.noConflict(!0))
};
d.body.appendChild(s)
})(document, function ($) {
var obj = [];
obj.url = document.URL;
obj.domain = location.host;
obj.title = $('meta[property="og:title"]').attr('content');
if (obj.title == undefined) {
if (document.title == undefined) {
obj.title = $('title').text();
}
else {
obj.title = document.title;
}
}
obj.desp = $('meta[property="og:description"]').attr('content');
if (obj.desp == undefined) {
obj.desp = $('meta[name="description"]').attr('content');
}
obj.img = $('meta[property="og:image"]').attr('content');
if(obj.img == undefined) {
obj.img = 'https://capture.heartrails.com/200x200?' + obj.url.replace('https:', '');
}
var star = '<img src="https://s.st-hatena.com/entry.count.image?uri=' + obj.url + '" alt="">';
var bookmark = '<a href="https://b.hatena.ne.jp/entry/s/' + obj.url.replace('https://', '') + '" target="_blank" rel="noopener"><img src="https://b.hatena.ne.jp/entry/image/' + obj.url + '" alt=""></a>';
var favicon = '<a href="' + obj.url + '" target="_blank" rel="noopener"><img src="//www.google.com/s2/favicons?domain=' + obj.url + '" alt="">' + obj.domain + '</a> ';
var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="' + obj.url + '" target="_blank" rel="noopener"><img src="' + obj.img + '" alt=""></a></div></div>';
var cardText = '<div class="blogcard-text"><p class="blogcard-title"><a href="' + obj.url + '" target="_blank">' + obj.title + '</a></p><blockquote cite="' + obj.url + '"><p class="blogcard-description">' + obj.desp + '</p></blockquote></div>';
var cardFooter = '<div class="blogcard-footer">' + favicon + star + ' ' + bookmark + '</div>';
var card = '<div class="blogcard"><div class="blogcard-content">' + cardImg + cardText + '</div>' + cardFooter + '</div>';
prompt('Hatena風ブログカードのHTMLです。', card);
})
})();
Hatena風ブログカード Type3
// Hatena風ブログカード Type3 スターとブックマーク追加 lazyload対応
javascript: (function () {
(function (d, f, s) {
s = d.createElement("script");
s.src = "//j.mp/1bPoAXq";
s.onload = function () {
f(jQuery.noConflict(!0))
};
d.body.appendChild(s)
})(document, function ($) {
var obj = [];
obj.url = document.URL;
obj.domain = location.host;
obj.title = $('meta[property="og:title"]').attr('content');
if (obj.title == undefined) {
if (document.title == undefined) {
obj.title = $('title').text();
}
else {
obj.title = document.title;
}
}
obj.desp = $('meta[property="og:description"]').attr('content');
if (obj.desp == undefined) {
obj.desp = $('meta[name="description"]').attr('content');
}
obj.img = $('meta[property="og:image"]').attr('content');
if(obj.img == undefined) {
obj.img = 'https://capture.heartrails.com/200x200?' + obj.url.replace('https:', '');
}
var lazyload = '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-src="';
var star = lazyload + 'https://s.st-hatena.com/entry.count.image?uri=' + obj.url + '" alt="">';
var bookmark = '<a href="https://b.hatena.ne.jp/entry/s/' + obj.url.replace('https://', '') + '" target="_blank" rel="noopener">' + lazyload + 'https://b.hatena.ne.jp/entry/image/' + obj.url + '" alt=""></a>';
var favicon = '<a href="' + obj.url + '" target="_blank" rel="noopener">' + lazyload + 'https://www.google.com/s2/favicons?domain=' + obj.url + '" alt="">' + obj.domain + '</a> ';
var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="' + obj.url + '" target="_blank">' + lazyload + obj.img + '" alt=""></a></div></div>';
var cardText = '<div class="blogcard-text"><p class="blogcard-title"><a href="' + obj.url + '" target="_blank" rel="noopener">' + obj.title + '</a></p><blockquote cite="' + obj.url + '"><p class="blogcard-description">' + obj.desp + '</p></blockquote></div>';
var cardFooter = '<div class="blogcard-footer">' + favicon + star + ' ' + bookmark + '</div>';
var card = '<div class="blogcard"><div class="blogcard-content">' + cardImg + cardText + '</div>' + cardFooter + '</div>';
prompt('Hatena風ブログカードのHTMLです。', card);
})
})();
なお、ブックマークレットのJavaScriptは1行で記述する必要があります。
Googleの「Closure Compiler」を使うと簡単に圧縮でき便利です。OptimizationはWhitespace onlyで実行下さい。
まとめ
「はてなブログカード」はたくさん表示すると、読み込みスピードがとても遅くなりますが、「Hatena風ブログカード」はページスピードを速くできそうだということが分かりました。
また、CSSを弄ることで自分好みのデザインに変更できるため、工夫しだいでクリック率向上が期待できると思います。
なお今回のカスタマイズで1つだけ気になったことがあります。
比較的長めの文章を引用・転載する場合は<blockquote>タグを使用し、改行を必要としない程度の短い文章を引用・抜粋する際には<q>タグを使用する必要があるのですが、「はてなブログカード」はどちらも使用されてませんでした。
一応<cite>タグを使って出典・参照元を表示してますが、十分とは言い難い可能性があると思いました。
今後Googleの評価が厳しくなった場合、「はてなブログカード」を使い続けるのはリスクがあるかも知れません。
♡いいねはこちら
この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。
— 🍶あトん (@AfterWork_Lab) March 15, 2020
これで今回の記事はこれでおしまいです。
