f:id:bulldra:20141101204223j:plain

埋め込み記法での表示幅を一括指定するプラグイン

　はてなブログでは埋め込み記法を使うことで、ブログカード形式で他のエントリをカード形式で表示させることができるのですが、デフォルト幅が500pxなのでデザインによっては短いと感じる事があります。タイトル文字数が多いと省略されてしまうし、少し長く表示させた方が良さそうです。こんな風に。

　生成されたブログカードの最大幅をスタイルシートで指定しようとしたのですが、内部フレームにクラスが指定されていないので簡単には指定できません。スタイル直書きで懐かしい感じ。

<p><iframe src="http://bulldra.hatenablog.com/embed/side-gatcha" title="はてなブログカードガチャをブログパーツ化して自分のブログに設置できるようにしたよ - 太陽がまぶしかったから" scrolling="no" frameborder="0" style="width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"><a href="http://bulldra.hatenablog.com/entry/side-gatcha">はてなブログカードガチャをブログパーツ化して自分のブログに設置できるようにしたよ - 太陽がまぶしかったから</a></iframe></p>

　仕方がないので、内部フレームを探索して、srcが「http://〜/embed/〜」形式または「http://〜/embed?〜」形式の場合の最大幅を指定するプラグインを作りました。あくまで「最大幅」の指定なので、サイドバーで表示したり、スマートフォンで表示しても問題ありません。

プラグイン設置方法

　デザイン画面のフッタに以下のスクリプトを追加します。

f:id:bulldra:20141025180523j:plain

　『はてなブログのサイドバーにあるプロフィールから詳細プロフィールへの導線を作るプラグイン - 太陽がまぶしかったから』などのために既に「commons.js」をインポートしている場合は「<script type="text/javascript">」以下だけでOK。引数で最大幅を指定します。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script type="text/javascript">
setEmbedWidth(728);
</script>

ソースコード

まとめ

　以上のようにプラグインを導入することでブログカードの最大幅を指定できます。僕のブログは本文の横幅が結構広いデザインなので、500pxだと小さすぎる感じでした。本当はスタイルシートで指定できるとよいのですが、暫定的にはこのような形で対応します。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。