太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログの埋め込み記法で表示されるブログカード幅を一括指定する

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だと小さすぎる感じでした。本当はスタイルシートで指定できるとよいのですが、暫定的にはこのような形で対応します。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

  • 作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章
  • 出版社/メーカー: 技術評論社
  • 発売日: 2014/07/02
  • メディア: 大型本
  • この商品を含むブログ (1件) を見る

追記

 現在は内部フレームのクラスが「embed-card embed-blogcard」に仕様変更されたので、単純にスタイル指定すればOK。過去の遺産となった。