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

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」の４回目です。
今回は、昨年12月に行われた第８回大阪Jenkins勉強会でしゃべったときに、reveal.js でスライドを作成したのでそのときやったことのメモです。
参考：ブログズミ: 「第８回大阪Jenkins勉強会」で発表してきた

その３は、

• Zoom
• fragment を使う
• レイアウトのカスタマイズ

その２は、

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

その１は、

• 表題が大文字表記にならないようにする
• 空行を入れる
• タグを直接記述する
• 公開する

を紹介しました。

背景を変える

すべてのページの背景を変える場合は、テーマで指定するのが良いと思います。
方法は その２ の背景付きテーマを参照してください。

一部のページの背景を変える場合は、セクション（section）の属性で指定をします。

---
<!-- .element data-background="#000000" -->

data-separator(---),data-separator-vertical(--) の直後に .element コメントで設定します。

背景に指定できるのは、画像だけでなく単色、ビデオも指定できます。

スライドするごとに背景がずれていくようなことをしたい場合は、Parallax Background を利用することになります。
こちらは、Reveal.initialize で設定することになります。
やり方は、Github のドキュメントを参考にしてください。

変えた背景に合わせてフォントカラーを変える

さて、背景を変えることができましたが、明るい色のテーマのスライドに黒背景のページを挟む場合に、背景だけ変えるとフォントカラーはそのままで見えなくなってしまいます。



そこで、背景に合わせてフォントカラーも変えたいと思います。
それには、 reveal.js 3.0.0 から追加されたで「has-light-background/has-dark-background」を利用します。
これは背景色を部分的に変更した場合に、デフォルトより明るくなれば「has-light-background」が、暗くなれば「has-dark-background」クラスが section に付与される機能です。
これを使って、以下のような css を用意すれば背景色に合わせてフォントカラーを変更できます。
(reveal.js 付属のテーマで対応済みのものもあります。white.css, black.css)

.reveal .has-dark-background {
  color: #CCCCCC;
}/

例：第８回大阪Jenkins勉強会発表資料

埋め込み

作ったスライドをどこか別のところ（ブログなど）に埋め込みする方法です。
単純に iframe タグを使うだけで問題なさそうでした。
上でスライド表示しているのも iframe でやっています。

最後に

もうほとんど Markdown は関係ありませんでしたね…すみません。
まぁでも、また機会があったら「その５」を書きたいと思います。
ではでは。