唐揚げ専門店
表示例
reveal.jsについて
このテンプレートには「reveal.js」というMITライセンスのソースコードを利用しています。利用の際には 必ず ソースコード出展として次を記載してください。これはreveal.js利用規約に沿ったものです。
http://revealjs.com
MIT licensed
Copyright (C) 2018 Hakim El Hattab, http://hakim.se
なお、本テンプレート利用にあたり必要最低限のものしかwikidotに持ってきていないので、reveal.jsの一部の機能は利用できません。一例として次は使えないか使えるかどうか試していません。
- テーマの切り替え（白くしたり黒くしたり）
- マークアップ言語で記述されたファイルの利用（できるかもしれない）
- PDF変換（できるかもしれない）
- ほかにもあるかも。
ズームとかフェードアウトとかは動くと思うので、詳しくはreveal.jsの使い方でググってください。
ローカルでの確認について
reveal.jsは、一通りパスが通っていればインターネットに接続しなくてもローカルで動作が確認できます。いちいちサンドボックスに投稿しなくてもすぐに確認ができるので、こちらのほうがいいかもしれません。
https://github.com/hakimel/reveal.js/
から「clone or download」でzipファイルをダウンロードして、
index.htmlをいろいろいじってみてください。
ここに非表示のCSSコードブロックが埋まってます。
/* HEADER */ #header { height: 140px; position: relative; z-index: 10; padding-bottom: 30px; /* FOR MENU */ background: url(http://ja.scp-wiki.net/local--files/tfs-1391/saiga-logo.png) 10px 35px no-repeat; } #header h1 a { content: "TFS危機管理局"; } #header h1 a::before { content: "TFS危機管理局"; } #header h1 a span{ display: block; content: ""; visibility: hidden; } #header h2 { margin-left: 120px; padding: 0; clear: left; float: left; font-size: 105%; max-height: 38px; } #header h2 span { display: block; margin: 0; padding: 19px 0; line-height: 0px; max-height: 0px; font-weight: bold; color: transparent; text-shadow: none; } #header h2 span::before { content: "発見 対話 救済"; display: block; margin: 0; padding: 0px 0; line-height: 0px; max-height: 0px; font-weight: bold; color: #f0f0c0; text-shadow: 1px 1px 1px #000; text-shadow: 1px 1px 1px rgba(0,0,0,.8); } div#container-wrap { background: url(http://ja.scp-wiki.net/local--files/tfs-1391/wallpaper.png) top left repeat-x; } /* Source: http://davidhowald.com/geometrical-pattern/geometrical-pattern-new-geometric-pattern-3d-blocks-free-stock-public-domain/ */ #header h1 a { content: "TFS危機管理局"; } #header h1 a::before { content: "TFS危機管理局"; } #header h2 span::before { content: "発見 対話 救済"; }
.code-hidden .code{ display:none; } .mainframe { position: relative; width:100%; border:1px solid #000000; } .mainframe::before{ content: ""; display: block; padding-top: 75%; } .maininline { position: absolute; top: 0px; left: 0px; width:100%; height: 100%; }
テンプレートの利用方法
まずページ先頭につぎのCSSリンクとiframeを書いてください。
(評価モジュールも忘れずに！)
[[module CSS]]
@import url(http://scp-jp-sandbox2.wikidot.com/dr-toraya/code/1);
@import url(http://scp-jp-sandbox2.wikidot.com/dr-toraya/code/2);
[[/module]]
[[div class="mainframe"]]
[[iframe ＜ここに追加したページのURL＞/code/1 class="maininline"]]
[[/div]]
iframeのURLは追加したページのURL＋「/code/1」とします。
次に、追加したページに次のCODEブロックを記載します。
必ず最初のCODEブロックにしてください。
2番目以降のCODEブロックに記載した場合、URLを「/code/2」など適切に番号を変更してください。
本番では次のタグの括弧をかさねて書くと、以下のブロックが非表示になります。
[div class="code-hidden"]
<!-- ここからテンプレート --> <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>reveal.js</title> <link rel="stylesheet" href="http://scp-jp-sandbox2.wikidot.com/local--files/dr-toraya/reveal.css"> <link rel="stylesheet" href="http://scp-jp-sandbox2.wikidot.com/local--files/dr-toraya/beige.css"> <!-- Theme used for syntax highlighting of code --> <!-- <link rel="stylesheet" href="lib/css/zenburn.css"> --> <!-- この辺のスタイルシートもcodeタグにまとめたいのだがどうもうまくいかない だれか治せる人がいたら治してください。 --> <style> div.toptitle{ text-align: center; position: relative; top: 45%; font-size: 160%; color: #000000; background: #FFFFFF; border-top: 10px solid #000000; border-bottom: 20px solid #000000; } div.pagetitle{ background: #3f3f3f; text-align: center; color: #dcdcdc; border-top: 5px solid #000000; border-bottom: 10px solid #000000; padding: 0.2em 0.5em 0.2em 0.5em; } </style> </head> <body> <div class="reveal"> <div class="slides" style=" background-image: url('http://scp-jp-sandbox2.wikidot.com/local--files/dr-toraya/saiga-logo-big.png'); background-repeat: no-repeat; background-position: left bottom; "> <!-- ここまでテンプレート --> <!-- タイトルページ START --> <section style="height:100%;"> <div class="toptitle">ここにドキュメントタイトル</div> <div style="text-align:right; position:absolute; bottom:2em; right:1em;"> <font style="background: #444488; color:#FFFFFF; padding: 10px; font-size:70%">右へスクロールしてください</font> </div> </section> <!-- end of section --> <!-- タイトルページ END--> <section> <div class="pagetitle"><B>TFS-xxxx</B></div> <P> <div style="text-align: left; font-size: 80%"> ここにプロジェクトの概要。<BR> 「TFS」は「techniques for salvation（救済の技法）」の略だと思いますがforなのかofなのかイマイチ自信がないのでまあどうとでもとってください。「xxxx」はプロジェクト番号です。<BR> </P><P> なお先頭にPタグを書いておかないと、ページタイトルと本文がくっついて表示されます。 </div> </P> </section> <!-- end of section --> <section> <div class="pagetitle"><B>ここにページタイトル</B></div> <P> <div style="text-align: left; font-size: 80%"> ここに本文。<BR> フリースタイルです。文字サイズは80%くらいでいいと思います。70%未満はスマホから読みづらいです。あとPCとスマホで自動改行の位置が変わります。PCでギリギリ表示ぐらいに作ると、スマホでは下にはみ出て読めなかったりするみたいです。なんとかならんか。 </div> </P> </section> <!-- end of section --> <section> <section> <div class="pagetitle"><B>ここにページタイトル</B></div> <P> <div style="text-align: left; font-size: 80%"> ページを縦につなげるには、section内にsectionを記載してください。 </div> <div style="text-align:right; position:absolute; bottom:-2em; right:1em;"> <font style="background: #444488; color:#FFFFFF; padding: 10px; font-size:70%">詳細を見るには下へスクロールしてください</font> </div> </P> </section> <section> <P> <div style="text-align: left; font-size: 80%"> 2ページ目からはページタイトルを省略してもよいでしょう。 </div> </P> </section> <section> <P> <div style="text-align: left; font-size: 80%"> 3ページ目。 </div> </P> </section> </section> <!-- end of section --> <section> <div class="pagetitle"><B>ここにページタイトル</B></div> <P> <div style="text-align: left; font-size: 80%"> テーブルはなんかボーダーがうまいこと効かなくてイライラします。 <TABLE> <TR><TD>列1</TD><TD>列2</TD></TR> <TR><TD>行2</TD><TD>おわり</TD></TR> </table> </div> </P> </section> <!-- end of section --> <!-- 終了報告書 START --> <section> <div class="pagetitle"><B>プロジェクト終了報告</B></div> <P> TFS-1391は成功裏に終了しました。 </P> <div style="font-size: 80%"> <P> 本報告は同現象に陥った世界の対処事例として保存されます。 </P> <P> <div style="font-size: 80%; align:left;"> など、プロジェクト終了後にどういった措置が行われたかを記載してください。必要に応じてtext-alignをcenterにしたりleftにしたりしてみてください。<BR> </div> </P> </div> </section> <!-- end of section --> <!-- 終了報告書END --> <!-- ラストページ START --> <section> <div style="font-size: 160%; color: #000000;"> 了 </div> </section> <!-- ラストページ END --> <!-- <section> <div class="pagetitle"><B></B></div> <div style="font-size: 80%"> <P> </P> </div> </section> --> <!-- ここからテンプレート --> </div> </div> <script src="http://scp-jp-sandbox2.wikidot.com/local--files/dr-toraya/reveal.js"></script> <script src="http://scp-jp-sandbox2.wikidot.com/local--files/dr-toraya/head.min.js"></script> <script> // More info about config & dependencies: // - https://github.com/hakimel/reveal.js#configuration // - https://github.com/hakimel/reveal.js#dependencies Reveal.initialize({ dependencies: [ { src: 'plugin/markdown/marked.js' }, { src: 'plugin/markdown/markdown.js' }, { src: 'plugin/notes/notes.js', async: true }, { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } } ] }); </script> </body> </html> <!-- ここまでテンプレート -->
本番では括弧をかさねて書いてhiddenの終わりにしてください。
[/div]
TABLEタグがうまいこと表示されないので、私はHTMLブロックのSTYLEに次を追加しました。もっといいスタイルができたら教えてください。適用します。
.reveal table td{ text-align: left; border-right: 1px solid; border-bottom: 1px solid; } table.history{ border-spacing: 5px 5px; border-collapse: separete; border: 0px solid #000000; } td.history{ border: 0px solid #000000; }
