StackEdit の設定

20200126

独自のテンプレートを作成する

「Styled HTML with TOC」をベースにして独自のテンプレートを作成する場合は、次のように行う。

メニューの「Templates」をクリック。

「Styled HTML with TOC」を選択 => 「Copy template」アイコンをクリック。
「Styled HTML with TOC copy」が作成されるので、これを編集する。

編集が終わったら画面下にある「OK」を押して保存する。

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>

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">

このサイトのテンプレート

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{files.0.name}}</title>
  <link rel="stylesheet" href="style.css" />
</head>

{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
  <div class="stackedit__html">
    <div class="stackedit__toc">
      {{#tocToHtml files.0.content.toc 2}}{{/tocToHtml}}
    </div>
    {{{files.0.content.html}}}
  </div>
</body>

</html>

このサイトの style.css

使用しているCSSはこちら
元のCSSからの変更点:

# 「}」ごとに改行を入れて見やすくする
sed -i -e 's/}/}\n/g' style.css
# フォントサイズを変更
sed -i -e 's/font-size:16px/font-size:1em/g' style.css
sed -i -e 's/font-size:.85em/font-size:.96em/g' style.css
sed -i -e 's/font-size:.8em/font-size:.96em/g' style.css
sed -i -e 's/font-size:.9em/font-size:.96em/g' style.css
# 横幅を変更
sed -i -e 's/max-width:750px/max-width:44em/g' style.css
# 画像に外枠をつける
sed -i -e 's/img{max-width:100%}/img{max-width:100%;padding:6px;border:1px solid #dfe2e5}/g' style.css

HOME