Gistをはてなダイアリーに貼り付けた場合の高さを制限するCSS

もちろん単なる CSS なので、はてダじゃなくても有効(なはず)。

Gist貼りたい…でも全部表示されちゃう

Gist にこんなふうにスクリプトを貼った後、はてダに貼り付けたいと思ったら

画面右側の「Embed URL」

<script src="https://gist.github.com/riocampos/e7d46949c8aa1a753a37.js"></script>

をコピーしてはてダに貼り付ければOKです。
でも。
高さ無制限になってダラダラと表示されてしまいます…。

CSSで解決

ので、表示される高さを抑えます。こんな感じ。

.gist-data {
  /* 最大高さ */
   max-height: 25em; 
  /* 領域をはみ出た場合の処理。autoで通常はスクロールバーが出現 */
  overflow: auto;
}

これをはてダの管理画面>デザイン編集>スタイルシートのところへ設定します。
すると Gist の高さが抑えられて表示されます。めでたしめでたし。