adbird（広告鳥） 備忘録

reveal.js 関連の覚書

reveal.js

※reveal.js や Pandoc の更新は速く、かつ、大きな変化があったりするので、下記の情報は古くなる可能性があるので、ご注意を。

画像や動画を最大化したい場合

クラスに.stretchを指定。

Pandocでmdから変換する際の注意点

mdで見出し1（#）と見出し2（##）を使っている場合、Pandocのオプションに --slide-level=2 をつけておかないと、見出し1（#）直下に本文を入れられない。

スライドを白いテーマから黒いテーマに変えた時の図の白黒反転

imagemagick

$ convert -negate 入力.png 出力.png

または、要バックアップ後

$ mogrify -negate *png

fragment の順番変更

<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

参照：Fragments | reveal.js

諸々設定

htmlの末尾にある Reveal.initialize({ 以下で設定。

Reveal.initialize({
width: 1280, 
height: 768, 
history:true,
slideNumber: true,

以下、 Reveal.initialize({ 以下の設定説明。

画面サイズ

パソコンの画面の解像度に合わせれば、F11を押して全画面表示したときに表示が崩れない。

width: 1280, 
height: 768,

現在、デフォルトで960x700。

参照：reveal.jsはどのように要素のサイズを変更しますか？

内容を更新後、スライドhtmlの再読込（Ctrl + R または F5 ）後にスライドの最初のページに戻らないようにする

history:true,

デモページにあるようにクリック一つでテーマを変える

htmlのヘッダーのthemeの指定の最後に id="theme" をつける。

<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">

以下のスライドページを作成。

./reveal.js/css/theme/white.css などのｃｓｓの位置は各自のディレクトリ構成によって適宜編集を。

<section id="themes">
<h1>スライドテーマ選択</h1>
<p>
reveal.js comes with a few themes built in: <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/black.css'); return false;">Black</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/white.css'); return false;">White</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/league.css'); return false;">League</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/sky.css'); return false;">Sky</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/beige.css'); return false;">Beige</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/simple.css'); return false;">Simple</a> <br>
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/serif.css'); return false;">Serif</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/blood.css'); return false;">Blood</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/night.css'); return false;">Night</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/moon.css'); return false;">Moon</a> -
    <a href="#" onclick="document.getElementById('theme').setAttribute('href','./reveal.js/css/theme/solarized.css'); return false;">Solarized</a>
</p>
</section>