埋め込み記法での表示幅を一括指定するプラグイン
はてなブログでは埋め込み記法を使うことで、ブログカード形式で他のエントリをカード形式で表示させることができるのですが、デフォルト幅が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?〜」形式の場合の最大幅を指定するプラグインを作りました。あくまで「最大幅」の指定なので、サイドバーで表示したり、スマートフォンで表示しても問題ありません。
プラグイン設置方法
デザイン画面のフッタに以下のスクリプトを追加します。
『はてなブログのサイドバーにあるプロフィールから詳細プロフィールへの導線を作るプラグイン - 太陽がまぶしかったから』などのために既に「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)](http://ecx.images-amazon.com/images/I/51A%2B-kjo8gL._SL160_.jpg)
フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
- 作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章
- 出版社/メーカー: 技術評論社
- 発売日: 2014/07/02
- メディア: 大型本
- この商品を含むブログ (1件) を見る
追記
現在は内部フレームのクラスが「embed-card embed-blogcard」に仕様変更されたので、単純にスタイル指定すればOK。過去の遺産となった。