変数に何が入っているか調べたい

参考

Jekyllでは生成されたサイトに対する情報は、グローバル変数siteを通してアクセスできます。 siteがどんな情報を持っているか、ちょっと見てみます。index.mdに戻って、次の一行を追加します。

---
layout: default
title: Oh! My JK
---
#Welcome to my JK Home Page!

{{ site }}  <!-- ここを追加 -->

これが動かなかったので、変数をDumpする方法を調べた

inspectフィルタ

Inspect
Convert an object into its String representation for debugging.
{{ some_var | inspect }}

とのことで、inspectフィルタで表示されるらしい。

{{ page | inspect }}

実行してみる

{ "next": { "next": { "next": { "path": "_docs/Jekyll/page-menu.md", "url": "/Jekyll/page-menu", "id": "/Jekyll/page-menu", "relative_path": "_docs/Jekyll/page-menu.md", "collection": "docs", "draft": false, "categories": [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;ページメニューの作り方&quot;,
    &quot;date&quot;: &quot;2017-03-04 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-16 22:55:31 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;page-menu&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/site-variables.md&quot;,
  &quot;url&quot;: &quot;/Jekyll/site-variables&quot;,
  &quot;content&quot;: &quot;## `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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nということなので、**\\_post** 以下のものが日付が新しい順に表示されるはずだ。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for post in site.posts %}\n  &lt;li&gt;\n    {{post.date | date: \&quot;%F\&quot; }}:&lt;a href=\&quot;{{site.github.url}}{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;\n  &lt;/li&gt;\n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\nこれを実行してみる。\n\n&gt; \n&gt; &lt;ul&gt;\n&gt;   {% for post in site.posts %}\n&gt;   &lt;li&gt;\n&gt;     {{post.date | date: \&quot;%F\&quot; }}:&lt;a href=\&quot;{{site.github.url}}{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;\n&gt;   &lt;/li&gt;\n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\n&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n全てのページが出力されるらしい。先程と同じようなコードを実行してみる。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for page in site.pages %}\n  &lt;li&gt;\n    {{ page.url }}\n  &lt;/li&gt;\n  \n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; &lt;ul&gt;\n&gt;   {% for page in site.pages %}\n&gt;   &lt;li&gt;\n&gt;     {{ page.url }}\n&gt;   &lt;/li&gt;\n&gt;   \n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\nどうやら同じような考えだったらしく、**html** だけ格納されている変数があった。\n\n{% raw %}\n```liquid\n&lt;ul&gt;\n  {% for page in site.html_pages %}\n  &lt;li&gt;\n    {{page.date | date: \&quot;%F\&quot;}}:&lt;a href=\&quot;{{site.github.url}}{{ page.url }}\&quot;&gt;{{ page.title }}&lt;/a&gt;\n  &lt;/li&gt;\n  {% endfor %}\n&lt;/ul&gt;\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; &lt;ul&gt;\n&gt;   {% for page in site.html_pages %}\n&gt;   &lt;li&gt;\n&gt;     {{page.date | date: \&quot;%F\&quot;}}:&lt;a href=\&quot;{{site.github.url}}{{ page.url }}\&quot;&gt;{{ page.title }}&lt;/a&gt;\n&gt;   &lt;/li&gt;\n&gt;   {% endfor %}\n&gt; &lt;/ul&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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&lt;article&gt;\n  &lt;h1 id=\&quot;tag_{{ tag[0] }}\&quot;&gt;{{ tag[0] }}&lt;/h1&gt;\n  &lt;ul&gt;\n    {% for post in tag[1] %}\n    &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n&lt;/article&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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&lt;article&gt;\n  &lt;h3&gt;{{ tag[0] }}&lt;/h3&gt;\n  &lt;ul&gt;\n    {% for post in tag[1] %}\n    &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n    {% endfor %}\n  &lt;/ul&gt;\n&lt;/article&gt;\n{% endfor %}\n```\n{% endraw %}\n\n実行してみる。\n\n&gt; {% for tag in site.tags %}\n&gt; &lt;article&gt;\n&gt;   &lt;h3&gt;{{ tag[0] }}&lt;/h3&gt;\n&gt;   &lt;ul&gt;\n&gt;     {% for post in tag[1] %}\n&gt;     &lt;li&gt;&lt;a href=\&quot;{{ post.url }}\&quot;&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;\n&gt;     {% endfor %}\n&gt;   &lt;/ul&gt;\n&gt; &lt;/article&gt;\n&gt; {% endfor %}\n\n**{{ page.lastchange }} 現在、固定ページのタグは取得できない** ことがわかった。\n\n&quot;,
  &quot;output&quot;: null,
  &quot;id&quot;: &quot;/Jekyll/site-variables&quot;,
  &quot;previous&quot;: {
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

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

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;site変数の内容調査&quot;,
  &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-16 23:13:15 +0000&quot;,
  &quot;tags&quot;: [
    &quot;jekyll&quot;,
    &quot;liquid&quot;,
    &quot;github&quot;,
    &quot;pages&quot;
  ],
  &quot;slug&quot;: &quot;site-variables&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
&quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
&quot;content&quot;: &quot;## 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{{ \&quot;{% raw \&quot; }} %}\n{% raw %}\n{% this %}\n{% endraw %}\n{{ \&quot;{% endraw \&quot; }} %}\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\n{% include cite.html text=text source=source %}\n\n\n\n\n\nということで`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`で挟んだ間は展開されない。\n\n## `{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`をエスケープする\n\nだがしかし、`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`を表示させることはこれではできない。\nそこで、上記の文はこのようになっている。\n\n{% raw %}\n```liquid\nということで`{{ \&quot;{% raw \&quot;}} %}`と`{{ \&quot;{% endraw \&quot; }} %}`で挟んだ間は展開されない。\n```\n{% endraw  %}\n&quot;,
&quot;output&quot;: null,
&quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
&quot;previous&quot;: {
  &quot;next&quot;: {
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
    &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;liquid-raw&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;url&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;content&quot;: &quot;## 変数に何が入っているか調べたい\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 }}  &lt;!-- ここを追加 --&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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&gt; {{ page | inspect }}\n&quot;,
  &quot;output&quot;: null,
  &quot;id&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;previous&quot;: {
    &quot;path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;url&quot;: &quot;/Bootstrap/index&quot;,
    &quot;id&quot;: &quot;/Bootstrap/index&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;category-index&quot;,
    &quot;title&quot;: &quot;Cpp&quot;,
    &quot;slug&quot;: &quot;index&quot;,
    &quot;ext&quot;: &quot;.html&quot;,
    &quot;tags&quot;: [

    ]
  },
  &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;変数に何が入っているか調べたい\&quot;&gt;変数に何が入っているか調べたい&lt;/h2&gt;\n\n&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

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

],
&quot;layout&quot;: &quot;post&quot;,
&quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
&quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
&quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
&quot;tags&quot;: [
  &quot;jekyll&quot;,
  &quot;liquid&quot;,
  &quot;github&quot;,
  &quot;pages&quot;
],
&quot;slug&quot;: &quot;liquid-raw&quot;,
&quot;ext&quot;: &quot;.md&quot;   },   &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,   &quot;url&quot;: &quot;/Jekyll/display-value&quot;,   &quot;content&quot;: &quot;## 変数に何が入っているか調べたい\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 }}  &lt;!-- ここを追加 --&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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&gt; {{ page | inspect }}\n&quot;,   &quot;output&quot;: null,   &quot;id&quot;: &quot;/Jekyll/display-value&quot;,   &quot;previous&quot;: {
&quot;next&quot;: {
  &quot;next&quot;: {
    &quot;path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;url&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;id&quot;: &quot;/Jekyll/liquid-raw&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/liquid-raw.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;liquidのソースコードを表示する&quot;,
    &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-15 23:00:29 +0000&quot;,
    &quot;tags&quot;: [
      &quot;jekyll&quot;,
      &quot;liquid&quot;,
      &quot;github&quot;,
      &quot;pages&quot;
    ],
    &quot;slug&quot;: &quot;liquid-raw&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;url&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;content&quot;: &quot;## 変数に何が入っているか調べたい\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 }}  &lt;!-- ここを追加 --&gt;\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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: '&lt;p&gt;' | remove: '&lt;/p&gt;' %}\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&gt; {{ page | inspect }}\n&quot;,
  &quot;output&quot;: null,
  &quot;id&quot;: &quot;/Jekyll/display-value&quot;,
  &quot;previous&quot;: {
    &quot;path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;url&quot;: &quot;/Bootstrap/index&quot;,
    &quot;id&quot;: &quot;/Bootstrap/index&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;category-index&quot;,
    &quot;title&quot;: &quot;Cpp&quot;,
    &quot;slug&quot;: &quot;index&quot;,
    &quot;ext&quot;: &quot;.html&quot;,
    &quot;tags&quot;: [

    ]
  },
  &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;変数に何が入っているか調べたい\&quot;&gt;変数に何が入っているか調べたい&lt;/h2&gt;\n\n&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;変数の中身をページに表示する&quot;,
  &quot;date&quot;: &quot;2017-03-03 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-06-15 21:23:57 +0000&quot;,
  &quot;tags&quot;: [
    &quot;jekyll&quot;,
    &quot;liquid&quot;,
    &quot;github&quot;,
    &quot;pages&quot;
  ],
  &quot;slug&quot;: &quot;display-value&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
&quot;url&quot;: &quot;/Bootstrap/index&quot;,
&quot;content&quot;: &quot;\n\n\n\n\n\n&lt;div class=\&quot;card-columns category-index\&quot;&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;Tips &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/sass-customize\&quot;&gt;Bootstrap sassをカスタマイズする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/04/01 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:53:05 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/bootstrap-landing-page-header\&quot;&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/02/12 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/08/13 15:41:29 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/panel-collapse\&quot;&gt;Panelを使ったCollapseやAccordionメニュー&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/03/05 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:43:41 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;関連記事 &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/cite-include\&quot;&gt;Jekyll &amp; Bootstrapで引用の書きかた&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 01:02:25 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\&quot;&gt;Github Pagesにbootstrap sassをインストールする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/01/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:39:38 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\&quot;&gt;Github Pagesにsubmoduleとしてbootstrapを入れる&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/09 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:51:54 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;/div&gt;\n\n\n&quot;,
&quot;output&quot;: &quot;&lt;!DOCTYPE html&gt;\n&lt;html lang=\&quot;ja\&quot;&gt;\n  &lt;head&gt;\n  &lt;meta http-equiv=\&quot;Content-type\&quot; content=\&quot;text/html; charset=utf-8\&quot;&gt;\n  &lt;meta name=\&quot;viewport\&quot; content=\&quot;width=device-width, initial-scale=1\&quot;&gt;\n  \n  &lt;meta name=\&quot;keywords\&quot; content=\&quot;\&quot;&gt;\n\n\n  &lt;title&gt;Cpp&lt;/title&gt;\n\n  &lt;!-- bootstrap and jQuery include --&gt;\n  &lt;link rel=\&quot;stylesheet\&quot; href=\&quot;https://leico.github.io/TechnicalNote/css/style.css\&quot;&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\&quot;&gt;&lt;/script&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\&quot;&gt;&lt;/script&gt;\n  &lt;!-- bootstrap and jQuery include --&gt;\n\n  &lt;!-- MathJax include --&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\&quot;&gt;&lt;/script&gt;\n\n  &lt;!-- Google Analytics --&gt;\n  &lt;script&gt;\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  &lt;/script&gt;\n\n  &lt;!-- Atom feed --&gt;\n  &lt;link type=\&quot;application/atom+xml\&quot; rel=\&quot;alternate\&quot; href=\&quot;https://leico.github.io/TechnicalNote/atom.xml\&quot; title=\&quot;TechnicalNote\&quot;&gt;\n&lt;/head&gt;\n\n\n  &lt;body&gt;\n    &lt;div class=\&quot;container\&quot;&gt;\n    \n\n&lt;div class=\&quot;page-header\&quot;&gt;\n  &lt;header&gt;\n    &lt;h1&gt;\n      \n    &lt;small&gt; by &lt;a href=\&quot;https://leico.github.io/TechnicalNote/\&quot;&gt;Technical Note&lt;/a&gt;&lt;/small&gt;\n    &lt;/h1&gt;\n  &lt;/header&gt;\n&lt;/div&gt;\n\n&lt;div class=\&quot;row\&quot;&gt;\n  &lt;div class=\&quot;col-xs-12\&quot;&gt;\n    \n\n\n\n\n\n&lt;div class=\&quot;card-columns category-index\&quot;&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;Tips &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/sass-customize\&quot;&gt;Bootstrap sassをカスタマイズする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/04/01 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:53:05 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/bootstrap-landing-page-header\&quot;&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/02/12 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/08/13 15:41:29 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/panel-collapse\&quot;&gt;Panelを使ったCollapseやAccordionメニュー&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/03/05 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:43:41 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;関連記事 &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/cite-include\&quot;&gt;Jekyll &amp;amp; Bootstrapで引用の書きかた&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 01:02:25 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\&quot;&gt;Github Pagesにbootstrap sassをインストールする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/01/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:39:38 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\&quot;&gt;Github Pagesにsubmoduleとしてbootstrapを入れる&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/09 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:51:54 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;/div&gt;\n\n\n\n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n    &lt;/div&gt;\n    &lt;footer class=\&quot;container\&quot;&gt;\n  &lt;hr&gt;\n  &lt;div class=\&quot;row\&quot;&gt;\n    &lt;div class=\&quot;col\&quot;&gt;\n      &lt;p class=\&quot;text-right\&quot;&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/atom.xml\&quot;&gt;Atom&lt;/a&gt;\n      &lt;/p&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;div class=\&quot;row\&quot;&gt;\n    &lt;div class=\&quot;col-md-8\&quot;&gt;\n      &lt;div class=\&quot;row\&quot;&gt;\n        &lt;div class=\&quot;col-md-4\&quot;&gt;\n          &lt;figure class=\&quot;figure\&quot;&gt;\n            &lt;img src=\&quot;https://leico.github.io/TechnicalNote/image/logo.png\&quot; class=\&quot;figure-img rounded\&quot; width=\&quot;200px\&quot; height=\&quot;auto\&quot; alt=\&quot;\&quot;&gt;\n          &lt;/figure&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;col-md-4\&quot;&gt;\n          &lt;h5&gt;contact&lt;/h5&gt;\n          &lt;ul class=\&quot;list-unstyled\&quot;&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://github.com/leico\&quot; class=\&quot;user-mention\&quot;&gt;@leico&lt;/a&gt; &lt;/li&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://www.twitter.com/1_0101\&quot;&gt;twitter&lt;/a&gt;\n&lt;/li&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://leico.github.io\&quot;&gt;web&lt;/a&gt;\n          &lt;/li&gt;\n&lt;/ul&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=\&quot;col-md-4\&quot;&gt;\n      &lt;h5&gt;Merchandise/Schwags&lt;/h5&gt;\n      &lt;p&gt;&lt;small class=\&quot;text-muted\&quot;&gt;支援してくれるとうれしい&lt;/small&gt;&lt;/p&gt;\n      &lt;iframe frameborder=\&quot;0\&quot; height=\&quot;220\&quot; width=\&quot;160\&quot; src=\&quot;https://leico.official.ec/items/6694858/widget/small\&quot;&gt;&lt;/iframe&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;p class=\&quot;text-right\&quot;&gt;\n    &lt;small class=\&quot;text-muted\&quot;&gt;© 2017 leico.&lt;/small&gt;\n  &lt;/p&gt;\n\n&lt;/footer&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;\n&quot;,
&quot;id&quot;: &quot;/Bootstrap/index&quot;,
&quot;previous&quot;: {
  &quot;next&quot;: {
    &quot;path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;url&quot;: &quot;/Bootstrap/index&quot;,
    &quot;id&quot;: &quot;/Bootstrap/index&quot;,
    &quot;relative_path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;category-index&quot;,
    &quot;title&quot;: &quot;Cpp&quot;,
    &quot;slug&quot;: &quot;index&quot;,
    &quot;ext&quot;: &quot;.html&quot;,
    &quot;tags&quot;: [

    ]
  },
  &quot;path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
  &quot;url&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
  &quot;content&quot;: &quot;&lt;h2 id=\&quot;jekyllのヘッダ部分どうしよう\&quot;&gt;Jekyllのヘッダ部分どうしよう&lt;/h2&gt;\n\n&lt;p&gt;ってなり、bootstrapやらHTML5やらの書き方を色々調べた。&lt;/p&gt;\n\n&lt;p&gt;参考:&lt;/p&gt;\n\n&lt;ul&gt;\n  &lt;li&gt;&lt;a href=\&quot;https://web60.co.jp/landing-page.html\&quot;&gt;ランディングページとは何か、これで分かる! | Web集客の開花塾&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://9-bb.com/?p=8782\&quot;&gt;Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://mizukazu.minibird.jp/bootstrap-jumbotron/\&quot;&gt;Bootstrapを使ってみる。ヘッダー編(Jumbotron)| みずかず&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://bootstrap3.cyberlab.info/components/jumbotron.html\&quot;&gt;ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;https://v4-alpha.getbootstrap.com/components/jumbotron/\&quot;&gt;Jumbotron - Bootstrap&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://hateda.hatenadiary.jp/entry/2013/05/09/000124\&quot;&gt;HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://getbootstrap.com/components/#page-header\&quot;&gt;Components - Bootstrap#Page header&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2 id=\&quot;結果としてこうなった\&quot;&gt;結果としてこうなった&lt;/h2&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;jumbotron\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;header&amp;gt;&lt;/span&gt;\n    &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Page Title&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n    &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;subtitle&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;description&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n&lt;p&gt;こうなった理由は以下。&lt;/p&gt;\n\n&lt;h2 id=\&quot;大きなヘッダをきれいに簡単に作りたい\&quot;&gt;大きなヘッダをきれいに簡単に作りたい&lt;/h2&gt;\n\n&lt;p&gt;ブログのヘッダや最近のWebページのトップみたいに、大きいヘッダを簡単に作ることはできないかと調べた。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;ランディングページ(landing page)とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。&lt;/p&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;https://web60.co.jp/landing-page.html\&quot;&gt;ランディングページとは何か、これで分かる! | Web集客の開花塾&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;最近はトップページのことをランディングページと言うらしい。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;bootstrap3からはjumbotronっていうのが実装されて、以前はhero-unitと呼ばれてたものが置き換わったようです。\nこのjumbotronっていうのを使うと、簡単にヘッダー部分が出来上がります&lt;/p&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://9-bb.com/?p=8782\&quot;&gt;Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;&lt;strong&gt;jumbotron&lt;/strong&gt; というものを使えば大きなスペースを持つヘッダが簡単にできるようだ。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;ソースコード&lt;/p&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;jumbotron\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;ジャンボトロン&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;btn btn-primary btn-lg\&quot;&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;href=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;./jumbotron.html\&quot;&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;role=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;button\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;もっと詳しく&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://bootstrap3.cyberlab.info/components/jumbotron.html\&quot;&gt;ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;なるほど。&lt;/p&gt;\n\n&lt;p&gt;サブタイトルはどうやって書こうか。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;h5 id=\&quot;タイトルとタグラインを-header-要素でグループ化した例\&quot;&gt;タイトルとタグラインを header 要素でグループ化した例&lt;/h5&gt;\n\n&lt;p&gt;タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。\n(引用元 &lt;a href=\&quot;https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96!\&quot;&gt;Wikipedia&lt;/a&gt;)&lt;/p&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;header&amp;gt;&lt;/span&gt;\n   &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;ラブライブ! School idol project&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;\n   &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;雑誌『電撃G's magazine』(アスキー・メディアワークス)・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n&lt;div class=\&quot;language-sh highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;section\n| + header title\n| | + h1 main title\n| | + p subtitle\n| + &lt;span class=\&quot;o\&quot;&gt;[&lt;/span&gt;contents]\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://hateda.hatenadiary.jp/entry/2013/05/09/000124\&quot;&gt;HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;他にも例はいくつか載っているがこれがいい気がする。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;h1 id=\&quot;page-header\&quot;&gt;Page header&lt;/h1&gt;\n\n&lt;p&gt;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).&lt;/p&gt;\n\n&lt;div class=\&quot;page-header\&quot;&gt;\n  &lt;h1&gt;Example page header &lt;small&gt;Subtext for header&lt;/small&gt;&lt;/h1&gt;\n&lt;/div&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;page-header\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Example page header &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;small&amp;gt;&lt;/span&gt;Subtext for header&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/small&amp;gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://getbootstrap.com/components/#page-header\&quot;&gt;Components - Bootstrap#Page header&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;bootstrapはこうしている。&lt;/p&gt;\n\n&quot;,
  &quot;output&quot;: &quot;&lt;!DOCTYPE html&gt;\n&lt;html lang=\&quot;ja\&quot;&gt;\n  &lt;head&gt;\n  &lt;meta http-equiv=\&quot;Content-type\&quot; content=\&quot;text/html; charset=utf-8\&quot;&gt;\n  &lt;meta name=\&quot;viewport\&quot; content=\&quot;width=device-width, initial-scale=1\&quot;&gt;\n  \n  &lt;meta name=\&quot;keywords\&quot; content=\&quot;bootstrap,jumbotron,landing page,toppage,header\&quot;&gt;\n\n\n  &lt;title&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/title&gt;\n\n  &lt;!-- bootstrap and jQuery include --&gt;\n  &lt;link rel=\&quot;stylesheet\&quot; href=\&quot;https://leico.github.io/TechnicalNote/css/style.css\&quot;&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/jquery-3.1.1.min.js\&quot;&gt;&lt;/script&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/bootstrap/bootstrap.min.js\&quot;&gt;&lt;/script&gt;\n  &lt;!-- bootstrap and jQuery include --&gt;\n\n  &lt;!-- MathJax include --&gt;\n  &lt;script type=\&quot;text/javascript\&quot; src=\&quot;https://leico.github.io/TechnicalNote/js/MathJax/MathJax.js?config=TeX-MML-AM_HTMLorMML\&quot;&gt;&lt;/script&gt;\n\n  &lt;!-- Google Analytics --&gt;\n  &lt;script&gt;\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  &lt;/script&gt;\n\n  &lt;!-- Atom feed --&gt;\n  &lt;link type=\&quot;application/atom+xml\&quot; rel=\&quot;alternate\&quot; href=\&quot;https://leico.github.io/TechnicalNote/atom.xml\&quot; title=\&quot;TechnicalNote\&quot;&gt;\n&lt;/head&gt;\n\n\n  &lt;body&gt;\n    &lt;div class=\&quot;container\&quot;&gt;\n    &lt;div class=\&quot;row\&quot;&gt;\n\n\n  &lt;div class=\&quot;col-md-8\&quot;&gt;\n\n    &lt;header class=\&quot;page-header\&quot;&gt;\n      &lt;h1&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/h1&gt;\n      &lt;div class=\&quot;row\&quot;&gt;\n\n        &lt;div class=\&quot;col-6\&quot;&gt;\n          &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n            &lt;dt&gt;created&lt;/dt&gt;\n            &lt;dd&gt;2017-02-12&lt;/dd&gt;\n            &lt;dt&gt;last change&lt;/dt&gt;\n            &lt;dd&gt;2017-08-13 15:41:29 +0000&lt;/dd&gt;\n          &lt;/dl&gt;\n        &lt;/div&gt;\n\n        &lt;div class=\&quot;col-6 text-right\&quot;&gt;\n          &lt;a href=\&quot;https://twitter.com/share\&quot; class=\&quot;twitter-share-button\&quot;&gt;Tweet&lt;/a&gt;\n          &lt;script&gt;!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');&lt;/script&gt;\n        &lt;/div&gt;\n\n      &lt;/div&gt;\n    &lt;/header&gt;\n\n    &lt;div class=\&quot;row\&quot;&gt;\n\n      &lt;div class=\&quot;col-12\&quot;&gt;\n        &lt;h2 id=\&quot;jekyllのヘッダ部分どうしよう\&quot;&gt;Jekyllのヘッダ部分どうしよう&lt;/h2&gt;\n\n&lt;p&gt;ってなり、bootstrapやらHTML5やらの書き方を色々調べた。&lt;/p&gt;\n\n&lt;p&gt;参考:&lt;/p&gt;\n\n&lt;ul&gt;\n  &lt;li&gt;&lt;a href=\&quot;https://web60.co.jp/landing-page.html\&quot;&gt;ランディングページとは何か、これで分かる! | Web集客の開花塾&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://9-bb.com/?p=8782\&quot;&gt;Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://mizukazu.minibird.jp/bootstrap-jumbotron/\&quot;&gt;Bootstrapを使ってみる。ヘッダー編(Jumbotron)| みずかず&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://bootstrap3.cyberlab.info/components/jumbotron.html\&quot;&gt;ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;https://v4-alpha.getbootstrap.com/components/jumbotron/\&quot;&gt;Jumbotron - Bootstrap&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://hateda.hatenadiary.jp/entry/2013/05/09/000124\&quot;&gt;HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href=\&quot;http://getbootstrap.com/components/#page-header\&quot;&gt;Components - Bootstrap#Page header&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2 id=\&quot;結果としてこうなった\&quot;&gt;結果としてこうなった&lt;/h2&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;jumbotron\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;header&amp;gt;&lt;/span&gt;\n    &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Page Title&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n    &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;subtitle&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;description&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n&lt;p&gt;こうなった理由は以下。&lt;/p&gt;\n\n&lt;h2 id=\&quot;大きなヘッダをきれいに簡単に作りたい\&quot;&gt;大きなヘッダをきれいに簡単に作りたい&lt;/h2&gt;\n\n&lt;p&gt;ブログのヘッダや最近のWebページのトップみたいに、大きいヘッダを簡単に作ることはできないかと調べた。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;ランディングページ(landing page)とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。&lt;/p&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;https://web60.co.jp/landing-page.html\&quot;&gt;ランディングページとは何か、これで分かる! | Web集客の開花塾&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;最近はトップページのことをランディングページと言うらしい。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;bootstrap3からはjumbotronっていうのが実装されて、以前はhero-unitと呼ばれてたものが置き換わったようです。\nこのjumbotronっていうのを使うと、簡単にヘッダー部分が出来上がります&lt;/p&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://9-bb.com/?p=8782\&quot;&gt;Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;&lt;strong&gt;jumbotron&lt;/strong&gt; というものを使えば大きなスペースを持つヘッダが簡単にできるようだ。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;p&gt;ソースコード&lt;/p&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;jumbotron\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;ジャンボトロン&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n\t&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;btn btn-primary btn-lg\&quot;&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;href=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;./jumbotron.html\&quot;&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;role=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;button\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;もっと詳しく&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://bootstrap3.cyberlab.info/components/jumbotron.html\&quot;&gt;ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;なるほど。&lt;/p&gt;\n\n&lt;p&gt;サブタイトルはどうやって書こうか。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;h5 id=\&quot;タイトルとタグラインを-header-要素でグループ化した例\&quot;&gt;タイトルとタグラインを header 要素でグループ化した例&lt;/h5&gt;\n\n&lt;p&gt;タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。\n(引用元 &lt;a href=\&quot;https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96!\&quot;&gt;Wikipedia&lt;/a&gt;)&lt;/p&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;header&amp;gt;&lt;/span&gt;\n   &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;ラブライブ! School idol project&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;\n   &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;雑誌『電撃G's magazine』(アスキー・メディアワークス)・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n&lt;div class=\&quot;language-sh highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;section\n| + header title\n| | + h1 main title\n| | + p subtitle\n| + &lt;span class=\&quot;o\&quot;&gt;[&lt;/span&gt;contents]\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://hateda.hatenadiary.jp/entry/2013/05/09/000124\&quot;&gt;HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;他にも例はいくつか載っているがこれがいい気がする。&lt;/p&gt;\n\n&lt;blockquote class=\&quot;blockquote\&quot;&gt;\n  \n&lt;h1 id=\&quot;page-header\&quot;&gt;Page header&lt;/h1&gt;\n\n&lt;p&gt;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).&lt;/p&gt;\n\n&lt;div class=\&quot;page-header\&quot;&gt;\n  &lt;h1&gt;Example page header &lt;small&gt;Subtext for header&lt;/small&gt;\n&lt;/h1&gt;\n&lt;/div&gt;\n\n&lt;div class=\&quot;language-html highlighter-rouge\&quot;&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre class=\&quot;highlight\&quot;&gt;&lt;code&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=\&quot;na\&quot;&gt;class=&lt;/span&gt;&lt;span class=\&quot;s\&quot;&gt;\&quot;page-header\&quot;&lt;/span&gt;&lt;span class=\&quot;nt\&quot;&gt;&amp;gt;&lt;/span&gt;\n  &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Example page header &lt;span class=\&quot;nt\&quot;&gt;&amp;lt;small&amp;gt;&lt;/span&gt;Subtext for header&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/small&amp;gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;\n&lt;span class=\&quot;nt\&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;\n&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;\n\n  &lt;footer class=\&quot;blockquote-footer\&quot;&gt;&lt;cite&gt;\n&lt;a href=\&quot;http://getbootstrap.com/components/#page-header\&quot;&gt;Components - Bootstrap#Page header&lt;/a&gt;\n&lt;/cite&gt;&lt;/footer&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;bootstrapはこうしている。&lt;/p&gt;\n\n\n      &lt;/div&gt;\n\n      &lt;div class=\&quot;col-12\&quot;&gt;\n        &lt;hr&gt;\n        &lt;a href=\&quot;https://twitter.com/share\&quot; class=\&quot;twitter-share-button\&quot;&gt;Tweet&lt;/a&gt;\n        &lt;script&gt;!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');&lt;/script&gt;\n      &lt;/div&gt;\n\n    &lt;/div&gt;\n\n  &lt;/div&gt;\n  \n    &lt;div class=\&quot;col-md-4\&quot;&gt;\n      &lt;h2&gt;\n        &lt;a href=\&quot;https://leico.github.io/TechnicalNote/\&quot;&gt;\n          Technical Note\n        &lt;/a&gt;\n      &lt;/h2&gt;\n\n      \n\n      \n\n      &lt;h3&gt;\n        &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap\&quot;&gt;bootstrap Top&lt;/a&gt;\n      &lt;/h3&gt;\n\n      \n        &lt;h3&gt;Tips&lt;/h3&gt;\n        &lt;ul&gt;\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/sass-customize\&quot;&gt;Bootstrap sassをカスタマイズする&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/bootstrap-landing-page-header\&quot;&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/panel-collapse\&quot;&gt;Panelを使ったCollapseやAccordionメニュー&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n        &lt;/ul&gt;\n      \n        &lt;h3&gt;関連記事&lt;/h3&gt;\n        &lt;ul&gt;\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/cite-include\&quot;&gt;Jekyll &amp;amp; Bootstrapで引用の書きかた&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\&quot;&gt;Github Pagesにbootstrap sassをインストールする&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n\n          \n\n          \n          \n\n          &lt;li&gt;\n            &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\&quot;&gt;Github Pagesにsubmoduleとしてbootstrapを入れる&lt;/a&gt;\n          &lt;/li&gt;\n\n        \n        &lt;/ul&gt;\n      \n    &lt;/div&gt;\n  \n\n&lt;/div&gt;\n\n    &lt;/div&gt;\n    &lt;footer class=\&quot;container\&quot;&gt;\n  &lt;hr&gt;\n  &lt;div class=\&quot;row\&quot;&gt;\n    &lt;div class=\&quot;col\&quot;&gt;\n      &lt;p class=\&quot;text-right\&quot;&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/atom.xml\&quot;&gt;Atom&lt;/a&gt;\n      &lt;/p&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;div class=\&quot;row\&quot;&gt;\n    &lt;div class=\&quot;col-md-8\&quot;&gt;\n      &lt;div class=\&quot;row\&quot;&gt;\n        &lt;div class=\&quot;col-md-4\&quot;&gt;\n          &lt;figure class=\&quot;figure\&quot;&gt;\n            &lt;img src=\&quot;https://leico.github.io/TechnicalNote/image/logo.png\&quot; class=\&quot;figure-img rounded\&quot; width=\&quot;200px\&quot; height=\&quot;auto\&quot; alt=\&quot;\&quot;&gt;\n          &lt;/figure&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;col-md-4\&quot;&gt;\n          &lt;h5&gt;contact&lt;/h5&gt;\n          &lt;ul class=\&quot;list-unstyled\&quot;&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://github.com/leico\&quot; class=\&quot;user-mention\&quot;&gt;@leico&lt;/a&gt; &lt;/li&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://www.twitter.com/1_0101\&quot;&gt;twitter&lt;/a&gt;\n&lt;/li&gt;\n            &lt;li&gt; &lt;a href=\&quot;https://leico.github.io\&quot;&gt;web&lt;/a&gt;\n          &lt;/li&gt;\n&lt;/ul&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=\&quot;col-md-4\&quot;&gt;\n      &lt;h5&gt;Merchandise/Schwags&lt;/h5&gt;\n      &lt;p&gt;&lt;small class=\&quot;text-muted\&quot;&gt;支援してくれるとうれしい&lt;/small&gt;&lt;/p&gt;\n      &lt;iframe frameborder=\&quot;0\&quot; height=\&quot;220\&quot; width=\&quot;160\&quot; src=\&quot;https://leico.official.ec/items/6694858/widget/small\&quot;&gt;&lt;/iframe&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n  &lt;p class=\&quot;text-right\&quot;&gt;\n    &lt;small class=\&quot;text-muted\&quot;&gt;© 2017 leico.&lt;/small&gt;\n  &lt;/p&gt;\n\n&lt;/footer&gt;\n\n  &lt;/body&gt;\n&lt;/html&gt;\n&quot;,
  &quot;id&quot;: &quot;/Bootstrap/bootstrap-landing-page-header&quot;,
  &quot;previous&quot;: {
    &quot;path&quot;: &quot;_docs/Jekyll/post-layout.md&quot;,
    &quot;url&quot;: &quot;/Jekyll/post-layout&quot;,
    &quot;id&quot;: &quot;/Jekyll/post-layout&quot;,
    &quot;relative_path&quot;: &quot;_docs/Jekyll/post-layout.md&quot;,
    &quot;collection&quot;: &quot;docs&quot;,
    &quot;draft&quot;: false,
    &quot;categories&quot;: [

    ],
    &quot;layout&quot;: &quot;post&quot;,
    &quot;title&quot;: &quot;Jekyll:postsのレイアウトについて考える&quot;,
    &quot;date&quot;: &quot;2017-02-03 00:00:00 +0900&quot;,
    &quot;lastchange&quot;: &quot;2017-06-16 23:05:15 +0000&quot;,
    &quot;tags&quot;: [
      &quot;bootstrap&quot;,
      &quot;jekyll&quot;
    ],
    &quot;slug&quot;: &quot;post-layout&quot;,
    &quot;ext&quot;: &quot;.md&quot;
  },
  &quot;relative_path&quot;: &quot;_docs/Bootstrap/bootstrap-landing-page-header.md&quot;,
  &quot;collection&quot;: &quot;docs&quot;,
  &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;jekyllのヘッダ部分どうしよう\&quot;&gt;Jekyllのヘッダ部分どうしよう&lt;/h2&gt;\n\n&quot;,
  &quot;draft&quot;: false,
  &quot;categories&quot;: [

  ],
  &quot;layout&quot;: &quot;post&quot;,
  &quot;title&quot;: &quot;bootstrap:ランディングページ(トップページ)のヘッダについて考える&quot;,
  &quot;date&quot;: &quot;2017-02-12 00:00:00 +0900&quot;,
  &quot;lastchange&quot;: &quot;2017-08-13 15:41:29 +0000&quot;,
  &quot;tags&quot;: [
    &quot;bootstrap&quot;,
    &quot;jumbotron&quot;,
    &quot;landing page&quot;,
    &quot;toppage&quot;,
    &quot;header&quot;
  ],
  &quot;slug&quot;: &quot;bootstrap-landing-page-header&quot;,
  &quot;ext&quot;: &quot;.md&quot;
},
&quot;relative_path&quot;: &quot;_docs/Bootstrap/index.html&quot;,
&quot;collection&quot;: &quot;docs&quot;,
&quot;excerpt&quot;: &quot;\n\n\n\n\n\n&lt;div class=\&quot;card-columns category-index\&quot;&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;Tips &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/sass-customize\&quot;&gt;Bootstrap sassをカスタマイズする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/04/01 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:53:05 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/bootstrap-landing-page-header\&quot;&gt;bootstrap:ランディングページ(トップページ)のヘッダについて考える&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/02/12 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/08/13 15:41:29 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Bootstrap/panel-collapse\&quot;&gt;Panelを使ったCollapseやAccordionメニュー&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/03/05 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 16:43:41 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;div class=\&quot;card\&quot;&gt;\n  &lt;h3 class=\&quot;card-header\&quot;&gt;関連記事 &lt;/h3&gt;\n  &lt;div class=\&quot;card-block\&quot;&gt;\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/cite-include\&quot;&gt;Jekyll &amp; Bootstrapで引用の書きかた&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/20 01:02:25 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap-install\&quot;&gt;Github Pagesにbootstrap sassをインストールする&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/01/20 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:39:38 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n\n    \n\n    \n    \n    &lt;h5&gt;\n      &lt;a href=\&quot;https://leico.github.io/TechnicalNote/Jekyll/jekyll-bootstrap4-submodule\&quot;&gt;Github Pagesにsubmoduleとしてbootstrapを入れる&lt;/a&gt;\n    &lt;/h5&gt;\n    &lt;dl class=\&quot;dl-horizontal\&quot;&gt;\n      &lt;dt&gt;created&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/09 00:00:00 &lt;/dd&gt;\n      &lt;dt&gt;lastchange&lt;/dt&gt;\n      &lt;dd&gt; 2017/06/15 22:51:54 &lt;/dd&gt;\n    &lt;/dl&gt;\n\n    \n  &lt;/div&gt;\n&lt;/div&gt;\n\n\n\n&lt;/div&gt;\n&quot;,
&quot;draft&quot;: false,
&quot;categories&quot;: [

],
&quot;layout&quot;: &quot;category-index&quot;,
&quot;title&quot;: &quot;Cpp&quot;,
&quot;slug&quot;: &quot;index&quot;,
&quot;ext&quot;: &quot;.html&quot;,
&quot;tags&quot;: [

]   },   &quot;relative_path&quot;: &quot;_docs/Jekyll/display-value.md&quot;,   &quot;collection&quot;: &quot;docs&quot;,   &quot;excerpt&quot;: &quot;&lt;h2 id=\&quot;変数に何が入っているか調べたい\&quot;&gt;変数に何が入っているか調べたい&lt;/h2&gt;\n\n&quot;,   &quot;draft&quot;: false,   &quot;categories&quot;: [

], "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" }