StackEdit の設定

20190925

テンプレートを編集

付属のテンプレートは編集できないので、コピーを作成して編集する。
Import/export → Export as HTML → Styled HTML with TOC → Configure templates → Copy template

Google Analyticsを設置

id=number の部分は各自のIDに置き換える。

 <head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=number"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'number');
+  </script>
   <meta charset="utf-8">

ローカルのCSSを使う

デフォルトだと stackedit.io のCSSを参照するので、サイトが重いとファイルを見るのに支障が出る。

-  <link rel="stylesheet" href="https://stackedit.io/style.css" />
+  <link rel="stylesheet" href="style.css" />

TOCを画面上部に表示

 {{/if}}
-  <div class="stackedit__left">
+  <div class="stackedit__html">
     <div class="stackedit__toc">
       {{#tocToHtml files.0.content.toc 2}}{{/tocToHtml}}
     </div>
-  </div>
-  <div class="stackedit__right">
-    <div class="stackedit__html">
-      {{{files.0.content.html}}}
-    </div>
+    {{{files.0.content.html}}}
   </div>

このサイトの style.css

不要な部分を削除してTOCを上部に置くスタイルに最適化した。

style.css

https://stackedit.io/style.css からの差分(デフォルトのCSSは1行に4万字以上詰め込んでいるので、「}」ごとに改行を入れてから差分を取った)

-a{color:#0c93e4;text-decoration:underline;text-decoration-skip:ink}
+a{color:#0489b1;text-decoration:underline;text-decoration-skip:ink}

-code,pre,samp{font-family:Roboto Mono,Lucida Sans Typewriter,Lucida Console,monaco,Courrier,monospace;font-size:.85em}
+code,pre,samp{font-family:Roboto Mono,Lucida Sans Typewriter,Lucida Console,monaco,Courrier,monospace;font-size:.96em}

-code{background-color:rgba(0,0,0,.05);border-radius:3px;padding:2px 4px}
+code{background-color:rgba(246,248,250,1);border-radius:3px;padding:2px 4px}

-pre>code{background-color:rgba(0,0,0,.05);display:block;padding:.5em;-webkit-text-size-adjust:none;overflow-x:auto;white-space:pre}
+pre>code{background-color:rgba(246,248,250,1);display:block;padding:.5em;-webkit-text-size-adjust:none;overflow-x:auto;white-space:pre}

-td,th{border-right:1px solid #dcdcdc;padding:8px 12px}
-td:last-child,th:last-child{border-right:0}
-td{border-top:1px solid #dcdcdc}
+td,th{border:1px solid #dfe2e5;padding:8px 12px}

-img{max-width:100%}
+img{max-width:100%;padding:5px;border:1px solid #dfe2e5}

+.stackedit__toc{max-width:70%;margin-top:1em;padding:0;border:1px solid #dfe2e5}

-.stackedit__toc ul ul{color:#888;font-size:.9em}
+.stackedit__toc ul ul{color:inherit;font-size:.96em}

-.stackedit__toc a:active,.stackedit__toc a:focus,.stackedit__toc a:hover{background-color:rgba(0,0,0,.075);border-radius:3px}
-.stackedit__left{position:fixed;display:none;width:250px;height:100%;top:0;left:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}
-@media (min-width:1060px){.stackedit__left{display:block}
-}
-.stackedit__right{position:absolute;right:0;top:0;left:0}
-@media (min-width:1060px){.stackedit__right{left:250px}
-}
-.stackedit--pdf blockquote{border-left-color:#ececec}
-.stackedit--pdf .stackedit__html{padding-left:0;padding-right:0;max-width:none}
+.stackedit__toc a:active,.stackedit__toc a:focus,.stackedit__toc a:hover{background-color:rgba(246,248,250,1);border-radius:3px}

HOME