2015年3月23日月曜日

reveal.js + Markdown のちょっとしたメモ - その3

ブログズミ: reveal.js + Markdown のちょっとしたメモ
の3回目です。

前回は、
  • HTML 変換後の表示
  • PDF に出力
  • テーマの作成
  • 背景付きテーマ
  • Notes を使う
  • App::revealup

前々回は、
  • 表題が大文字表記にならないようにする
  • 空行を入れる
  • タグを直接記述する
  • 公開する
を紹介しました。

今回は、fragment とレイアウトのカスタマイズに使えるテクニックを紹介します。

Zoom
発表をしていると、一部分をズームしたくなることがあります。
reveal.js には Zoom.js というのがあり、それを使うことで Alt + クリックでズームができるようになります。

fragment を使う
Markdown で記述した場合に、fragment はどうしたら良いのか。
答えはこちら→ https://github.com/hakimel/reveal.js/#element-attributes

fragment にしたい要素に下記のようにコメント書くだけです。
<!-- .element: class="fragment" -->

この記法は他の用途にも使えそうですね。

fragment がどういったものかはこちらをご覧ください→ http://lab.hakim.se/reveal-js/#/fragments

レイアウトのカスタマイズ
一部分だけレイアウトを変えたい場合、例えば直接スタイル指定をしたり、特定のクラス指定をすると思います。
それを reveal.js + Markdown の場合に、どうしているか自分のやり方を紹介します。

fragment を使うで紹介したコメント記法を利用して、以下のように class 指定を追加します。
<!-- .element: class="sample" -->
これで、任意の要素だけレイアウトを変えることができます。
また、 class 指定でなく直接スタイル指定しても OK です。
<!-- .element: style="font-color: red;" -->

今回は以上です。

0 件のコメント:

コメントを投稿