変数の中身をページに表示する

    ],
    "layout": "post",
    "title": "ページメニューの作り方",
    "date": "2017-03-04 00:00:00 +0900",
    "lastchange": "2017-06-16 22:55:31 +0000",
    "tags": [
      "jekyll",
      "liquid",
      "github",
      "pages"
    ],
    "slug": "page-menu",
    "ext": ".md"
  },
  "path": "_docs/Jekyll/site-variables.md",
  "id": "/Jekyll/site-variables",
  "content": "## `site.*`内の変数についての調査\n\nJekyllの変数に格納されているものがよくわからないので調べた。\n\n参考\n\n* [Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n* [Jekyllで簡易タグ一覧ページを作る（2013年12月8日追記）](http://genjiapp.com/blog/2013/11/21/simple-tags-page-for-jekyll.html)\n\n## `site.posts`変数の中身\n\n\n{% capture text %}\n`site.posts`\n: A reverse chronological list of all Posts.\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nということなので、**\\_post** 以下のものが日付が新しい順に表示されるはずだ。\n\n{% raw %}\n```liquid\n<ul>\n  {% for post in site.posts %}\n  <li>\n    {{post.date | date: \"%F\" }}:<a href=\"{{site.github.url}}{{ post.url }}\">{{ post.title }}</a>\n  </li>\n  {% endfor %}\n</ul>\n```\n{% endraw %}\n\nこれを実行してみる。\n\n> \n> <ul>\n>   {% for post in site.posts %}\n>   <li>\n>     {{post.date | date: \"%F\" }}:<a href=\"{{site.github.url}}{{ post.url }}\">{{ post.title }}</a>\n>   </li>\n>   {% endfor %}\n> </ul>\n>\n\n## `site.pages`変数の中身\n\n{% capture text %}\n`site.pages`\n: A list of all Pages. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n全てのページが出力されるらしい。先程と同じようなコードを実行してみる。\n\n{% raw %}\n```liquid\n<ul>\n  {% for page in site.pages %}\n  <li>\n    {{ page.url }}\n  </li>\n  \n  {% endfor %}\n</ul>\n```\n{% endraw %}\n\n実行してみる。\n\n> <ul>\n>   {% for page in site.pages %}\n>   <li>\n>     {{ page.url }}\n>   </li>\n>   \n>   {% endfor %}\n> </ul>\n\ncssやxmlなど、必要そうな不要そうなものまで出力される。\n\n## `site.html_pages`変数の中身\n\n\n{% capture text %}\n`site.html_pages`\n: A subset of `site.pages` listing those which end in `.html`. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nどうやら同じような考えだったらしく、**html** だけ格納されている変数があった。\n\n{% raw %}\n```liquid\n<ul>\n  {% for page in site.html_pages %}\n  <li>\n    {{page.date | date: \"%F\"}}:<a href=\"{{site.github.url}}{{ page.url }}\">{{ page.title }}</a>\n  </li>\n  {% endfor %}\n</ul>\n```\n{% endraw %}\n\n実行してみる。\n\n> <ul>\n>   {% for page in site.html_pages %}\n>   <li>\n>     {{page.date | date: \"%F\"}}:<a href=\"{{site.github.url}}{{ page.url }}\">{{ page.title }}</a>\n>   </li>\n>   {% endfor %}\n> </ul>\n\nトップページまで出力されるのか・・・。\n\n\n\n## 記事のタグ一覧と、タグ付けされているページの一覧を取得する。\n\n{% capture text %}\n`site.tags.TAG`\n: The list of all Posts with tag TAG. \n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Variables - Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/variables/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n{% capture text %}\n\n{% raw %}\n```liquid\n{% for tag in site.tags %}\n<article>\n  <h1 id=\"tag_{{ tag[0] }}\">{{ tag[0] }}</h1>\n  <ul>\n    {% for post in tag[1] %}\n    <li><a href=\"{{ post.url }}\">{{ post.title }}</a></li>\n    {% endfor %}\n  </ul>\n</article>\n{% endfor %}\n```\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllで簡易タグ一覧ページを作る（2013年12月8日追記）](http://genjiapp.com/blog/2013/11/21/simple-tags-page-for-jekyll.html)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n上記ソースでは`tag[0]`がタグ名、`tag[1]`がタグを含むページの配列になっているらしい。\n少し変更して実行してみる。\n\n{% raw %}\n```liquid\n{% for tag in site.tags %}\n<article>\n  <h3>{{ tag[0] }}</h3>\n  <ul>\n    {% for post in tag[1] %}\n    <li><a href=\"{{ post.url }}\">{{ post.title }}</a></li>\n    {% endfor %}\n  </ul>\n</article>\n{% endfor %}\n```\n{% endraw %}\n\n実行してみる。\n\n> {% for tag in site.tags %}\n> <article>\n>   <h3>{{ tag[0] }}</h3>\n>   <ul>\n>     {% for post in tag[1] %}\n>     <li><a href=\"{{ post.url }}\">{{ post.title }}</a></li>\n>     {% endfor %}\n>   </ul>\n> </article>\n> {% endfor %}\n\n**{{ page.lastchange }} 現在、固定ページのタグは取得できない** ことがわかった。\n\n",
  "output": null,
  "previous": {
    "collection": "docs",
    "path": "_docs/Jekyll/liquid-raw.md",
    "id": "/Jekyll/liquid-raw",
    "url": "/Jekyll/liquid-raw",
    "relative_path": "_docs/Jekyll/liquid-raw.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "liquidのソースコードを表示する",
    "date": "2017-03-03 00:00:00 +0900",
    "lastchange": "2017-06-15 23:00:29 +0000",
    "tags": [
      "jekyll",
      "liquid",
      "github",
      "pages"
    ],
    "slug": "liquid-raw",
    "ext": ".md"
  },
  "excerpt": "<h2 id=\"site内の変数についての調査\"><code class=\"language-plaintext highlighter-rouge\">site.*</code>内の変数についての調査</h2>\n\n",
  "url": "/Jekyll/site-variables",
  "relative_path": "_docs/Jekyll/site-variables.md",
  "draft": false,
  "categories": [

  ],
  "layout": "post",
  "title": "site変数の内容調査",
  "date": "2017-03-03 00:00:00 +0900",
  "lastchange": "2017-06-16 23:13:15 +0000",
  "tags": [
    "jekyll",
    "liquid",
    "github",
    "pages"
  ],
  "slug": "site-variables",
  "ext": ".md"
},
"path": "_docs/Jekyll/liquid-raw.md",
"id": "/Jekyll/liquid-raw",
"content": "## liquidのソースがJekyllでコンパイルされ、表示されない\n\nliquidのソースコードを載っけようとしたところ、\nJekyllでコンパイルする際に展開されてしまい、\n表示されず、意図しないものが出力されてしまう。\n\n参考\n\n* [How to escape liquid template tags? - Stack Overflow](http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags)\n\n## liquidのソースコードをエスケープする方法\n\n{% capture text %}\nit is possible to disable liquid processing engine using the raw tag:\n\n```liquid\n{{ \"{% raw \" }} %}\n{% raw %}\n{% this %}\n{% endraw %}\n{{ \"{% endraw \" }} %}\n```\n\nwill display \n{% raw %}\n```liquid\n{% this %}\n```\n{% endraw %} \nby [Etienne](http://stackoverflow.com/users/406458/etienne)\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[How to escape liquid template tags? - Stack Overflow](http://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\n\n\n\nということで`{{ \"{% raw \"}} %}`と`{{ \"{% endraw \" }} %}`で挟んだ間は展開されない。\n\n## `{{ \"{% raw \"}} %}`と`{{ \"{% endraw \" }} %}`をエスケープする\n\nだがしかし、`{{ \"{% raw \"}} %}`と`{{ \"{% endraw \" }} %}`を表示させることはこれではできない。\nそこで、上記の文はこのようになっている。\n\n{% raw %}\n```liquid\nということで`{{ \"{% raw \"}} %}`と`{{ \"{% endraw \" }} %}`で挟んだ間は展開されない。\n```\n{% endraw  %}\n",
"output": null,
"previous": {
  "collection": "docs",
  "next": {
    "collection": "docs",
    "path": "_docs/Jekyll/liquid-raw.md",
    "id": "/Jekyll/liquid-raw",
    "url": "/Jekyll/liquid-raw",
    "relative_path": "_docs/Jekyll/liquid-raw.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "liquidのソースコードを表示する",
    "date": "2017-03-03 00:00:00 +0900",
    "lastchange": "2017-06-15 23:00:29 +0000",
    "tags": [
      "jekyll",
      "liquid",
      "github",
      "pages"
    ],
    "slug": "liquid-raw",
    "ext": ".md"
  },
  "path": "_docs/Jekyll/display-value.md",
  "id": "/Jekyll/display-value",
  "content": "## 変数に何が入っているか調べたい\n\n参考\n\n* [Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n* [Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n```\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }}  <!-- ここを追加 -->\n```\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: `{{ some_var | inspect }}`\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\nとのことで、`inspect`フィルタで表示されるらしい。\n\n{% raw %}\n```liquid\n{{ page | inspect }}\n```\n{% endraw %}\n\n実行してみる\n\n> {{ page | inspect }}\n",
  "output": null,
  "previous": {
    "collection": "docs",
    "path": "_docs/Jekyll/post-layout.md",
    "id": "/Jekyll/post-layout",
    "url": "/Jekyll/post-layout",
    "relative_path": "_docs/Jekyll/post-layout.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "Jekyll:postsのレイアウトについて考える",
    "date": "2017-02-03 00:00:00 +0900",
    "lastchange": "2017-06-16 23:05:15 +0000",
    "tags": [
      "bootstrap",
      "jekyll"
    ],
    "slug": "post-layout",
    "ext": ".md"
  },
  "excerpt": "<h2 id=\"変数に何が入っているか調べたい\">変数に何が入っているか調べたい</h2>\n\n",
  "url": "/Jekyll/display-value",
  "relative_path": "_docs/Jekyll/display-value.md",
  "draft": false,
  "categories": [

  ],
  "layout": "post",
  "title": "変数の中身をページに表示する",
  "date": "2017-03-03 00:00:00 +0900",
  "lastchange": "2017-06-15 21:23:57 +0000",
  "tags": [
    "jekyll",
    "liquid",
    "github",
    "pages"
  ],
  "slug": "display-value",
  "ext": ".md"
},
"excerpt": "<h2 id=\"liquidのソースがjekyllでコンパイルされ表示されない\">liquidのソースがJekyllでコンパイルされ、表示されない</h2>\n\n",
"url": "/Jekyll/liquid-raw",
"relative_path": "_docs/Jekyll/liquid-raw.md",
"draft": false,
"categories": [

],
"layout": "post",
"title": "liquidのソースコードを表示する",
"date": "2017-03-03 00:00:00 +0900",
"lastchange": "2017-06-15 23:00:29 +0000",
"tags": [
  "jekyll",
  "liquid",
  "github",
  "pages"
],
"slug": "liquid-raw",
"ext": ".md"   },   "path": "_docs/Jekyll/display-value.md",   "id": "/Jekyll/display-value",   "content": "## 変数に何が入っているか調べたい\n\n参考\n\n* [Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n* [Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n```\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }}  <!-- ここを追加 -->\n```\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: `{{ some_var | inspect }}`\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\nとのことで、`inspect`フィルタで表示されるらしい。\n\n{% raw %}\n```liquid\n{{ page | inspect }}\n```\n{% endraw %}\n\n実行してみる\n\n> {{ page | inspect }}\n",   "output": null,   "previous": {
"collection": "docs",
"next": {
  "collection": "docs",
  "next": {
    "collection": "docs",
    "path": "_docs/Jekyll/liquid-raw.md",
    "id": "/Jekyll/liquid-raw",
    "url": "/Jekyll/liquid-raw",
    "relative_path": "_docs/Jekyll/liquid-raw.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "liquidのソースコードを表示する",
    "date": "2017-03-03 00:00:00 +0900",
    "lastchange": "2017-06-15 23:00:29 +0000",
    "tags": [
      "jekyll",
      "liquid",
      "github",
      "pages"
    ],
    "slug": "liquid-raw",
    "ext": ".md"
  },
  "path": "_docs/Jekyll/display-value.md",
  "id": "/Jekyll/display-value",
  "content": "## 変数に何が入っているか調べたい\n\n参考\n\n* [Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n* [Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n\n{% capture text %}\nJekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。\nsiteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。\n\n{% raw %}\n```\n---\nlayout: default\ntitle: Oh! My JK\n---\n#Welcome to my JK Home Page!\n\n{{ site }}  <!-- ここを追加 -->\n```\n{% endraw %}\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Jekyllいつやるの？ジキやルの？今でしょ！](http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\n\nこれが動かなかったので、変数をDumpする方法を調べた\n\n## inspectフィルタ\n\n{% capture text %}\n\n{% raw %}\nInspect\n: Convert an object into its String representation for debugging.\n: `{{ some_var | inspect }}`\n{% endraw %}\n\n{% endcapture %}\n{% assign text=text | markdownify %}\n{% assign source='\n[Templates - Jekyll](https://jekyllrb.com/docs/templates/)\n' | markdownify | remove: '<p>' | remove: '</p>' %}\n{% include cite.html text=text source=source %}\n\nとのことで、`inspect`フィルタで表示されるらしい。\n\n{% raw %}\n```liquid\n{{ page | inspect }}\n```\n{% endraw %}\n\n実行してみる\n\n> {{ page | inspect }}\n",
  "output": null,
  "previous": {
    "collection": "docs",
    "path": "_docs/Jekyll/post-layout.md",
    "id": "/Jekyll/post-layout",
    "url": "/Jekyll/post-layout",
    "relative_path": "_docs/Jekyll/post-layout.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "Jekyll:postsのレイアウトについて考える",
    "date": "2017-02-03 00:00:00 +0900",
    "lastchange": "2017-06-16 23:05:15 +0000",
    "tags": [
      "bootstrap",
      "jekyll"
    ],
    "slug": "post-layout",
    "ext": ".md"
  },
  "excerpt": "<h2 id=\"変数に何が入っているか調べたい\">変数に何が入っているか調べたい</h2>\n\n",
  "url": "/Jekyll/display-value",
  "relative_path": "_docs/Jekyll/display-value.md",
  "draft": false,
  "categories": [

  ],
  "layout": "post",
  "title": "変数の中身をページに表示する",
  "date": "2017-03-03 00:00:00 +0900",
  "lastchange": "2017-06-15 21:23:57 +0000",
  "tags": [
    "jekyll",
    "liquid",
    "github",
    "pages"
  ],
  "slug": "display-value",
  "ext": ".md"
},
"path": "_docs/Jekyll/post-layout.md",
"id": "/Jekyll/post-layout",
"content": "<h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n<p>post用のレイアウトを作ってなかったがさすがにみづらいので仮で作った。</p>\n\n<p>参考:</p>\n\n<ul>\n  <li><a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの？ジキやルの？今でしょ！</a></li>\n  <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n  <li><a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a></li>\n  <li><a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a></li>\n</ul>\n\n<p>結果として今はこんな感じ</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\nlayout : default\n---\n\n<span class=\"nt\"><header</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><h1></span>{{page.title}}<span class=\"nt\"></h1></span>\n  <span class=\"nt\"><dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><dt></span>created<span class=\"nt\"></dt></span>\n    <span class=\"nt\"><dd></span>{{page.date | date : \"%F\"}}<span class=\"nt\"></dd></span>\n    <span class=\"nt\"><dt></span>last change<span class=\"nt\"></dt></span>\n    <span class=\"nt\"><dd></span>{{page.lastchange}}<span class=\"nt\"></dd></span>\n  <span class=\"nt\"></dl></span>\n<span class=\"nt\"></header></span>\n\n<span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"row\"</span><span class=\"nt\">></span>\n  {{ content }}\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<p>過程は以下</p>\n\n<h2 id=\"jekyllでpost用のレイアウトを作る\">Jekyllでpost用のレイアウトを作る</h2>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"postのレイアウト\">Postのレイアウト</h3>\n\n<p>次に記事にも専用のレイアウトを用意します。_layoutsディレクトリ以下に<code class=\"language-plaintext highlighter-rouge\">post.html</code>を作って、次のような内容にします。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>% <span class=\"nb\">touch </span>_layouts/post.html\n</code></pre></div></div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\nlayout: default\n---\n<span class=\"nt\"><header></span>\n  <span class=\"nt\"><div></span>{{ page.date | date_to_string }}<span class=\"nt\"></div></span>\n  <span class=\"nt\"><h1></span>{{ page.title }}<span class=\"nt\"></h1></span>\n<span class=\"nt\"></header></span>\n\n<span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">'main'</span><span class=\"nt\">></span>\n  {{ content }}\n<span class=\"nt\"></div></span>\n\n<span class=\"nt\"><footer></span>\n  <span class=\"nt\"><p></span>- rendered with post template -<span class=\"nt\"></p></span>\n<span class=\"nt\"></footer></span>\n</code></pre></div></div>\n\n<p>Front-Matterでdefault.htmlを読み込むようにします。これによりpost.htmlはdefault.htmlのサブテンプレートになります。header部分に投稿日とタイトルを表示するようLiquidで指定します。</p>\n\n<p>なお、<code class=\"language-plaintext highlighter-rouge\">{{ page.date | date_to_string }}</code>はJekyllで拡張されたLiquidのフィルターという機能を使って、\n出力の整形を行なっています(<a href=\"http://jekyllrb.com/docs/templates/\">Templates</a>)。\ndefault.htmlと同様に、このテンプレートが読み込まれたことを見るために <strong>rendered with post template</strong> を追加しておきます。</p>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの？ジキやルの？今でしょ！</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>これを参考にbootstrap風味にする。</p>\n\n<blockquote class=\"blockquote\">\n  \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n  <h1>Example page header <small>Subtext for header</small></h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><h1></span>Example page header <span class=\"nt\"><small></span>Subtext for header<span class=\"nt\"></small></h1></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>page-header</strong> クラスがあるので利用する。</p>\n\n<p>他に作成日時と、変更日時を独自に仕込んでいるので入れたい。</p>\n\n<blockquote class=\"blockquote\">\n  \n<h4 id=\"horizontal-description\">Horizontal description</h4>\n\n<p>Make terms and descriptions in <code class=\"language-plaintext highlighter-rouge\"><dl></code> line up side-by-side.\nStarts off stacked like default <code class=\"language-plaintext highlighter-rouge\"><dl></code>s, but when the navbar expands, so do these.</p>\n\n<dl class=\"dl-horizontal\">\n  <dt>Description lists</dt>\n  <dd>A description list is perfect for defining terms.</dd>\n  <dt>Euismod</dt>\n  <dd>\n    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.\n    Donec id elit non mi porta gravida at eget metus.\n  </dd>\n  <dt>Malesuada porta</dt>\n  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>\n  <dt>Felis euismod semper eget lacinia</dt>\n  <dd>\n    Fusce dapibus, tellus ac cursus commodo,\n    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n  </dd>\n</dl>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><dt></span>...<span class=\"nt\"></dt></span>\n  <span class=\"nt\"><dd></span>...<span class=\"nt\"></dd></span>\n<span class=\"nt\"></dl></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<h1 id=\"date\">date</h1>\n\n<p>Converts a timestamp into another date format.\nThe format for this syntax is the same as <a href=\"http://strftime.net/\">strftime</a>.</p>\n\n<h3 id=\"input\">Input</h3>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>{{ article.published_at | date: \"%a, %b %d, %y\" }}\n</code></pre></div></div>\n\n<h3 id=\"output\">Output</h3>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Fri, Jul 17, 15\n</code></pre></div></div>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>定義リストとこの書式制御を利用することにした。</p>\n",
"output": "<!DOCTYPE html>\n<html lang=\"ja\">\n  <head>\n  <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \n  <meta name=\"keywords\" content=\"bootstrap,jekyll\">\n\n\n  <title>Jekyll:postsのレイアウトについて考える</title>\n\n  <!-- bootstrap and jQuery include -->\n  <link rel=\"stylesheet\" href=\"https://leico.github.io/TechnicalNote/css/style.css\">\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\"></script>\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\"></script>\n  <!-- bootstrap and jQuery include -->\n\n  <!-- MathJax include -->\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\"></script>\n  <script type=\"text/x-mathjax-config\">\n    MathJax.Hub.Config({\n      \"HTML-CSS\": {\n        // デフォルトが [\"STIX\",\"TeX\"] なのを変更\n        // [] にしても良い\n          availableFonts: [\"TeX\"]\n        , undefinedFamily: \"'Raleway', Helvetica, Arial, sans-serif\"\n      }\n    });\n  </script>\n  <!-- Google Analytics -->\n  <script>\n    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n    \n    ga('create', 'UA-100782315-1', 'auto');\n    ga('send', 'pageview');\n  </script>\n\n  <!-- Atom feed -->\n  <link type=\"application/atom+xml\" rel=\"alternate\" href=\"https://leico.github.io/TechnicalNote/atom.xml\" title=\"TechnicalNote\" />\n</head>\n\n\n  <body>\n    <div class=\"container\">\n    <div class=\"row\">\n\n\n  <div class=\"col-md-8\">\n\n    <header class=\"page-header\">\n      <h1>Jekyll:postsのレイアウトについて考える</h1>\n      <div class=\"row\">\n\n        <div class=\"col-6\">\n          <dl class=\"dl-horizontal\">\n            <dt>created</dt>\n            <dd>2017-02-03</dd>\n            <dt>last change</dt>\n            <dd>2017-06-16 23:05:15 +0000</dd>\n          </dl>\n        </div>\n\n        <div class=\"col-6 text-right\">\n          <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n        </div>\n\n      </div>\n    </header>\n\n    <div class=\"row\">\n\n      <div class=\"col-12\">\n        <h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n<p>post用のレイアウトを作ってなかったがさすがにみづらいので仮で作った。</p>\n\n<p>参考:</p>\n\n<ul>\n  <li><a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの？ジキやルの？今でしょ！</a></li>\n  <li><a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a></li>\n  <li><a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a></li>\n  <li><a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a></li>\n</ul>\n\n<p>結果として今はこんな感じ</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\nlayout : default\n---\n\n<span class=\"nt\"><header</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><h1></span>{{page.title}}<span class=\"nt\"></h1></span>\n  <span class=\"nt\"><dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><dt></span>created<span class=\"nt\"></dt></span>\n    <span class=\"nt\"><dd></span>{{page.date | date : \"%F\"}}<span class=\"nt\"></dd></span>\n    <span class=\"nt\"><dt></span>last change<span class=\"nt\"></dt></span>\n    <span class=\"nt\"><dd></span>{{page.lastchange}}<span class=\"nt\"></dd></span>\n  <span class=\"nt\"></dl></span>\n<span class=\"nt\"></header></span>\n\n<span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"row\"</span><span class=\"nt\">></span>\n  {{ content }}\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<p>過程は以下</p>\n\n<h2 id=\"jekyllでpost用のレイアウトを作る\">Jekyllでpost用のレイアウトを作る</h2>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"postのレイアウト\">Postのレイアウト</h3>\n\n<p>次に記事にも専用のレイアウトを用意します。_layoutsディレクトリ以下に<code class=\"language-plaintext highlighter-rouge\">post.html</code>を作って、次のような内容にします。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>% <span class=\"nb\">touch </span>_layouts/post.html\n</code></pre></div></div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\nlayout: default\n---\n<span class=\"nt\"><header></span>\n  <span class=\"nt\"><div></span>{{ page.date | date_to_string }}<span class=\"nt\"></div></span>\n  <span class=\"nt\"><h1></span>{{ page.title }}<span class=\"nt\"></h1></span>\n<span class=\"nt\"></header></span>\n\n<span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">'main'</span><span class=\"nt\">></span>\n  {{ content }}\n<span class=\"nt\"></div></span>\n\n<span class=\"nt\"><footer></span>\n  <span class=\"nt\"><p></span>- rendered with post template -<span class=\"nt\"></p></span>\n<span class=\"nt\"></footer></span>\n</code></pre></div></div>\n\n<p>Front-Matterでdefault.htmlを読み込むようにします。これによりpost.htmlはdefault.htmlのサブテンプレートになります。header部分に投稿日とタイトルを表示するようLiquidで指定します。</p>\n\n<p>なお、<code class=\"language-plaintext highlighter-rouge\">{{ page.date | date_to_string }}</code>はJekyllで拡張されたLiquidのフィルターという機能を使って、\n出力の整形を行なっています(<a href=\"http://jekyllrb.com/docs/templates/\">Templates</a>)。\ndefault.htmlと同様に、このテンプレートが読み込まれたことを見るために <strong>rendered with post template</strong> を追加しておきます。</p>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://melborne.github.io/2013/05/20/now-the-time-to-start-jekyll/\">Jekyllいつやるの？ジキやルの？今でしょ！</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>これを参考にbootstrap風味にする。</p>\n\n<blockquote class=\"blockquote\">\n  \n<h1 id=\"page-header\">Page header</h1>\n\n<p>A simple shell for an h1 to appropriately space out and segment sections of content on a page.\nIt can utilize the h1’s default small element, as well as most other components (with additional styles).</p>\n\n<div class=\"page-header\">\n  <h1>Example page header <small>Subtext for header</small>\n</h1>\n</div>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"page-header\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><h1></span>Example page header <span class=\"nt\"><small></span>Subtext for header<span class=\"nt\"></small></h1></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/components/#page-header\">Components - Bootstrap#Page header</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>page-header</strong> クラスがあるので利用する。</p>\n\n<p>他に作成日時と、変更日時を独自に仕込んでいるので入れたい。</p>\n\n<blockquote class=\"blockquote\">\n  \n<h4 id=\"horizontal-description\">Horizontal description</h4>\n\n<p>Make terms and descriptions in <code class=\"language-plaintext highlighter-rouge\"><dl></code> line up side-by-side.\nStarts off stacked like default <code class=\"language-plaintext highlighter-rouge\"><dl></code>s, but when the navbar expands, so do these.</p>\n\n<dl class=\"dl-horizontal\">\n  <dt>Description lists</dt>\n  <dd>A description list is perfect for defining terms.</dd>\n  <dt>Euismod</dt>\n  <dd>\n    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.\n    Donec id elit non mi porta gravida at eget metus.\n  </dd>\n  <dt>Malesuada porta</dt>\n  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>\n  <dt>Felis euismod semper eget lacinia</dt>\n  <dd>\n    Fusce dapibus, tellus ac cursus commodo,\n    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\n  </dd>\n</dl>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><dl</span> <span class=\"na\">class=</span><span class=\"s\">\"dl-horizontal\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><dt></span>...<span class=\"nt\"></dt></span>\n  <span class=\"nt\"><dd></span>...<span class=\"nt\"></dd></span>\n<span class=\"nt\"></dl></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/css/#description\">CSS - Bootstrap#description</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<h1 id=\"date\">date</h1>\n\n<p>Converts a timestamp into another date format.\nThe format for this syntax is the same as <a href=\"http://strftime.net/\">strftime</a>.</p>\n\n<h3 id=\"input\">Input</h3>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>{{ article.published_at | date: \"%a, %b %d, %y\" }}\n</code></pre></div></div>\n\n<h3 id=\"output\">Output</h3>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Fri, Jul 17, 15\n</code></pre></div></div>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://shopify.github.io/liquid/filters/date/\">date – Liquid template language</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>定義リストとこの書式制御を利用することにした。</p>\n\n      </div>\n\n      <div class=\"col-12\">\n        <hr>\n        <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n      </div>\n\n    </div>\n\n  </div>\n  \n    <div class=\"col-md-4\">\n      <h2>\n        <a href=\"https://leico.github.io/TechnicalNote/\">\n          Technical Note\n        </a>\n      </h2>\n\n      \n\n      \n\n      <h3>\n        <a href=\"https://leico.github.io/TechnicalNote/Jekyll\">github pages & Jekyll Top</a>\n      </h3>\n\n      \n        <h3>github pagesの管理</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/dlopen-openssl1.0.0\">bundle update で dlopen が OpenSSL でエラー</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/update-github-page\">github-pages環境のアップデート</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/fix-3.4.3\">github-pages jekyll 3.4.3不具合の対処法</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Jekyllの導入</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-homebrew\">rbenvをHomebrewからインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/Ruby-research\">Ruby開発環境についての調査</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-install\">rbenvをアプリケーションフォルダにインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-usage\">rbenvコマンドの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/bundle-usage\">bundlerの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-usage\">jekyllの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-debug\">Github Pagesのデバッグ環境を整える</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-generator\">Github Pages Gemを、複数のプロジェクトからエイリアスで参照する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/worth-bundle-install\">gemを間違えてグローバルにインストールしてしまった場合</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Install frameworks</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\">Github Pagesにsubmoduleとしてbootstrapを入れる</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/mathjax-install\">MathJaxをインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\">Github Pagesにbootstrap sassをインストールする</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Jekyll variables</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/collection-variable\">Collection変数を調査する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/site-variables\">site変数の内容調査</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/display-value\">変数の中身をページに表示する</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Tips</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-syntaxhighlight\">Jekyllのシンタックスハイライトのテーマを作って変更する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/cite-include\">Jekyll & Bootstrapで引用の書きかた</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-atom\">Collectiosの変更に追従するAtomフィードを設置する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/liquid-raw\">liquidのソースコードを表示する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/page-menu\">ページメニューの作り方</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/post-layout\">Jekyll:postsのレイアウトについて考える</a>\n          </li>\n\n        \n        </ul>\n      \n    </div>\n  \n\n</div>\n\n    </div>\n    <footer class=\"container\">\n  <hr>\n  <div class=\"row\">\n    <div class=\"col\">\n      <p class=\"text-right\">\n      <a href=\"https://leico.github.io/TechnicalNote/atom.xml\">Atom</a>\n      </p>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <div class=\"col-md-4\">\n          <figure class=\"figure\">\n            <img src=\"https://leico.github.io/TechnicalNote/image/logo.png\" class=\"figure-img rounded\" width=\"200px\" height=\"auto\" alt=\"\">\n          </figure>\n        </div>\n        <div class=\"col-md-4\">\n          <h5>contact</h5>\n          <ul class=\"list-unstyled\">\n            <li> <a href=\"https://github.com/leico\" class=\"user-mention\">@leico</a> </li>\n            <li> <a href=\"https://www.twitter.com/1_0101\">twitter</a>\n</li>\n            <li> <a href=\"https://leico.github.io\">web</a> </li>\n            <li> oishi[at]signalcompose.com </li>\n          </ul>\n          何かありましたらお気軽に。調査、開発などのご依頼も承ります。\n        </div>\n        <div class=\"col-md-4\">\n          <dl>\n            <dt>Technical Note Vol.1 2 3</dt>\n            <dd>Max for Live の項目が本になりました。</dd>\n            <dd><a href=\"https://signalcompose.booth.pm/items/1575989\">Booth</a></dd>\n            <dd><a href=\"https://signalcompose.stores.jp/items/5e9d0a6f515762579be0b8a9\">Stores</a></dd>\n          </dl>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-4\">\n      <h5>Merchandise/Schwags</h5>\n      <p><small class=\"text-muted\">支援してくれるとうれしい</small></p>\n      <iframe frameborder=\"0\" height=\"220\" width=\"160\" src=\"https://leico.official.ec/items/6694858/widget/small\"></iframe>\n    </div>\n  </div>\n  <p class=\"text-right\">\n    <small class=\"text-muted\">© 2020 leico.</small>\n  </p>\n\n</footer>\n\n  </body>\n</html>\n",
"previous": {
  "collection": "docs",
  "next": {
    "collection": "docs",
    "path": "_docs/Jekyll/post-layout.md",
    "id": "/Jekyll/post-layout",
    "url": "/Jekyll/post-layout",
    "relative_path": "_docs/Jekyll/post-layout.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "Jekyll:postsのレイアウトについて考える",
    "date": "2017-02-03 00:00:00 +0900",
    "lastchange": "2017-06-16 23:05:15 +0000",
    "tags": [
      "bootstrap",
      "jekyll"
    ],
    "slug": "post-layout",
    "ext": ".md"
  },
  "path": "_docs/Jekyll/jekyll-bootstrap-install.md",
  "id": "/Jekyll/jekyll-bootstrap-install",
  "content": "<h2 id=\"github-pagesを簡単にレスポンシブにしたい\">Github Pagesを簡単にレスポンシブにしたい</h2>\n\n<p>ので、<a href=\"http://getbootstrap.com/\">Bootstrap</a>を利用したい。</p>\n\n<p>レスポンシブの意味合いが変化しているように感じる。</p>\n\n<dl>\n  <dt>2000年初め</dt>\n  <dd>ウィンドウサイズを変更したときにサイズに応じて各要素が変化する。cssで幅、高さを<code class=\"language-plaintext highlighter-rouge\">%</code>指定などで実装</dd>\n  <dt>最近</dt>\n  <dd>魑魅魍魎の画面サイズに対応したレイアウトに変化する。</dd>\n</dl>\n\n<p>ということで、スマートフォンでも問題ないレイアウトでページが組みたい。</p>\n\n<h2 id=\"bootstrapのインストール\">Bootstrapのインストール</h2>\n\n<p>参考</p>\n\n<ul>\n  <li>jekyllへのbootstrapのインストール概略\n    <ul>\n      <li><a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a></li>\n      <li><a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a></li>\n    </ul>\n  </li>\n  <li>SASSについて、jekyllでのSASSコンパイルについて\n    <ul>\n      <li><a href=\"http://qiita.com/ritukiii/items/67b3c50002b48c6186d6\">CSSのメタ言語Sass(SCSS)、LESSの完全入門</a></li>\n      <li><a href=\"http://jekyllrb-ja.github.io/docs/assets/\">Jekyll - Assets</a>\n        <ul>\n          <li><a href=\"https://jekyllrb.com/docs/assets/\">Jekyll - Assets</a></li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>Bootstrap sassについて\n    <ul>\n      <li><a href=\"http://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad\">Bootstrap 4を使うならSassを使って3倍幸せになろう</a></li>\n      <li><a href=\"http://qiita.com/masamitsu-konya/items/e3630046774ac1fbd346\">全部はいらないよね？bootstrap-sassをカスタマイズして使う方法</a></li>\n    </ul>\n  </li>\n  <li>BootstrapとjQueryとか\n    <ul>\n      <li><a href=\"http://itstudio.co/2015/04/06/3816/\">Bootstrapの使い方（１）〜準備</a></li>\n      <li><a href=\"http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/\">Bootstrap 3.3.7 released</a></li>\n      <li><a href=\"http://code-examples-ja.hateblo.jp/entry/2014/07/28/Bootstrap%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%80%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BjQuery%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%A9\">Bootstrapをはじめる。対応しているjQueryのバージョンなど。</a></li>\n    </ul>\n  </li>\n  <li>Bootstrapインストール確認、インストール後Tips\n    <ul>\n      <li><a href=\"http://blog.scheakur.com/post/90240750827/github\">GitHub PagesでJekyllを使う場合、cssファイルなどへのパスには<code class=\"language-plaintext highlighter-rouge\">https://leico.github.io/TechnicalNote</code>を使うと良い</a></li>\n      <li><a href=\"http://getbootstrap.com/components/\">Components</a></li>\n    </ul>\n  </li>\n</ul>\n\n<h3 id=\"bootstrapのダウンロード\">Bootstrapのダウンロード</h3>\n\n<blockquote class=\"blockquote\">\n  \n<h2 id=\"get-twitter-bottstrap-sass-files\">Get Twitter Bottstrap Sass files</h2>\n\n<ul>\n  <li>Download zip archive from <a href=\"https://github.com/twbs/bootstrap-sass/releases\">release page</a>.</li>\n</ul>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<p>Download the latest version of <a href=\"https://github.com/twbs/bootstrap-sass\">bootstrap-sass</a>. Extract it to a temporary folder.</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>ということで、bootstrap-sassをダウンロードしてくる。\nbootstrap-sassのダウンロード先だが、本家WebサイトのDownloadにした。</p>\n\n<p>Getting startedの</p>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"sass\">Sass</h3>\n\n<p><a href=\"https://github.com/twbs/bootstrap-sass\">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>\n\n<p><a href=\"https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz\">Download Sass</a></p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/getting-started/#download\">Bootstrap - Getting started</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>からダウンロードする。</p>\n\n<p>ダウンロードしたらテキトーなディレクトリに展開する。</p>\n\n<h3 id=\"jqueryのダウンロード\">jQueryのダウンロード</h3>\n\n<p>jQueryのサイトから圧縮版をダウンロードする。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p><a href=\"https://code.jquery.com/jquery-3.1.1.min.js\">Download the compressed, production jQuery 3.1.1</a></p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://jquery.com/download/\">Download jQuery | jQuery</a>\n\n  </cite></footer>\n</blockquote>\n\n<h3 id=\"bootstrapのインストール-1\">Bootstrapのインストール</h3>\n\n<p>展開したファイルを適切なディレクトリに移動させて、jekyllの設定を変更する。</p>\n\n<p>行数が多いのでセクション毎にわけている。</p>\n\n<h4 id=\"_configyml-を変更する\"><strong>_config.yml</strong> を変更する</h4>\n\n<p>まずはjekyllの設定を行う。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p>Add the following line to your _config.yml file:</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>sass:\n    sass_dir: _sass\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_config.yml</strong> にsassが配置されるディレクトリを指定する。\n引用の通り、 <strong>_sass</strong> ディレクトリに配置することにする。</p>\n\n<h4 id=\"_sass-ディレクトリの作成\"><strong>_sass</strong> ディレクトリの作成</h4>\n\n<blockquote class=\"blockquote\">\n  \n<p>Create a SASS import directory. This is the folder that jekyll will tell SASS to use when you @import things.</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nv\">$ </span><span class=\"nb\">cd </span>my_jekyll_blog\n<span class=\"nv\">$ $ </span><span class=\"nb\">mkdir </span>_sass\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_config.yml</strong> に設定した通り、<strong>_sass</strong> ディレクトリをjekyllプロジェクトページに作成する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>_sass\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのsassファイルインストール\">Bootstrapのsassファイルインストール</h4>\n\n<blockquote class=\"blockquote\">\n  \n<p>Download the latest version of <a href=\"https://github.com/twbs/bootstrap-sass\">bootstrap-sass</a>.\nExtract it to a temporary folder.\nThen copy the <code class=\"language-plaintext highlighter-rouge\">assets/stylesheets/bootstrap.scss</code> file and \n<code class=\"language-plaintext highlighter-rouge\">assets/stylesheets/bootstrap/</code>\nfolder to your blog SASS import directory. (<code class=\"language-plaintext highlighter-rouge\">\\_sass</code>).</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"get-twitter-bottstrap-sass-files\">Get Twitter Bottstrap Sass files</h3>\n\n<ul>\n  <li>Download zip archive from <a href=\"https://github.com/twbs/bootstrap-sass/releases\">release page</a>.</li>\n  <li>Unzip the <code class=\"language-plaintext highlighter-rouge\">assets</code> folder at the root of your site.</li>\n</ul>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>片方は <strong>_sass</strong> 直下、片方は <strong>assets</strong> を丸ごとコピーしており、それぞれ <strong>_config.yml</strong> の記述方法も違う。</p>\n\n<p><strong>_sass</strong> 直下も <strong>assets/stylesheets</strong> をsass用ディレクトリにするのも違う気がするので、\nBootstrapを展開したディレクトリの <strong>assets/stylesheets</strong> ディレクトリを <strong>_sass/bootstrap</strong> としてコピーする\nという方法にした。後から <strong>javascripts</strong> 、 <strong>fonts</strong> ディレクトリも別の場所に配置する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">cp</span> <span class=\"nt\">-r</span> ../bootstrap-sass/assets/stylesheets _sass/bootstrap\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのjavascriptファイルインストール\">Bootstrapのjavascriptファイルインストール</h4>\n\n<p>次はjavascriptsを移動させる。これらは <strong>js/bootstrap</strong> ディレクトリに配置する。\nビルドされる必要はないが、出力されるWebサイトデータにコピーされていなければならないので、\n<strong>_sass</strong> 等に配置はできない。</p>\n\n<p>後ほど <strong>js</strong> ディレクトリにはjQueryもインストールする。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>js\n<span class=\"nb\">cp</span> ../bootstrap-sass/assets/javascripts js/bootstrap\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのfontファイルインストール\">Bootstrapのfontファイルインストール</h4>\n\n<p>フォントは <strong>fonts</strong> に移動させる。bootstrapのフォント以外を利用する予定がないため。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>fonts\n<span class=\"nb\">cp</span> ../bootstrap-sass/assets/fonts <span class=\"nb\">.</span>\n</code></pre></div></div>\n\n<h4 id=\"自前のsassファイル作成\">自前のsassファイル作成</h4>\n\n<p>ここまできたらbootstrap sassを自作のsassファイルで <code class=\"language-plaintext highlighter-rouge\">@import</code> する。\nひとまず、自前の大域的に利用するスタイルシートで利用するので、\n<strong>css/style.sass</strong> ファイルを作成して利用する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>css <span class=\"o\">&&</span> <span class=\"nb\">cd </span>css\n<span class=\"nb\">touch </span>style.sass\n</code></pre></div></div>\n\n<blockquote class=\"blockquote\">\n  \n<p>Jekyll は Sass と CoffeeScript の組み込みをサポートしています。\nそれらを使うためには、適切な拡張子名のファイルを作成( <code class=\"language-plaintext highlighter-rouge\">.sass</code>, <code class=\"language-plaintext highlighter-rouge\">.scss</code> や <code class=\"language-plaintext highlighter-rouge\">.coffee</code> の一つ) し、\nファイルを2行の3ダッシュで開始します、このように:</p>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">---</span>\n<span class=\"nt\">---</span>\n\n<span class=\"o\">//</span> <span class=\"err\">コンテンツのはじまり</span>\n<span class=\"nc\">.my-definition</span>\n  <span class=\"nt\">font-size</span><span class=\"o\">:</span> <span class=\"nt\">1</span><span class=\"nc\">.2em</span>\n</code></pre></div></div>\n\n<p>Jekyll はこれらのファイルを通常ページと同一に扱われ、 その中で出力ファイルはもとファイルと同一ディレクトリに配置されます。 \n例えば、あなたが <code class=\"language-plaintext highlighter-rouge\">/css/styles.scss</code> という名前のファイルを\nサイトのソースフォルダに持っていた場合、 Jekyll はそれを処理し、そしてサイトの指定フォルダの下に <code class=\"language-plaintext highlighter-rouge\">/css/styles.css</code> を配置します。</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<ul>\n  <li><a href=\"http://jekyllrb-ja.github.io/docs/assets/\">Jekyll - Assets</a>\n    <ul>\n      <li><a href=\"https://jekyllrb.com/docs/assets/\">Jekyll - Assets</a></li>\n    </ul>\n  </li>\n</ul>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>style.sass</strong> ファイルの中身は以下</p>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">---</span>\n<span class=\"nt\">---</span>\n\n<span class=\"k\">@import</span> <span class=\"s1\">\"bootstrap/_bootstrap\"</span>\n</code></pre></div></div>\n\n<h4 id=\"jqueryのインストール\">jQueryのインストール</h4>\n\n<p>jQueryを <strong>js</strong> ディレクトリにインストールする。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">cp</span> ../jquery-3.1.1.min.js js/.\n</code></pre></div></div>\n\n<h4 id=\"ディレクトリ構成まとめ\">ディレクトリ構成まとめ</h4>\n\n<p>参考</p>\n\n<ul>\n  <li><a href=\"http://qiita.com/yone098@github/items/bba8a42de6b06e40983b\">tree コマンドが無い環境で tree コマンドを実現</a></li>\n</ul>\n\n<p>ここまでのディレクトリ構成を図解</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>\ngithub-pages/\n|--.DS_Store\n|--.bundle\n|--.gitignore\n|--.ruby-version\n|--Gemfile\n|--Gemfile.lock\n|--_config.yml\n|--_layouts\n|  |--default.html\n|--_posts\n|--_sass\n|  |--bootstrap\n|  |  |--.DS_Store\n|  |  |--_bootstrap-compass.scss\n|  |  |--_bootstrap-mincer.scss\n|  |  |--_bootstrap-sprockets.scss\n|  |  |--_bootstrap.scss\n|  |  |--bootstrap\n|  |  |  |--.DS_Store\n|  |  |  |--_alerts.scss\n|  |  |  |--_badges.scss\n|  |  |  |--_breadcrumbs.scss\n|  |  |  |--_button-groups.scss\n|  |  |  |--_buttons.scss\n|  |  |  |--_carousel.scss\n|  |  |  |--_close.scss\n|  |  |  |--_code.scss\n|  |  |  |--_component-animations.scss\n|  |  |  |--_dropdowns.scss\n|  |  |  |--_forms.scss\n|  |  |  |--_glyphicons.scss\n|  |  |  |--_grid.scss\n|  |  |  |--_input-groups.scss\n|  |  |  |--_jumbotron.scss\n|  |  |  |--_labels.scss\n|  |  |  |--_list-group.scss\n|  |  |  |--_media.scss\n|  |  |  |--_mixins.scss\n|  |  |  |--_modals.scss\n|  |  |  |--_navbar.scss\n|  |  |  |--_navs.scss\n|  |  |  |--_normalize.scss\n|  |  |  |--_pager.scss\n|  |  |  |--_pagination.scss\n|  |  |  |--_panels.scss\n|  |  |  |--_popovers.scss\n|  |  |  |--_print.scss\n|  |  |  |--_progress-bars.scss\n|  |  |  |--_responsive-embed.scss\n|  |  |  |--_responsive-utilities.scss\n|  |  |  |--_scaffolding.scss\n|  |  |  |--_tables.scss\n|  |  |  |--_theme.scss\n|  |  |  |--_thumbnails.scss\n|  |  |  |--_tooltip.scss\n|  |  |  |--_type.scss\n|  |  |  |--_utilities.scss\n|  |  |  |--_variables.scss\n|  |  |  |--_wells.scss\n|  |  |  |--mixins\n|  |  |  |  |--_alerts.scss\n|  |  |  |  |--_background-variant.scss\n|  |  |  |  |--_border-radius.scss\n|  |  |  |  |--_buttons.scss\n|  |  |  |  |--_center-block.scss\n|  |  |  |  |--_clearfix.scss\n|  |  |  |  |--_forms.scss\n|  |  |  |  |--_gradients.scss\n|  |  |  |  |--_grid-framework.scss\n|  |  |  |  |--_grid.scss\n|  |  |  |  |--_hide-text.scss\n|  |  |  |  |--_image.scss\n|  |  |  |  |--_labels.scss\n|  |  |  |  |--_list-group.scss\n|  |  |  |  |--_nav-divider.scss\n|  |  |  |  |--_nav-vertical-align.scss\n|  |  |  |  |--_opacity.scss\n|  |  |  |  |--_pagination.scss\n|  |  |  |  |--_panels.scss\n|  |  |  |  |--_progress-bar.scss\n|  |  |  |  |--_reset-filter.scss\n|  |  |  |  |--_reset-text.scss\n|  |  |  |  |--_resize.scss\n|  |  |  |  |--_responsive-visibility.scss\n|  |  |  |  |--_size.scss\n|  |  |  |  |--_tab-focus.scss\n|  |  |  |  |--_table-row.scss\n|  |  |  |  |--_text-emphasis.scss\n|  |  |  |  |--_text-overflow.scss\n|  |  |  |  |--_vendor-prefixes.scss\n|--_site\n|--css\n|  |--style.sass\n|--fonts\n|  |--bootstrap\n|  |  |--glyphicons-halflings-regular.eot\n|  |  |--glyphicons-halflings-regular.svg\n|  |  |--glyphicons-halflings-regular.ttf\n|  |  |--glyphicons-halflings-regular.woff\n|  |  |--glyphicons-halflings-regular.woff2\n|--index.md\n|--js\n|  |--bootstrap\n|  |  |--.DS_Store\n|  |  |--bootstrap\n|  |  |--bootstrap-sprockets.js\n|  |  |--bootstrap.js\n|  |  |--bootstrap.min.js\n|  |  |  |--affix.js\n|  |  |  |--alert.js\n|  |  |  |--button.js\n|  |  |  |--carousel.js\n|  |  |  |--collapse.js\n|  |  |  |--dropdown.js\n|  |  |  |--modal.js\n|  |  |  |--popover.js\n|  |  |  |--scrollspy.js\n|  |  |  |--tab.js\n|  |  |  |--tooltip.js\n|  |  |  |--transition.js\n|  |--jquery-3.1.1.min.js\n|--vendor\n</code></pre></div></div>\n\n<h4 id=\"レイアウトデータでの読み込み\">レイアウトデータでの読み込み</h4>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"テンプレート\">テンプレート</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n<span class=\"nt\"><head></span>\n  <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"X-UA-Compatible\"</span> <span class=\"na\">content=</span><span class=\"s\">\"IE=edge\"</span> <span class=\"na\">charset=</span><span class=\"s\">\"utf-8\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1.0\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><link</span> <span class=\"na\">href=</span><span class=\"s\">\"css/bootstrap.min.css\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span><span class=\"nt\">></span>\n  <span class=\"c\"><!--[if lt IE 9]>\n    <script src=\"js/html5shiv.js\"></script>\n    <script src=\"js/respond.min.js\"></script>\n  <![endif]--></span>\n  <span class=\"nt\"><script </span><span class=\"na\">src=</span><span class=\"s\">\"js/jquery.min.js\"</span><span class=\"nt\">></script></span>\n  <span class=\"nt\"><script </span><span class=\"na\">src=</span><span class=\"s\">\"js/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n<span class=\"nt\"></head></span>\n<span class=\"nt\"><body></span>\n\n\n<span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://code-examples-ja.hateblo.jp/entry/2014/07/28/Bootstrap%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%80%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BjQuery%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%A9\">Bootstrapをはじめる。対応しているjQueryのバージョンなど。</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_layouts/default.html</strong> でjQueryとbootstrapを呼び出す。\n引用元と少し変える部分は、bootstrapのcssを直接呼び出すのではなく、 <strong>css/style.css</strong> を呼び出すのと、\n各々配置されているディレクトリ名が変わっていること。 <strong>css/style.css</strong> は <strong>css/style.sass</strong> がビルドされて出力されたもの。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p>では、どうすればいいのでしょうか。 正解は GitHub Pages だけで有効になるsite変数を使うことです。\n以下のページに記載されていますが、GitHub Pages上ではさまざまなメタデータをsite変数として利用可能です。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>https://help.github.com/articles/repository-metadata-on-github-pages\n</code></pre></div></div>\n\n<p>cssファイルなどへのパスに利用したい場合は site.github.url を使うと良いでしょう。つまり、以下のように記述するわけです。</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><link rel=\"stylesheet\" href=\"{{site.github.url}}/css/style.css\" charset=\"utf-8\">\n</code></pre></div></div>\n\n<p>このように記述しておくと、GitHub Pages上では以下のように展開され、正しくファイルを指定できます。</p>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://blog.scheakur.com/post/90240750827/github\">GitHub PagesでJekyllを使う場合、cssファイルなどへのパスには<code class=\"language-plaintext highlighter-rouge\">{{site.github.url}}</code>を使うと良い</a>\n\n\n  </cite></footer>\n</blockquote>\n\n<p>ということなので、パスの指定に``を利用する。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>\n<span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n\n  <span class=\"nt\"><head></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"Content-type\"</span> <span class=\"na\">content=</span><span class=\"s\">\"text/html; charset=utf-8\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><title></span>{{ page.title }}<span class=\"nt\"></title></span>\n\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n    <span class=\"nt\"><link</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"{{site.github.url}}/css/style.css\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/jquery-3.1.1.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/bootstrap/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n\n  <span class=\"nt\"></head></span>\n  <span class=\"nt\"><body></span>\n    {{ content }}\n    <span class=\"nt\"><p></span> - rendered with layout template - <span class=\"nt\"></p></span>\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n    <span class=\"nt\"></button></span>\n\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n    <span class=\"nt\"></button></span>\n  <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h4 id=\"ヘッダ部分のモジュール化\">ヘッダ部分のモジュール化</h4>\n<p>なんとなく<code class=\"language-plaintext highlighter-rouge\"><head></head></code>部分を他でも流用しそうな気がしたのでモジュール化したいと思った。</p>\n\n<blockquote class=\"blockquote\">\n  \n<table>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">_includes</code></td>\n      <td>これらは部分的な再利用を容易にするために layouts ファイルと posts ファイルによって、<br />ミックス、マッチすることができます。 liquid のタグ <code class=\"language-plaintext highlighter-rouge\">{% include file.ext %}</code> は、<br />ファイルの <code class=\"language-plaintext highlighter-rouge\">_includes/file.ext</code> を含むために使用されます。</td>\n    </tr>\n  </tbody>\n</table>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<ul>\n  <li><a href=\"http://jekyllrb-ja.github.io/docs/structure/\">Jekyll - ディレクトリ構成</a>\n    <ul>\n      <li><a href=\"https://jekyllrb.com/docs/structure/\">Jekyll - Directory structure</a></li>\n    </ul>\n  </li>\n</ul>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_includes</strong> ディレクトリを作成して、中に <strong>defaulthtmlheader.html</strong> というファイルを作成する。</p>\n\n<p>内容は上記の<code class=\"language-plaintext highlighter-rouge\"><head></head></code>と同じ。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>  <span class=\"nt\"><head></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"Content-type\"</span> <span class=\"na\">content=</span><span class=\"s\">\"text/html; charset=utf-8\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><title></span>{{ page.title }}<span class=\"nt\"></title></span>\n\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n    <span class=\"nt\"><link</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"{{site.github.url}}/css/style.css\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/jquery-3.1.1.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/bootstrap/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n\n  <span class=\"nt\"></head></span>\n\n</code></pre></div></div>\n\n<p>伴って、 <strong>_layouts/default.html</strong> も変更する。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n  {% include defaulthtmlheader.html %}\n  <span class=\"nt\"><body></span>\n    {{ content }}\n    <span class=\"nt\"><p></span> - rendered with layout template - <span class=\"nt\"></p></span>\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n    <span class=\"nt\"></button></span>\n\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n    <span class=\"nt\"></button></span>\n  <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h4 id=\"テスト\">テスト</h4>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"examples\">Examples</h3>\n\n<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.\nCopy</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n<span class=\"nt\"></button></span>\n\n<span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n<span class=\"nt\"></button></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/components/\">Components</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>このソースコードを入れてボタンとアイコンがちゃんと設定されるか確認する。</p>\n\n<div class=\"row justify-content-md-center\">\n  <div class=\"col-md-11\">\n    <div class=\"card\">\n      <a href=\"https://leico.github.io/TechnicalNote/Jekyll/images/jekyll-bootstrap-install/ss.png\">\n        <img src=\"https://leico.github.io/TechnicalNote/Jekyll/images/jekyll-bootstrap-install/ss.png\" class=\"img-fluid rounded mx-auto d-block\" />\n      </a>\n      <div class=\"card-block\">\n        \n\n      </div>\n    </div>\n  </div>\n</div>\n\n",
  "output": "<!DOCTYPE html>\n<html lang=\"ja\">\n  <head>\n  <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \n  <meta name=\"keywords\" content=\"jekyll,ruby,rbenv,macOS,github,pages\">\n\n\n  <title>Github Pagesにbootstrap sassをインストールする</title>\n\n  <!-- bootstrap and jQuery include -->\n  <link rel=\"stylesheet\" href=\"https://leico.github.io/TechnicalNote/css/style.css\">\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\"></script>\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\"></script>\n  <!-- bootstrap and jQuery include -->\n\n  <!-- MathJax include -->\n  <script type=\"text/javascript\" src=\"https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\"></script>\n  <script type=\"text/x-mathjax-config\">\n    MathJax.Hub.Config({\n      \"HTML-CSS\": {\n        // デフォルトが [\"STIX\",\"TeX\"] なのを変更\n        // [] にしても良い\n          availableFonts: [\"TeX\"]\n        , undefinedFamily: \"'Raleway', Helvetica, Arial, sans-serif\"\n      }\n    });\n  </script>\n  <!-- Google Analytics -->\n  <script>\n    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n    \n    ga('create', 'UA-100782315-1', 'auto');\n    ga('send', 'pageview');\n  </script>\n\n  <!-- Atom feed -->\n  <link type=\"application/atom+xml\" rel=\"alternate\" href=\"https://leico.github.io/TechnicalNote/atom.xml\" title=\"TechnicalNote\" />\n</head>\n\n\n  <body>\n    <div class=\"container\">\n    <div class=\"row\">\n\n\n  <div class=\"col-md-8\">\n\n    <header class=\"page-header\">\n      <h1>Github Pagesにbootstrap sassをインストールする</h1>\n      <div class=\"row\">\n\n        <div class=\"col-6\">\n          <dl class=\"dl-horizontal\">\n            <dt>created</dt>\n            <dd>2017-01-20</dd>\n            <dt>last change</dt>\n            <dd>2017-06-15 22:39:38 +0000</dd>\n          </dl>\n        </div>\n\n        <div class=\"col-6 text-right\">\n          <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n        </div>\n\n      </div>\n    </header>\n\n    <div class=\"row\">\n\n      <div class=\"col-12\">\n        <h2 id=\"github-pagesを簡単にレスポンシブにしたい\">Github Pagesを簡単にレスポンシブにしたい</h2>\n\n<p>ので、<a href=\"http://getbootstrap.com/\">Bootstrap</a>を利用したい。</p>\n\n<p>レスポンシブの意味合いが変化しているように感じる。</p>\n\n<dl>\n  <dt>2000年初め</dt>\n  <dd>ウィンドウサイズを変更したときにサイズに応じて各要素が変化する。cssで幅、高さを<code class=\"language-plaintext highlighter-rouge\">%</code>指定などで実装</dd>\n  <dt>最近</dt>\n  <dd>魑魅魍魎の画面サイズに対応したレイアウトに変化する。</dd>\n</dl>\n\n<p>ということで、スマートフォンでも問題ないレイアウトでページが組みたい。</p>\n\n<h2 id=\"bootstrapのインストール\">Bootstrapのインストール</h2>\n\n<p>参考</p>\n\n<ul>\n  <li>jekyllへのbootstrapのインストール概略\n    <ul>\n      <li><a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a></li>\n      <li><a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a></li>\n    </ul>\n  </li>\n  <li>SASSについて、jekyllでのSASSコンパイルについて\n    <ul>\n      <li><a href=\"http://qiita.com/ritukiii/items/67b3c50002b48c6186d6\">CSSのメタ言語Sass(SCSS)、LESSの完全入門</a></li>\n      <li>\n<a href=\"http://jekyllrb-ja.github.io/docs/assets/\">Jekyll - Assets</a>\n        <ul>\n          <li><a href=\"https://jekyllrb.com/docs/assets/\">Jekyll - Assets</a></li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n  <li>Bootstrap sassについて\n    <ul>\n      <li><a href=\"http://qiita.com/tonkotsuboy_com/items/1855734522bfe7ef7dad\">Bootstrap 4を使うならSassを使って3倍幸せになろう</a></li>\n      <li><a href=\"http://qiita.com/masamitsu-konya/items/e3630046774ac1fbd346\">全部はいらないよね？bootstrap-sassをカスタマイズして使う方法</a></li>\n    </ul>\n  </li>\n  <li>BootstrapとjQueryとか\n    <ul>\n      <li><a href=\"http://itstudio.co/2015/04/06/3816/\">Bootstrapの使い方（１）〜準備</a></li>\n      <li><a href=\"http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/\">Bootstrap 3.3.7 released</a></li>\n      <li><a href=\"http://code-examples-ja.hateblo.jp/entry/2014/07/28/Bootstrap%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%80%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BjQuery%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%A9\">Bootstrapをはじめる。対応しているjQueryのバージョンなど。</a></li>\n    </ul>\n  </li>\n  <li>Bootstrapインストール確認、インストール後Tips\n    <ul>\n      <li><a href=\"http://blog.scheakur.com/post/90240750827/github\">GitHub PagesでJekyllを使う場合、cssファイルなどへのパスには<code class=\"language-plaintext highlighter-rouge\">https://leico.github.io/TechnicalNote</code>を使うと良い</a></li>\n      <li><a href=\"http://getbootstrap.com/components/\">Components</a></li>\n    </ul>\n  </li>\n</ul>\n\n<h3 id=\"bootstrapのダウンロード\">Bootstrapのダウンロード</h3>\n\n<blockquote class=\"blockquote\">\n  \n<h2 id=\"get-twitter-bottstrap-sass-files\">Get Twitter Bottstrap Sass files</h2>\n\n<ul>\n  <li>Download zip archive from <a href=\"https://github.com/twbs/bootstrap-sass/releases\">release page</a>.</li>\n</ul>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<p>Download the latest version of <a href=\"https://github.com/twbs/bootstrap-sass\">bootstrap-sass</a>. Extract it to a temporary folder.</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>ということで、bootstrap-sassをダウンロードしてくる。\nbootstrap-sassのダウンロード先だが、本家WebサイトのDownloadにした。</p>\n\n<p>Getting startedの</p>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"sass\">Sass</h3>\n\n<p><a href=\"https://github.com/twbs/bootstrap-sass\">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>\n\n<p><a href=\"https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz\">Download Sass</a></p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/getting-started/#download\">Bootstrap - Getting started</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>からダウンロードする。</p>\n\n<p>ダウンロードしたらテキトーなディレクトリに展開する。</p>\n\n<h3 id=\"jqueryのダウンロード\">jQueryのダウンロード</h3>\n\n<p>jQueryのサイトから圧縮版をダウンロードする。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p><a href=\"https://code.jquery.com/jquery-3.1.1.min.js\">Download the compressed, production jQuery 3.1.1</a></p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://jquery.com/download/\">Download jQuery | jQuery</a>\n\n  </cite></footer>\n</blockquote>\n\n<h3 id=\"bootstrapのインストール-1\">Bootstrapのインストール</h3>\n\n<p>展開したファイルを適切なディレクトリに移動させて、jekyllの設定を変更する。</p>\n\n<p>行数が多いのでセクション毎にわけている。</p>\n\n<h4 id=\"_configyml-を変更する\">\n<strong>_config.yml</strong> を変更する</h4>\n\n<p>まずはjekyllの設定を行う。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p>Add the following line to your _config.yml file:</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>sass:\n    sass_dir: _sass\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_config.yml</strong> にsassが配置されるディレクトリを指定する。\n引用の通り、 <strong>_sass</strong> ディレクトリに配置することにする。</p>\n\n<h4 id=\"_sass-ディレクトリの作成\">\n<strong>_sass</strong> ディレクトリの作成</h4>\n\n<blockquote class=\"blockquote\">\n  \n<p>Create a SASS import directory. This is the folder that jekyll will tell SASS to use when you <a href=\"https://github.com/import\" class=\"user-mention\">@import</a> things.</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nv\">$ </span><span class=\"nb\">cd </span>my_jekyll_blog\n<span class=\"nv\">$ $ </span><span class=\"nb\">mkdir </span>_sass\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_config.yml</strong> に設定した通り、<strong>_sass</strong> ディレクトリをjekyllプロジェクトページに作成する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>_sass\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのsassファイルインストール\">Bootstrapのsassファイルインストール</h4>\n\n<blockquote class=\"blockquote\">\n  \n<p>Download the latest version of <a href=\"https://github.com/twbs/bootstrap-sass\">bootstrap-sass</a>.\nExtract it to a temporary folder.\nThen copy the <code class=\"language-plaintext highlighter-rouge\">assets/stylesheets/bootstrap.scss</code> file and \n<code class=\"language-plaintext highlighter-rouge\">assets/stylesheets/bootstrap/</code>\nfolder to your blog SASS import directory. (<code class=\"language-plaintext highlighter-rouge\">\\_sass</code>).</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"https://kvurd.com/blog/my-jekyll-blog-setup-bootstrap-sass-pygments/\">My Jekyll Blog Setup with Bootstrap, SASS and Pygments</a>\n\n  </cite></footer>\n</blockquote>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"get-twitter-bottstrap-sass-files\">Get Twitter Bottstrap Sass files</h3>\n\n<ul>\n  <li>Download zip archive from <a href=\"https://github.com/twbs/bootstrap-sass/releases\">release page</a>.</li>\n  <li>Unzip the <code class=\"language-plaintext highlighter-rouge\">assets</code> folder at the root of your site.</li>\n</ul>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://jekyll.pygmeeweb.com/2014/08/02/jekyll-with-twitter-bootstrap-sass/\">Jekyll with Twitter Bootstrap Sass</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>片方は <strong>_sass</strong> 直下、片方は <strong>assets</strong> を丸ごとコピーしており、それぞれ <strong>_config.yml</strong> の記述方法も違う。</p>\n\n<p><strong>_sass</strong> 直下も <strong>assets/stylesheets</strong> をsass用ディレクトリにするのも違う気がするので、\nBootstrapを展開したディレクトリの <strong>assets/stylesheets</strong> ディレクトリを <strong>_sass/bootstrap</strong> としてコピーする\nという方法にした。後から <strong>javascripts</strong> 、 <strong>fonts</strong> ディレクトリも別の場所に配置する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">cp</span> <span class=\"nt\">-r</span> ../bootstrap-sass/assets/stylesheets _sass/bootstrap\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのjavascriptファイルインストール\">Bootstrapのjavascriptファイルインストール</h4>\n\n<p>次はjavascriptsを移動させる。これらは <strong>js/bootstrap</strong> ディレクトリに配置する。\nビルドされる必要はないが、出力されるWebサイトデータにコピーされていなければならないので、\n<strong>_sass</strong> 等に配置はできない。</p>\n\n<p>後ほど <strong>js</strong> ディレクトリにはjQueryもインストールする。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>js\n<span class=\"nb\">cp</span> ../bootstrap-sass/assets/javascripts js/bootstrap\n</code></pre></div></div>\n\n<h4 id=\"bootstrapのfontファイルインストール\">Bootstrapのfontファイルインストール</h4>\n\n<p>フォントは <strong>fonts</strong> に移動させる。bootstrapのフォント以外を利用する予定がないため。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>fonts\n<span class=\"nb\">cp</span> ../bootstrap-sass/assets/fonts <span class=\"nb\">.</span>\n</code></pre></div></div>\n\n<h4 id=\"自前のsassファイル作成\">自前のsassファイル作成</h4>\n\n<p>ここまできたらbootstrap sassを自作のsassファイルで <code class=\"language-plaintext highlighter-rouge\">@import</code> する。\nひとまず、自前の大域的に利用するスタイルシートで利用するので、\n<strong>css/style.sass</strong> ファイルを作成して利用する。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">mkdir </span>css <span class=\"o\">&&</span> <span class=\"nb\">cd </span>css\n<span class=\"nb\">touch </span>style.sass\n</code></pre></div></div>\n\n<blockquote class=\"blockquote\">\n  \n<p>Jekyll は Sass と CoffeeScript の組み込みをサポートしています。\nそれらを使うためには、適切な拡張子名のファイルを作成( <code class=\"language-plaintext highlighter-rouge\">.sass</code>, <code class=\"language-plaintext highlighter-rouge\">.scss</code> や <code class=\"language-plaintext highlighter-rouge\">.coffee</code> の一つ) し、\nファイルを2行の3ダッシュで開始します、このように:</p>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">---</span>\n<span class=\"nt\">---</span>\n\n<span class=\"o\">//</span> <span class=\"err\">コンテンツのはじまり</span>\n<span class=\"nc\">.my-definition</span>\n  <span class=\"nt\">font-size</span><span class=\"o\">:</span> <span class=\"nt\">1</span><span class=\"nc\">.2em</span>\n</code></pre></div></div>\n\n<p>Jekyll はこれらのファイルを通常ページと同一に扱われ、 その中で出力ファイルはもとファイルと同一ディレクトリに配置されます。 \n例えば、あなたが <code class=\"language-plaintext highlighter-rouge\">/css/styles.scss</code> という名前のファイルを\nサイトのソースフォルダに持っていた場合、 Jekyll はそれを処理し、そしてサイトの指定フォルダの下に <code class=\"language-plaintext highlighter-rouge\">/css/styles.css</code> を配置します。</p>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<ul>\n  <li>\n<a href=\"http://jekyllrb-ja.github.io/docs/assets/\">Jekyll - Assets</a>\n    <ul>\n      <li><a href=\"https://jekyllrb.com/docs/assets/\">Jekyll - Assets</a></li>\n    </ul>\n  </li>\n</ul>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>style.sass</strong> ファイルの中身は以下</p>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">---</span>\n<span class=\"nt\">---</span>\n\n<span class=\"k\">@import</span> <span class=\"s1\">\"bootstrap/_bootstrap\"</span>\n</code></pre></div></div>\n\n<h4 id=\"jqueryのインストール\">jQueryのインストール</h4>\n\n<p>jQueryを <strong>js</strong> ディレクトリにインストールする。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nb\">cp</span> ../jquery-3.1.1.min.js js/.\n</code></pre></div></div>\n\n<h4 id=\"ディレクトリ構成まとめ\">ディレクトリ構成まとめ</h4>\n\n<p>参考</p>\n\n<ul>\n  <li><a href=\"http://qiita.com/yone098@github/items/bba8a42de6b06e40983b\">tree コマンドが無い環境で tree コマンドを実現</a></li>\n</ul>\n\n<p>ここまでのディレクトリ構成を図解</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>\ngithub-pages/\n|--.DS_Store\n|--.bundle\n|--.gitignore\n|--.ruby-version\n|--Gemfile\n|--Gemfile.lock\n|--_config.yml\n|--_layouts\n|  |--default.html\n|--_posts\n|--_sass\n|  |--bootstrap\n|  |  |--.DS_Store\n|  |  |--_bootstrap-compass.scss\n|  |  |--_bootstrap-mincer.scss\n|  |  |--_bootstrap-sprockets.scss\n|  |  |--_bootstrap.scss\n|  |  |--bootstrap\n|  |  |  |--.DS_Store\n|  |  |  |--_alerts.scss\n|  |  |  |--_badges.scss\n|  |  |  |--_breadcrumbs.scss\n|  |  |  |--_button-groups.scss\n|  |  |  |--_buttons.scss\n|  |  |  |--_carousel.scss\n|  |  |  |--_close.scss\n|  |  |  |--_code.scss\n|  |  |  |--_component-animations.scss\n|  |  |  |--_dropdowns.scss\n|  |  |  |--_forms.scss\n|  |  |  |--_glyphicons.scss\n|  |  |  |--_grid.scss\n|  |  |  |--_input-groups.scss\n|  |  |  |--_jumbotron.scss\n|  |  |  |--_labels.scss\n|  |  |  |--_list-group.scss\n|  |  |  |--_media.scss\n|  |  |  |--_mixins.scss\n|  |  |  |--_modals.scss\n|  |  |  |--_navbar.scss\n|  |  |  |--_navs.scss\n|  |  |  |--_normalize.scss\n|  |  |  |--_pager.scss\n|  |  |  |--_pagination.scss\n|  |  |  |--_panels.scss\n|  |  |  |--_popovers.scss\n|  |  |  |--_print.scss\n|  |  |  |--_progress-bars.scss\n|  |  |  |--_responsive-embed.scss\n|  |  |  |--_responsive-utilities.scss\n|  |  |  |--_scaffolding.scss\n|  |  |  |--_tables.scss\n|  |  |  |--_theme.scss\n|  |  |  |--_thumbnails.scss\n|  |  |  |--_tooltip.scss\n|  |  |  |--_type.scss\n|  |  |  |--_utilities.scss\n|  |  |  |--_variables.scss\n|  |  |  |--_wells.scss\n|  |  |  |--mixins\n|  |  |  |  |--_alerts.scss\n|  |  |  |  |--_background-variant.scss\n|  |  |  |  |--_border-radius.scss\n|  |  |  |  |--_buttons.scss\n|  |  |  |  |--_center-block.scss\n|  |  |  |  |--_clearfix.scss\n|  |  |  |  |--_forms.scss\n|  |  |  |  |--_gradients.scss\n|  |  |  |  |--_grid-framework.scss\n|  |  |  |  |--_grid.scss\n|  |  |  |  |--_hide-text.scss\n|  |  |  |  |--_image.scss\n|  |  |  |  |--_labels.scss\n|  |  |  |  |--_list-group.scss\n|  |  |  |  |--_nav-divider.scss\n|  |  |  |  |--_nav-vertical-align.scss\n|  |  |  |  |--_opacity.scss\n|  |  |  |  |--_pagination.scss\n|  |  |  |  |--_panels.scss\n|  |  |  |  |--_progress-bar.scss\n|  |  |  |  |--_reset-filter.scss\n|  |  |  |  |--_reset-text.scss\n|  |  |  |  |--_resize.scss\n|  |  |  |  |--_responsive-visibility.scss\n|  |  |  |  |--_size.scss\n|  |  |  |  |--_tab-focus.scss\n|  |  |  |  |--_table-row.scss\n|  |  |  |  |--_text-emphasis.scss\n|  |  |  |  |--_text-overflow.scss\n|  |  |  |  |--_vendor-prefixes.scss\n|--_site\n|--css\n|  |--style.sass\n|--fonts\n|  |--bootstrap\n|  |  |--glyphicons-halflings-regular.eot\n|  |  |--glyphicons-halflings-regular.svg\n|  |  |--glyphicons-halflings-regular.ttf\n|  |  |--glyphicons-halflings-regular.woff\n|  |  |--glyphicons-halflings-regular.woff2\n|--index.md\n|--js\n|  |--bootstrap\n|  |  |--.DS_Store\n|  |  |--bootstrap\n|  |  |--bootstrap-sprockets.js\n|  |  |--bootstrap.js\n|  |  |--bootstrap.min.js\n|  |  |  |--affix.js\n|  |  |  |--alert.js\n|  |  |  |--button.js\n|  |  |  |--carousel.js\n|  |  |  |--collapse.js\n|  |  |  |--dropdown.js\n|  |  |  |--modal.js\n|  |  |  |--popover.js\n|  |  |  |--scrollspy.js\n|  |  |  |--tab.js\n|  |  |  |--tooltip.js\n|  |  |  |--transition.js\n|  |--jquery-3.1.1.min.js\n|--vendor\n</code></pre></div></div>\n\n<h4 id=\"レイアウトデータでの読み込み\">レイアウトデータでの読み込み</h4>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"テンプレート\">テンプレート</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n<span class=\"nt\"><head></span>\n  <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"X-UA-Compatible\"</span> <span class=\"na\">content=</span><span class=\"s\">\"IE=edge\"</span> <span class=\"na\">charset=</span><span class=\"s\">\"utf-8\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1.0\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><link</span> <span class=\"na\">href=</span><span class=\"s\">\"css/bootstrap.min.css\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span><span class=\"nt\">></span>\n  <span class=\"c\"><!--[if lt IE 9]>\n    <script src=\"js/html5shiv.js\"></script>\n    <script src=\"js/respond.min.js\"></script>\n  <![endif]--></span>\n  <span class=\"nt\"><script </span><span class=\"na\">src=</span><span class=\"s\">\"js/jquery.min.js\"</span><span class=\"nt\">></script></span>\n  <span class=\"nt\"><script </span><span class=\"na\">src=</span><span class=\"s\">\"js/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n<span class=\"nt\"></head></span>\n<span class=\"nt\"><body></span>\n\n\n<span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://code-examples-ja.hateblo.jp/entry/2014/07/28/Bootstrap%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%80%82%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8BjQuery%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%A9\">Bootstrapをはじめる。対応しているjQueryのバージョンなど。</a>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_layouts/default.html</strong> でjQueryとbootstrapを呼び出す。\n引用元と少し変える部分は、bootstrapのcssを直接呼び出すのではなく、 <strong>css/style.css</strong> を呼び出すのと、\n各々配置されているディレクトリ名が変わっていること。 <strong>css/style.css</strong> は <strong>css/style.sass</strong> がビルドされて出力されたもの。</p>\n\n<blockquote class=\"blockquote\">\n  \n<p>では、どうすればいいのでしょうか。 正解は GitHub Pages だけで有効になるsite変数を使うことです。\n以下のページに記載されていますが、GitHub Pages上ではさまざまなメタデータをsite変数として利用可能です。</p>\n\n<div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>https://help.github.com/articles/repository-metadata-on-github-pages\n</code></pre></div></div>\n\n<p>cssファイルなどへのパスに利用したい場合は site.github.url を使うと良いでしょう。つまり、以下のように記述するわけです。</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><link rel=\"stylesheet\" href=\"{{site.github.url}}/css/style.css\" charset=\"utf-8\">\n</code></pre></div></div>\n\n<p>このように記述しておくと、GitHub Pages上では以下のように展開され、正しくファイルを指定できます。</p>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://blog.scheakur.com/post/90240750827/github\">GitHub PagesでJekyllを使う場合、cssファイルなどへのパスには<code class=\"language-plaintext highlighter-rouge\">{{site.github.url}}</code>を使うと良い</a>\n\n\n  </cite></footer>\n</blockquote>\n\n<p>ということなので、パスの指定に``を利用する。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>\n<span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n\n  <span class=\"nt\"><head></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"Content-type\"</span> <span class=\"na\">content=</span><span class=\"s\">\"text/html; charset=utf-8\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><title></span>{{ page.title }}<span class=\"nt\"></title></span>\n\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n    <span class=\"nt\"><link</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"{{site.github.url}}/css/style.css\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/jquery-3.1.1.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/bootstrap/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n\n  <span class=\"nt\"></head></span>\n  <span class=\"nt\"><body></span>\n    {{ content }}\n    <span class=\"nt\"><p></span> - rendered with layout template - <span class=\"nt\"></p></span>\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n    <span class=\"nt\"></button></span>\n\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n    <span class=\"nt\"></button></span>\n  <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h4 id=\"ヘッダ部分のモジュール化\">ヘッダ部分のモジュール化</h4>\n<p>なんとなく<code class=\"language-plaintext highlighter-rouge\"><head></head></code>部分を他でも流用しそうな気がしたのでモジュール化したいと思った。</p>\n\n<blockquote class=\"blockquote\">\n  \n<table>\n  <tbody>\n    <tr>\n      <td><code class=\"language-plaintext highlighter-rouge\">_includes</code></td>\n      <td>これらは部分的な再利用を容易にするために layouts ファイルと posts ファイルによって、<br>ミックス、マッチすることができます。 liquid のタグ <code class=\"language-plaintext highlighter-rouge\">{% include file.ext %}</code> は、<br>ファイルの <code class=\"language-plaintext highlighter-rouge\">_includes/file.ext</code> を含むために使用されます。</td>\n    </tr>\n  </tbody>\n</table>\n\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<ul>\n  <li>\n<a href=\"http://jekyllrb-ja.github.io/docs/structure/\">Jekyll - ディレクトリ構成</a>\n    <ul>\n      <li><a href=\"https://jekyllrb.com/docs/structure/\">Jekyll - Directory structure</a></li>\n    </ul>\n  </li>\n</ul>\n\n  </cite></footer>\n</blockquote>\n\n<p><strong>_includes</strong> ディレクトリを作成して、中に <strong>defaulthtmlheader.html</strong> というファイルを作成する。</p>\n\n<p>内容は上記の<code class=\"language-plaintext highlighter-rouge\"><head></head></code>と同じ。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>  <span class=\"nt\"><head></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">http-equiv=</span><span class=\"s\">\"Content-type\"</span> <span class=\"na\">content=</span><span class=\"s\">\"text/html; charset=utf-8\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><meta</span> <span class=\"na\">name=</span><span class=\"s\">\"viewport\"</span> <span class=\"na\">content=</span><span class=\"s\">\"width=device-width, initial-scale=1\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><title></span>{{ page.title }}<span class=\"nt\"></title></span>\n\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n    <span class=\"nt\"><link</span> <span class=\"na\">rel=</span><span class=\"s\">\"stylesheet\"</span> <span class=\"na\">href=</span><span class=\"s\">\"{{site.github.url}}/css/style.css\"</span><span class=\"nt\">></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/jquery-3.1.1.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span> <span class=\"na\">src=</span><span class=\"s\">\"{{site.github.url}}/js/bootstrap/bootstrap.min.js\"</span><span class=\"nt\">></script></span>\n    <span class=\"c\"><!-- bootstrap and jQuery include --></span>\n\n  <span class=\"nt\"></head></span>\n\n</code></pre></div></div>\n\n<p>伴って、 <strong>_layouts/default.html</strong> も変更する。</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"nt\"><html</span> <span class=\"na\">lang=</span><span class=\"s\">\"ja\"</span><span class=\"nt\">></span>\n  {% include defaulthtmlheader.html %}\n  <span class=\"nt\"><body></span>\n    {{ content }}\n    <span class=\"nt\"><p></span> - rendered with layout template - <span class=\"nt\"></p></span>\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n    <span class=\"nt\"></button></span>\n\n    <span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n      <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n    <span class=\"nt\"></button></span>\n  <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h4 id=\"テスト\">テスト</h4>\n\n<blockquote class=\"blockquote\">\n  \n<h3 id=\"examples\">Examples</h3>\n\n<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.\nCopy</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Left Align\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-align-left\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span>\n<span class=\"nt\"></button></span>\n\n<span class=\"nt\"><button</span> <span class=\"na\">type=</span><span class=\"s\">\"button\"</span> <span class=\"na\">class=</span><span class=\"s\">\"btn btn-default btn-lg\"</span><span class=\"nt\">></span>\n  <span class=\"nt\"><span</span> <span class=\"na\">class=</span><span class=\"s\">\"glyphicon glyphicon-star\"</span> <span class=\"na\">aria-hidden=</span><span class=\"s\">\"true\"</span><span class=\"nt\">></span></span> Star\n<span class=\"nt\"></button></span>\n</code></pre></div></div>\n\n  <footer class=\"blockquote-footer\"><cite>\n  \n<a href=\"http://getbootstrap.com/components/\">Components</a>\n\n  </cite></footer>\n</blockquote>\n\n<p>このソースコードを入れてボタンとアイコンがちゃんと設定されるか確認する。</p>\n\n<div class=\"row justify-content-md-center\">\n  <div class=\"col-md-11\">\n    <div class=\"card\">\n      <a href=\"https://leico.github.io/TechnicalNote/Jekyll/images/jekyll-bootstrap-install/ss.png\">\n        <img src=\"https://leico.github.io/TechnicalNote/Jekyll/images/jekyll-bootstrap-install/ss.png\" class=\"img-fluid rounded mx-auto d-block\">\n      </a>\n      <div class=\"card-block\">\n        \n\n      </div>\n    </div>\n  </div>\n</div>\n\n\n      </div>\n\n      <div class=\"col-12\">\n        <hr>\n        <a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>\n        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n      </div>\n\n    </div>\n\n  </div>\n  \n    <div class=\"col-md-4\">\n      <h2>\n        <a href=\"https://leico.github.io/TechnicalNote/\">\n          Technical Note\n        </a>\n      </h2>\n\n      \n\n      \n\n      <h3>\n        <a href=\"https://leico.github.io/TechnicalNote/Jekyll\">github pages & Jekyll Top</a>\n      </h3>\n\n      \n        <h3>github pagesの管理</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/dlopen-openssl1.0.0\">bundle update で dlopen が OpenSSL でエラー</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/update-github-page\">github-pages環境のアップデート</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/fix-3.4.3\">github-pages jekyll 3.4.3不具合の対処法</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Jekyllの導入</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-homebrew\">rbenvをHomebrewからインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/Ruby-research\">Ruby開発環境についての調査</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-install\">rbenvをアプリケーションフォルダにインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/rbenv-usage\">rbenvコマンドの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/bundle-usage\">bundlerの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-usage\">jekyllの利用方法</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-debug\">Github Pagesのデバッグ環境を整える</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/github-pages-generator\">Github Pages Gemを、複数のプロジェクトからエイリアスで参照する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/worth-bundle-install\">gemを間違えてグローバルにインストールしてしまった場合</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Install frameworks</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\">Github Pagesにsubmoduleとしてbootstrapを入れる</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/mathjax-install\">MathJaxをインストールする</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\">Github Pagesにbootstrap sassをインストールする</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Jekyll variables</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/collection-variable\">Collection変数を調査する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/site-variables\">site変数の内容調査</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/display-value\">変数の中身をページに表示する</a>\n          </li>\n\n        \n        </ul>\n      \n        <h3>Tips</h3>\n        <ul>\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-syntaxhighlight\">Jekyllのシンタックスハイライトのテーマを作って変更する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/cite-include\">Jekyll & Bootstrapで引用の書きかた</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/jekyll-atom\">Collectiosの変更に追従するAtomフィードを設置する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/liquid-raw\">liquidのソースコードを表示する</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/page-menu\">ページメニューの作り方</a>\n          </li>\n\n        \n\n          \n\n          \n          \n\n          <li>\n            <a href=\"https://leico.github.io/TechnicalNote/Jekyll/post-layout\">Jekyll:postsのレイアウトについて考える</a>\n          </li>\n\n        \n        </ul>\n      \n    </div>\n  \n\n</div>\n\n    </div>\n    <footer class=\"container\">\n  <hr>\n  <div class=\"row\">\n    <div class=\"col\">\n      <p class=\"text-right\">\n      <a href=\"https://leico.github.io/TechnicalNote/atom.xml\">Atom</a>\n      </p>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <div class=\"col-md-4\">\n          <figure class=\"figure\">\n            <img src=\"https://leico.github.io/TechnicalNote/image/logo.png\" class=\"figure-img rounded\" width=\"200px\" height=\"auto\" alt=\"\">\n          </figure>\n        </div>\n        <div class=\"col-md-4\">\n          <h5>contact</h5>\n          <ul class=\"list-unstyled\">\n            <li> <a href=\"https://github.com/leico\" class=\"user-mention\">@leico</a> </li>\n            <li> <a href=\"https://www.twitter.com/1_0101\">twitter</a>\n</li>\n            <li> <a href=\"https://leico.github.io\">web</a> </li>\n            <li> oishi[at]signalcompose.com </li>\n          </ul>\n          何かありましたらお気軽に。調査、開発などのご依頼も承ります。\n        </div>\n        <div class=\"col-md-4\">\n          <dl>\n            <dt>Technical Note Vol.1 2 3</dt>\n            <dd>Max for Live の項目が本になりました。</dd>\n            <dd><a href=\"https://signalcompose.booth.pm/items/1575989\">Booth</a></dd>\n            <dd><a href=\"https://signalcompose.stores.jp/items/5e9d0a6f515762579be0b8a9\">Stores</a></dd>\n          </dl>\n        </div>\n      </div>\n    </div>\n    <div class=\"col-md-4\">\n      <h5>Merchandise/Schwags</h5>\n      <p><small class=\"text-muted\">支援してくれるとうれしい</small></p>\n      <iframe frameborder=\"0\" height=\"220\" width=\"160\" src=\"https://leico.official.ec/items/6694858/widget/small\"></iframe>\n    </div>\n  </div>\n  <p class=\"text-right\">\n    <small class=\"text-muted\">© 2020 leico.</small>\n  </p>\n\n</footer>\n\n  </body>\n</html>\n",
  "previous": {
    "collection": "docs",
    "path": "_docs/Jekyll/worth-bundle-install.md",
    "id": "/Jekyll/worth-bundle-install",
    "url": "/Jekyll/worth-bundle-install",
    "relative_path": "_docs/Jekyll/worth-bundle-install.md",
    "draft": false,
    "categories": [

    ],
    "layout": "post",
    "title": "gemを間違えてグローバルにインストールしてしまった場合",
    "date": "2017-01-18 00:00:00 +0900",
    "lastchange": "2017-06-16 23:18:05 +0000",
    "tags": [
      "jekyll",
      "ruby",
      "rbenv",
      "macOS",
      "github",
      "pages"
    ],
    "slug": "worth-bundle-install",
    "ext": ".md"
  },
  "excerpt": "<h2 id=\"github-pagesを簡単にレスポンシブにしたい\">Github Pagesを簡単にレスポンシブにしたい</h2>\n\n",
  "url": "/Jekyll/jekyll-bootstrap-install",
  "relative_path": "_docs/Jekyll/jekyll-bootstrap-install.md",
  "draft": false,
  "categories": [

  ],
  "layout": "post",
  "title": "Github Pagesにbootstrap sassをインストールする",
  "date": "2017-01-20 00:00:00 +0900",
  "lastchange": "2017-06-15 22:39:38 +0000",
  "tags": [
    "jekyll",
    "ruby",
    "rbenv",
    "macOS",
    "github",
    "pages"
  ],
  "slug": "jekyll-bootstrap-install",
  "ext": ".md"
},
"excerpt": "<h2 id=\"さすがにみづらい\">さすがにみづらい</h2>\n\n",
"url": "/Jekyll/post-layout",
"relative_path": "_docs/Jekyll/post-layout.md",
"draft": false,
"categories": [

],
"layout": "post",
"title": "Jekyll:postsのレイアウトについて考える",
"date": "2017-02-03 00:00:00 +0900",
"lastchange": "2017-06-16 23:05:15 +0000",
"tags": [
  "bootstrap",
  "jekyll"
],
"slug": "post-layout",
"ext": ".md"   },   "excerpt": "<h2 id=\"変数に何が入っているか調べたい\">変数に何が入っているか調べたい</h2>\n\n",   "url": "/Jekyll/display-value",   "relative_path": "_docs/Jekyll/display-value.md",   "draft": false,   "categories": [