シロクマは冬眠したい

デザインのこと、買ったもののレビューとか書きます

【はてなブログ】ブログカードを脱iframe化する

はてなのブログカードってiframeなんですね。iiframeだとヒートマップで計測できないこともあるらしいので、サイトのどこがクリックされやすいかなどを分析したい人からしたらできるだけ使いたくないですよね。HTML5では非推奨ではないですが私はあんまり好きじゃないです。

そこで、おっ立ち野郎(id:ottati)さんが作成されたはてなブログ記事紹介ジェネレータというものを見つけたので使ってみることにしました。

『はてなブログでのブログカード』のデメリット

はてなからワードプレスに移行した人の話では、はてなブログで使用していたブログカードはリンクが切れてしまうことがあるそうです。(参考:【移転】はてなブログからWordPressへ、はじめからこっちにしていれば・・・ | Bashilog

今後移転の可能性があるなら、ブログカードを使いすぎて後から大変な思いをする前に今のうちに少しずつ変えておいた方がいいかもしれません。

また、iframeは音声ブラウザで読み上げることができないなど、アクセシビリティの問題があります。

はてなブログのブログカード

www.lazypolarbear.com

はてなブログのブログカードはこんな感じに表示されます。ソースを見るとiframeを使っているのがわかります。

サムネイルには、記事の一番最初に使用した画像が表示されています。

ジェネレータを使ったブログカード

Siriって使う? - シロクマは冬眠したいSiriって使う? - シロクマは冬眠したい

Appleの音声認識インターフェイスのお「Siri」ちゃん。使ったことありますか?最近どんどん便利になってきているとの噂ですが、私は使ったことないです。使わない...

 

↑ はてなブログ記事紹介ジェネレータを使用してブログカードを生成しました。

使い方は簡単。URLを入力するだけで自動でコードが生成されるので、html編集モードで貼り付けます。『冒頭を取得』のチェックを外せば、はてなブログ以外のURLでも作成できます。

このジェネレーターでは、はてなのブログカードと違い最初に使用した画像ではなくページのスクリーンショットが取得されます。(画像はすぐには表示されません。しばらく経つと表示されるようになります。) また、ブログ名や投稿日、はてなIDなどは取得されません

このままだとこの部分だけ浮いてしまうので、少し加工してブログカードっぽい見た目になるようにCSSを追加します。

デモ

Siriって使う? - シロクマは冬眠したいSiriって使う? - シロクマは冬眠したい

Appleの音声認識インターフェイスのお「Siri」ちゃん。使ったことありますか?最近どんどん便利になってきているとの噂ですが、私は使ったことないです。使わない...

追加するCSS

下記のコードをデザイン>カスタマイズ>デザインcssに貼り付けます。

生成されるコードにインラインスタイルが多数指定されているので、!importantだらけになってしまいました…

注意点

このスクリーンショットは『HeartRails Capture | サムネイル画像/PDF ファイル作成サービス』というサービスで取得しているようです。(サムネイル画像についているドロップシャドウも、このサービスで自動に付加されるもののようで消せません…)

なので、このサービスが終了してしまった場合はサムネイル画像が表示されなくなってしまいます。心配な場合は少し手間がかかりますが別途画像を作成して差し替えるという方法もありますね。

番外編:はてなっぽいブログカードをはてな以外で使う

iframegetter.herokuapp.com

iframeになってしまいますが、はてなブログじゃなくてもはてなっぽいブログカードを作れるサービスを見つけました。これなら今後ワードプレスに移行したとしてもリンク切れになったりしないんじゃないでしょうか。

おわりに

冒頭で散々デメリットを上げてしまいましたが、今後もはてなのブログカードを使い続けるとおもいます…めんどくさがりだから…