reveal.js - スライドデザインのカスタマイズ

スライド作成ツールであるreveal.jsのデザインの変更方法です
reveal.jsのテーマのREADMEも参考にしてください

背景画像やアニメーションなどはreveal.js自体のREADMEで説明されています
日本語での説明は【翻訳】reveal.js - README.mdをご覧ください

テーマの作成手順

reveal.jsのテーマはSass(SCSS記法)で書きます
SassはCSSを拡張した言語で、CSSで書くと冗長になりがちなセレクタやプロパティをスッキリ表現することができます

.scssファイルコピー

基本的に/css/theme/sourceにデフォルトで用意されているテーマの.scssファイルをコピーして新たなテーマを作成してください

.scssファイル編集

.scssファイルは以下のような内容となっています
以下のstep3の部分だけ編集します

1. **/css/theme/template/mixins.scss**をインクルードする
   共通の関数が定義されています

2. **/css/theme/template/settings.scss**をインクルードする
   共通の変数がデフォルト値と共に定義されています

3. オーバーライド
   デフォルトの設定をオーバーライドします
   ユーザーはこの部分を変更するだけでテーマをカスタマイズできます
   上記step2の変数を指定する(settings.scssを参照)か、セレクタを追加してもいいです

4. **/css/theme/template/theme.scss**をインクルードする
   step1からstep3で設定した変数を元に、最終的なCSSを生成するテーマファイルです

コンパイル

以下のコマンドを実行すると、GruntツールがSassをコンパイルし、CSSファイルを作成します(Gruntfileを参照)
npm run build -- css-themes

css/themeに最終的なCSSファイルが出力されるので、index.htmlで読み込むようにすればOKです

フォントの変更方法

デフォルトでは2つのフォントが使えるようです
lib/fontにフォントごとの設定ディレクトリがあります

lib
  └─ font
    ├─ league-gothic
    └─ source-sans-pro

フォントを選ぶ

無料で使えるフォントが以下のサイトにまとまっているのでおすすめです
各配布サイトへのリンクからダウンロードできます
大抵の場合、.otfまたは.ttfで配布されています
フォント作成者への感謝を忘れず、個人利用・商用利用にかかわらず利用規約やライセンスを必ず読むようにしましょう
FONT FREE

例として、やさしさゴシックボールドに変更してみます

フォントのCSS作成

yasashisa-boldディレクトリを作成し、CSSファイルとダウンロードしたフォントファイルを配置します
デフォルトのように、LICENCEファイルも含めておいたほうがいいかもしれません

lib
  └─ font
    └─ yasashisa-bold
      ├─ yasashisa-bold.css
      └─ YasashisaBold.otf

CSSファイルを編集します
独自のフォントを指定するための標準化された書き方なので、以下のサイトを参考にしてください
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

@font-face {
  /* フォントの名前 */
  font-family: 'yasashisa-bold'; 
  /* フォントファイル */
  src: url('YasashisaBold.otf') format('opentype');

  font-weight: normal;
  font-style: normal;
}

テーマに指定する

css/theme/sourceのカスタマイズしたいテーマの.scssファイルに以下のように記述してコンパイルします
生成したCSSでスライドを表示するとフォントが変わっていることを確認できるはずです

// Include theme-specific fonts
@import url(../../lib/font/yasashisa-bold/yasashisa-bold.css);

動作確認環境

$ uname -a
Linux laputa 4.19.2-arch1-1-ARCH #1 SMP PREEMPT Tue Nov 13 21:16:19 UTC 2018 x86_64 GNU/Linux
$ firefox -v
Mozilla Firefox 63.0.3

reveal.jsはHTML/Markdown/JavaScript/CSSでスライドを作成できるオープンソースのツールです
様々なカスタマイズができますので、是非利用してみてください