{"componentChunkName":"component---src-templates-blog-post-tsx","path":"/blog/2019-06-28-change_blog_vewpress_to_gatsbyjs/","result":{"data":{"site":{"siteMetadata":{"title":"Ouvill のブログ","author":"Ouvill(おーびる)","siteUrl":"https://blog.ouvill.net"}},"defaultCover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#d8d8d8","images":{"fallback":{"src":"/static/b1addcc2c923340c2baaa1236d2555d2/2c1fd/site-header.jpg","srcSet":"/static/b1addcc2c923340c2baaa1236d2555d2/78489/site-header.jpg 80w,\n/static/b1addcc2c923340c2baaa1236d2555d2/9d796/site-header.jpg 160w,\n/static/b1addcc2c923340c2baaa1236d2555d2/2c1fd/site-header.jpg 320w,\n/static/b1addcc2c923340c2baaa1236d2555d2/394a8/site-header.jpg 640w","sizes":"(min-width: 320px) 320px, 100vw"},"sources":[{"srcSet":"/static/b1addcc2c923340c2baaa1236d2555d2/fd305/site-header.avif 80w,\n/static/b1addcc2c923340c2baaa1236d2555d2/3675f/site-header.avif 160w,\n/static/b1addcc2c923340c2baaa1236d2555d2/d94f4/site-header.avif 320w,\n/static/b1addcc2c923340c2baaa1236d2555d2/54e23/site-header.avif 640w","type":"image/avif","sizes":"(min-width: 320px) 320px, 100vw"},{"srcSet":"/static/b1addcc2c923340c2baaa1236d2555d2/0e3bd/site-header.webp 80w,\n/static/b1addcc2c923340c2baaa1236d2555d2/f7b29/site-header.webp 160w,\n/static/b1addcc2c923340c2baaa1236d2555d2/09d71/site-header.webp 320w,\n/static/b1addcc2c923340c2baaa1236d2555d2/359e0/site-header.webp 640w","type":"image/webp","sizes":"(min-width: 320px) 320px, 100vw"}]},"width":320,"height":200}},"publicURL":"/static/b1addcc2c923340c2baaa1236d2555d2/site-header.jpg"},"allMarkdownRemark":{"edges":[{"node":{"excerpt":"…","fields":{"slug":"/blog/2024-09-04-2024_programming_language/"},"frontmatter":{"date":"2024/09/04","title":"プログラミング言語雑感(2024年)：C, C++, Java, C#, Python, JavaScript,　Ruby, PHP, Flutter, Rust, Go","description":null,"cover":null}}},{"node":{"excerpt":"こんにちは！最近、ティラノスクリプトのプラグインをリリースしました。このプラグインは、ティラノスクリプトに表示されるメッセージを逐次VOICEVOX…","fields":{"slug":"/blog/2024-08-19-create_tyranoscript_plugin/"},"frontmatter":{"date":"2024/08/20","title":"ティラノスクリプトのプラグイン開発：VOICEVOXプラグインの経験から","description":null,"cover":null}}},{"node":{"excerpt":"我々が普段利用しているパソコンにはCPUが搭載されており、そのCPUはx86_64(AMD64)というアーキテクチャを持っている。しかし、Raspberry PiなどのARMベースのマイコンにはARM64というアーキテクチャを持っている。ARM64とx86_6…","fields":{"slug":"/blog/2023-01-26-build_docker_multi_architecture_with_github_action/GitHub_ActionでARM64とAMD64のDockerイメージをビルドする/"},"frontmatter":{"date":"2023/01/26","title":"GitHub_ActionでARM64とAMD64のDockerイメージをビルドする","description":null,"cover":null}}}]},"markdownRemark":{"id":"bab3c2f4-0629-5ccd-a096-ea596bf50023","excerpt":"本サイトのブログシステムを VuePress から GatsbyJS に変更しました。 自力でサイトデザインして構成しています。 VuePress から GatsbyJS に変更したわけ 個人的に Vue よりも React のほうが好きだからです。 TypeScript…","fields":{"slug":"/blog/2019-06-28-change_blog_vewpress_to_gatsbyjs/","githubURL":"https://github.com/Ouvill/gatsbyjs_blog/tree/master/content/blog/2019-06-28-change_blog_vewpress_to_gatsbyjs/index.md"},"html":"<p>本サイトのブログシステムを VuePress から GatsbyJS に変更しました。</p>\n<p>自力でサイトデザインして構成しています。</p>\n<h2 id=\"vuepress-から-gatsbyjs-に変更したわけ\" style=\"position:relative;\"><a href=\"#vuepress-%E3%81%8B%E3%82%89-gatsbyjs-%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%82%8F%E3%81%91\" aria-label=\"vuepress から gatsbyjs に変更したわけ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>VuePress から GatsbyJS に変更したわけ</h2>\n<p>個人的に Vue よりも React のほうが好きだからです。</p>\n<p>TypeScript を利用して書いているのですが、TypeScript と React の組み合わせは補完がよく聞いて気持ちがいいです。</p>\n<h2 id=\"旧デザインと新デザインの比較\" style=\"position:relative;\"><a href=\"#%E6%97%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A8%E6%96%B0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%AF%94%E8%BC%83\" aria-label=\"旧デザインと新デザインの比較 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>旧デザインと新デザインの比較</h2>\n<p>旧デザイン</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/6ee49568876fdefef5e2f1203d3a69d9/6bfbb/old.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 63.51351351351351%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR42m1QaU8aYRDev9I0sZpAL23qAVS56kHt8Z/6VYEqUpPWoBy7XPYKcmg/N7YgVBBsinyvEliWvQ/67NpAm3TyZDLvzDzzzLzEfrxEUuUwWUmQpfepSjpeSlGlVPwkSRb3E+UkWUrHT4AkVaTIIhU9TlLf0IDSu0SFcFi8bpvfbfU5rT6X7ZXD4lt9HHy6GHzi3nq2FFx2bK4uBj2uAKpOmx9VN3rmvC6bHxni0fTawox3XgcC38LM+vPl1y9Wtj3OzRVnYMm+4XFvwdvnfA6L3z677rRuzE+v2Wd1CpHLnBaytaNCo5A7+1w4P8rX89naYbah+7yezB9UD3ONTx9wy5d06hg+87GczZzmDqrEYCAPBqqmKZqmDv5nmqbBd7rtn816/fvXH+dVmm6DAiLR77M8L7Acz3G8IIiCIImihIAXRATXkGWl22WazbN44GWtXOx0e2ABBAfj+XaHZjAFBEniBIFhjaygDwWQhL4sSa3WhSiLsiyzrN6hk6HDsCzIvb7ukecNZaykqqqsKLgKBLrH/NHgec4wAgGGIIfZaFVg6tC04eVY/RfNXdF9mmG4IflaucfgBLZvLMsaG0NZVkamr6CqaEIsSdJobUyV9Sq+VVMMOT3W/vlzlCF3dXmJjxiRQazW6oHtNzu7kZ1QZDcS0xGO7UXIcJQKhaNvQ+EYlex2OoykScYhIzIeZDw5br5vuvdw4vbUmHkK/pZ5Ehg3Td6cuHNjzHT3geWi1ZJAU9S/yb8BoXZmXIdFMjwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"旧デザイン\"\n        title=\"\"\n        src=\"/static/6ee49568876fdefef5e2f1203d3a69d9/fcda8/old.png\"\n        srcset=\"/static/6ee49568876fdefef5e2f1203d3a69d9/12f09/old.png 148w,\n/static/6ee49568876fdefef5e2f1203d3a69d9/e4a3f/old.png 295w,\n/static/6ee49568876fdefef5e2f1203d3a69d9/fcda8/old.png 590w,\n/static/6ee49568876fdefef5e2f1203d3a69d9/efc66/old.png 885w,\n/static/6ee49568876fdefef5e2f1203d3a69d9/c83ae/old.png 1180w,\n/static/6ee49568876fdefef5e2f1203d3a69d9/6bfbb/old.png 1514w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>新デザイン</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d35a3d1cd9659db1b2fce2a852e483f0/0bd45/new.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.70270270270271%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABPUlEQVR42o2P207CQBCG9/0fQcEoxsMrQKmKYjBcAAbPdyaS0OBC2bbbPXacaYGocMG/fybTmfl2pwxOwt0+bq+83Tq7hvMbNPvfaFytfNGBy1uKm8qmux5m0Aj/uN6CWumjAOoBJYdNMtYRqD5rTTigCqPqL7tgoLtjczdWnUd3/wwPb9B7hf4HhCN/Grruk++9YL3ov0NrwIpgSG5ThPaIf35NFzwWIuLficwKACgoABfILJWQXimnPJajmBlnjdZWaWMtOk2SRIhljLhI0zSXEkp5X2A3yZYyzwrvvXPOWoakQdKgsWvn8/m01GQyiaJIa+3WogE8NErDKGaznGCMpfA1fJsmtK6ilFIpZXaJ0bZ4ZZLR8tbitnmew5Zw0x0wYj5arK4o4dlshslesJG5jdPqLyqYc475PvAP1qhVgkRJuqsAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"新デザイン\"\n        title=\"\"\n        src=\"/static/d35a3d1cd9659db1b2fce2a852e483f0/fcda8/new.png\"\n        srcset=\"/static/d35a3d1cd9659db1b2fce2a852e483f0/12f09/new.png 148w,\n/static/d35a3d1cd9659db1b2fce2a852e483f0/e4a3f/new.png 295w,\n/static/d35a3d1cd9659db1b2fce2a852e483f0/fcda8/new.png 590w,\n/static/d35a3d1cd9659db1b2fce2a852e483f0/efc66/new.png 885w,\n/static/d35a3d1cd9659db1b2fce2a852e483f0/c83ae/new.png 1180w,\n/static/d35a3d1cd9659db1b2fce2a852e483f0/0bd45/new.png 1833w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>旧デザインは VuePress と <a href=\"https://github.com/meteorlxy/vuepress-theme-meteorlxy\" target=\"_blank\" rel=\"noopener noreferrer\">vuepress-theme-meteorlxy</a> というテーマを利用していました。</p>\n<p>今回は GatsbyJS と独自デザインでサイトを構築しています。</p>\n<p>比較してみると、旧デザインよりもかなりシンプルになっていています。</p>\n<p>今回はデザインを自作したため、すべてのサイトページのHTML,CSS, JS の構成をばっちり把握できています。</p>\n<p>今後も自分で自由にサイトのデザイン、機能を拡張していけるのは自作のメリットだと思います。</p>\n<h2 id=\"デザインコンセプト--桜\" style=\"position:relative;\"><a href=\"#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88--%E6%A1%9C\" aria-label=\"デザインコンセプト  桜 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>デザインコンセプト − 桜</h2>\n<p>今回のデザインコンセプトは桜です。作成したのは6月なのでもう夏になりかけなのですが……。</p>\n<p>桜のアイコンイラストも今回のために自作しました。</p>\n<p><img src=\"/7cb1fca34558abcfc1f238d4c4c6964c/cherry-blossom-large.svg\" alt=\"\"></p>\n<p>解像度が高いディスプレイでは、画面左部分にほんのりと桜の花が表示されるようにデザインしています。</p>\n<h2 id=\"意識した点\" style=\"position:relative;\"><a href=\"#%E6%84%8F%E8%AD%98%E3%81%97%E3%81%9F%E7%82%B9\" aria-label=\"意識した点 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>意識した点</h2>\n<h3 id=\"サイドバーのコンテンツを減らす\" style=\"position:relative;\"><a href=\"#%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E6%B8%9B%E3%82%89%E3%81%99\" aria-label=\"サイドバーのコンテンツを減らす permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>サイドバーのコンテンツを減らす</h3>\n<p>本サイトのサイドバーは目次のみとなっています。</p>\n<p>ブログでよくあるデザインは、画面やや左寄りにメインコンテンツがあり、右端にサイドバーが配置されているものです。</p>\n<p>ただ検索でやってきた読者にとってはサイドバーはほとんど目に入らないものです。</p>\n<p>カテゴリーや新着記事なんかをサイドバーで表示していても、記事のコンテンツを読んでいるあいだは目に止まりません。スクロールして流されるだけです。</p>\n<p>それならいっそのこと表示しなくていいじゃないかと思ったので、サイドバーは目次のみを表示しています。</p>\n<p>サイドメニューにダラダラとページリンクを書くくらいならば、ページ下部に関連リンクを表示するようにしたほうが読者も利用しやすいです。</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本サイトのブログシステムを VuePress から GatsbyJS に変更しました。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"自力でサイトデザインして構成しています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"vuepress-から-gatsbyjs-に変更したわけ","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#vuepress-%E3%81%8B%E3%82%89-gatsbyjs-%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%82%8F%E3%81%91","ariaLabel":"vuepress から gatsbyjs に変更したわけ permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"VuePress から GatsbyJS に変更したわけ"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"個人的に Vue よりも React のほうが好きだからです。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"TypeScript を利用して書いているのですが、TypeScript と React の組み合わせは補完がよく聞いて気持ちがいいです。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"旧デザインと新デザインの比較","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%97%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A8%E6%96%B0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%AF%94%E8%BC%83","ariaLabel":"旧デザインと新デザインの比較 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"旧デザインと新デザインの比較"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"旧デザイン"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/static/6ee49568876fdefef5e2f1203d3a69d9/6bfbb/old.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 63.51351351351351%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACPElEQVR42m1QaU8aYRDev9I0sZpAL23qAVS56kHt8Z/6VYEqUpPWoBy7XPYKcmg/N7YgVBBsinyvEliWvQ/67NpAm3TyZDLvzDzzzLzEfrxEUuUwWUmQpfepSjpeSlGlVPwkSRb3E+UkWUrHT4AkVaTIIhU9TlLf0IDSu0SFcFi8bpvfbfU5rT6X7ZXD4lt9HHy6GHzi3nq2FFx2bK4uBj2uAKpOmx9VN3rmvC6bHxni0fTawox3XgcC38LM+vPl1y9Wtj3OzRVnYMm+4XFvwdvnfA6L3z677rRuzE+v2Wd1CpHLnBaytaNCo5A7+1w4P8rX89naYbah+7yezB9UD3ONTx9wy5d06hg+87GczZzmDqrEYCAPBqqmKZqmDv5nmqbBd7rtn816/fvXH+dVmm6DAiLR77M8L7Acz3G8IIiCIImihIAXRATXkGWl22WazbN44GWtXOx0e2ABBAfj+XaHZjAFBEniBIFhjaygDwWQhL4sSa3WhSiLsiyzrN6hk6HDsCzIvb7ukecNZaykqqqsKLgKBLrH/NHgec4wAgGGIIfZaFVg6tC04eVY/RfNXdF9mmG4IflaucfgBLZvLMsaG0NZVkamr6CqaEIsSdJobUyV9Sq+VVMMOT3W/vlzlCF3dXmJjxiRQazW6oHtNzu7kZ1QZDcS0xGO7UXIcJQKhaNvQ+EYlex2OoykScYhIzIeZDw5br5vuvdw4vbUmHkK/pZ5Ehg3Td6cuHNjzHT3geWi1ZJAU9S/yb8BoXZmXIdFMjwAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"旧デザイン","title":"","src":"/static/6ee49568876fdefef5e2f1203d3a69d9/fcda8/old.png","srcSet":["/static/6ee49568876fdefef5e2f1203d3a69d9/12f09/old.png 148w","/static/6ee49568876fdefef5e2f1203d3a69d9/e4a3f/old.png 295w","/static/6ee49568876fdefef5e2f1203d3a69d9/fcda8/old.png 590w","/static/6ee49568876fdefef5e2f1203d3a69d9/efc66/old.png 885w","/static/6ee49568876fdefef5e2f1203d3a69d9/c83ae/old.png 1180w","/static/6ee49568876fdefef5e2f1203d3a69d9/6bfbb/old.png 1514w"],"sizes":"(max-width: 590px) 100vw, 590px","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"新デザイン"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/static/d35a3d1cd9659db1b2fce2a852e483f0/0bd45/new.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 52.70270270270271%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABPUlEQVR42o2P207CQBCG9/0fQcEoxsMrQKmKYjBcAAbPdyaS0OBC2bbbPXacaYGocMG/fybTmfl2pwxOwt0+bq+83Tq7hvMbNPvfaFytfNGBy1uKm8qmux5m0Aj/uN6CWumjAOoBJYdNMtYRqD5rTTigCqPqL7tgoLtjczdWnUd3/wwPb9B7hf4HhCN/Grruk++9YL3ov0NrwIpgSG5ThPaIf35NFzwWIuLficwKACgoABfILJWQXimnPJajmBlnjdZWaWMtOk2SRIhljLhI0zSXEkp5X2A3yZYyzwrvvXPOWoakQdKgsWvn8/m01GQyiaJIa+3WogE8NErDKGaznGCMpfA1fJsmtK6ilFIpZXaJ0bZ4ZZLR8tbitnmew5Zw0x0wYj5arK4o4dlshslesJG5jdPqLyqYc475PvAP1qhVgkRJuqsAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"新デザイン","title":"","src":"/static/d35a3d1cd9659db1b2fce2a852e483f0/fcda8/new.png","srcSet":["/static/d35a3d1cd9659db1b2fce2a852e483f0/12f09/new.png 148w","/static/d35a3d1cd9659db1b2fce2a852e483f0/e4a3f/new.png 295w","/static/d35a3d1cd9659db1b2fce2a852e483f0/fcda8/new.png 590w","/static/d35a3d1cd9659db1b2fce2a852e483f0/efc66/new.png 885w","/static/d35a3d1cd9659db1b2fce2a852e483f0/c83ae/new.png 1180w","/static/d35a3d1cd9659db1b2fce2a852e483f0/0bd45/new.png 1833w"],"sizes":"(max-width: 590px) 100vw, 590px","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"旧デザインは VuePress と "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/meteorlxy/vuepress-theme-meteorlxy","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"vuepress-theme-meteorlxy"}]},{"type":"text","value":" というテーマを利用していました。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"今回は GatsbyJS と独自デザインでサイトを構築しています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"比較してみると、旧デザインよりもかなりシンプルになっていています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"今回はデザインを自作したため、すべてのサイトページのHTML,CSS, JS の構成をばっちり把握できています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"今後も自分で自由にサイトのデザイン、機能を拡張していけるのは自作のメリットだと思います。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"デザインコンセプト--桜","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88--%E6%A1%9C","ariaLabel":"デザインコンセプト  桜 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"デザインコンセプト − 桜"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"今回のデザインコンセプトは桜です。作成したのは6月なのでもう夏になりかけなのですが……。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"桜のアイコンイラストも今回のために自作しました。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"/7cb1fca34558abcfc1f238d4c4c6964c/cherry-blossom-large.svg","alt":""},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"解像度が高いディスプレイでは、画面左部分にほんのりと桜の花が表示されるようにデザインしています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"意識した点","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%84%8F%E8%AD%98%E3%81%97%E3%81%9F%E7%82%B9","ariaLabel":"意識した点 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"意識した点"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"サイドバーのコンテンツを減らす","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E6%B8%9B%E3%82%89%E3%81%99","ariaLabel":"サイドバーのコンテンツを減らす permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"サイドバーのコンテンツを減らす"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本サイトのサイドバーは目次のみとなっています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"ブログでよくあるデザインは、画面やや左寄りにメインコンテンツがあり、右端にサイドバーが配置されているものです。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"ただ検索でやってきた読者にとってはサイドバーはほとんど目に入らないものです。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"カテゴリーや新着記事なんかをサイドバーで表示していても、記事のコンテンツを読んでいるあいだは目に止まりません。スクロールして流されるだけです。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"それならいっそのこと表示しなくていいじゃないかと思ったので、サイドバーは目次のみを表示しています。"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"サイドメニューにダラダラとページリンクを書くくらいならば、ページ下部に関連リンクを表示するようにしたほうが読者も利用しやすいです。"}]}],"data":{"quirksMode":false}},"tableOfContents":"<ul>\n<li>\n<p><a href=\"#vuepress-%E3%81%8B%E3%82%89-gatsbyjs-%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%82%8F%E3%81%91\">VuePress から GatsbyJS に変更したわけ</a></p>\n</li>\n<li>\n<p><a href=\"#%E6%97%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A8%E6%96%B0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%AF%94%E8%BC%83\">旧デザインと新デザインの比較</a></p>\n</li>\n<li>\n<p><a href=\"#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88--%E6%A1%9C\">デザインコンセプト − 桜</a></p>\n</li>\n<li>\n<p><a href=\"#%E6%84%8F%E8%AD%98%E3%81%97%E3%81%9F%E7%82%B9\">意識した点</a></p>\n<ul>\n<li><a href=\"#%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E6%B8%9B%E3%82%89%E3%81%99\">サイドバーのコンテンツを減らす</a></li>\n</ul>\n</li>\n</ul>","frontmatter":{"title":"ブログを VuePress から GatsbyJS に変更","date":"2019/06/28,","description":"","cover":{"publicURL":"/static/056a06f229cc9708038f2c944a3edf47/cover.png"}}}},"pageContext":{"slug":"/blog/2019-06-28-change_blog_vewpress_to_gatsbyjs/","defaultCover":"/opt/build/repo/content/assets/site-header.jpg","previous":{"fields":{"slug":"/blog/2019-06-17-gatsbyjs-react-pose/gatsbyjs-react-pose/"},"frontmatter":{"title":"GatsbyJS のページ移動時にReact Pose でアニメーションを実装する"}},"next":{"fields":{"slug":"/blog/2020-01-06-start-php/"},"frontmatter":{"title":"PHP のお勉強"}}}},"staticQueryHashes":["2239373282","3905181353"],"slicesMap":{}}