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

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

前回は、

• 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;" -->

今回は以上です。