はてなブログの特徴的な機能のブログカードですが、Chromeウェブストアなど埋め込みできないWebページがあるので、自分的に使い勝手が悪くなってしまいました...。
そこで、はてなのブログカードを流用してコピペ式似非ブログカードを作りました。
このブログカードのメリットは次のとおりです。
- インラインフレーム(iframe)を使わないので読み込み、表示が高速
- ブログカードの見た目を自分の好きなようにカスタマイズできる
- ほかのブログカードよりもHTMLが比較的シンプル
はてなブログの記事編集画面の「HTML編集」タブを開いてこのHTMLを貼り付けます。
そして、記事のタイトルや概要、アイキャッチ画像などはリンク挿入で表示されたブログカードやリンク先のWebページからHTMLにちまちまとコピペして使用します。
HTML
<div class="embed-wrapper">
<div class="embed-wrapper-inner">
<div class="embed-content with-thumb">
<div class="thumb-wrapper"><img src="あああ" class="thumb" /></a></div>
<div class="entry-body">
<div class="entry-title"><a href="あああ" target="_blank">あああ</a></div>
<div class="entry-content">あああ…</div>
</div>
</div>
<div class="embed-footer"><a href="あああ" target="_blank"><img src="あああ" class="favicon" />あああ</a></div>
</div>
</div>
はてなのブログカードのCSSを<head>要素に追加します。加えて自分のブログのデザインテーマに合うように調整したCSSをデザインCSSに貼り付けます。
(設定→詳細設定→「<head>要素にメタデータを追加」にコードを入力)
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/embed.css"/>
(デザイン→カスタマイズ→「デザインCSS」にコードを入力)
CSS
/* はてなブログカード調整用CSS */
.embed-wrapper {
border-color: #ccc !important;
box-shadow: 0 10px 6px -6px #ccc;
margin: 16px 10px 21px;
max-width: 640px;
}
.embed-content .entry-title {
line-height: 1.4;
}
.embed-content .entry-title a,
.embed-footer a {
font-weight: 700;
padding: 0;
}
.embed-content .entry-title a {
color: #333 !important;
font-size: 16px;
}
.embed-footer {
margin: 0 0 4px;
}
.embed-footer a {
color: #6b7377 !important;
text-decoration:none !important;
}
.embed-footer a:hover {
text-decoration: underline !important;
}
.thumb-wrapper img,
.embed-footer img {
border: 0;
border-radius: 0;
}
.embed-footer img {
margin: -4px 3px 0;
}
もともとは、はてなのブログカードのCSSを<head>部分に読み込ませて、ブログカードのHTMLを記事編集画面にコピペするという発想だけでしたが、シンカツブログ - はてなブログカード iframなしにを参考にして、HTMLのムダな部分を省いて自分なりのブログカードができたので満足です(すべてのブログカードを似非ブログカードに貼り替え済み)。
参考になるブログ・Webサイト