コピペ式似非ブログカードを作った

hatenaロゴ

はてなブログの特徴的な機能のブログカードですが、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サイト

「はてなブログカード」のiframeなしの使い方など
ブログカードは、プラグインを使うか、テーマ選べば反映されるようにできるのですが、投稿のエディタでは、表示されないというか、URLだけのような感じで、どんな風に表示されるのかわからなかったりします。これがいまいちなのと、やはりはてなのブログカードの表示の…