エンジン福岡の物流系エンジニアの雑記ブログ。英語の学習法を試行錯誤中。2019.06.07週末に家の近くの公園(たまに遠くまで行くけど)で子供と遊ぶんで、そのついでに公園の様子でもアップしていくかー!とサイトを開設して1ヶ月。子供が遊ぶ場所の情報をかいてます。kaki-playground.com先日、サイトをリニューアルしました。いう、静的ページを爆速で表示してくれるフレームワークを使っているのですが、テンプレートがいくつかあるので、1からデザインしなくても、テンプレートをカスタマイズするだけでいい感じに見せる事ができたりします。(上記のサイトでは、gatsby-casperというテンプレートをベースにしています。いった、「Gatsbyを構成している技術」の知識は必要です。TypeScriptも使用しています。GraphQLの理解は後回しにして、まずは公開する事にしよう。(gatsby-casperのテンプレートを使って)」というのを書いていこうかと思います。いうか静的爆速サイト作りたい。いう、超ニッチな層をターゲットとした記事です。該当しない方は、「戻る」ボタンをどうぞ。「裏側は雑でも適当でもいいから、まずは見せるものを作る。」という方向性で書いてますので、ご留意ください。本家のデモページはこちらです。えておく設定gatsby-config.jswebsite-config.tsコンテンツのトップに出てくる画像がでかいフォントを変えたいメニューを編集トップページのヘッダにもメニューを表示したいフッター情報が色々邪魔。カードに出てくるAuthor情報とか特に要らないけど。カテゴリ設定エラーが消えない!でも何がおかしいのか分からないーーッ!まだ何か変なエラー出る!エラーが消えーん!うがあああーー!!!それでもエラーが消えない!最後に準備yarnをインストール。起動リポジトリをクローンした後、以下を実行。dev最低限変えておく設定gatsby-config.jstitledescriptionsiteUrlを自分のサイト用に編集。{以下の部分を、自分のサイト用に編集。コンテンツのトップに出てくる画像がでかいコンテンツをクリックすると、サムネ画像の超拡大版がデカデカと出てきます。以下でサイズ調整可能です。フォントを変えたい日本語を書くと、結構硬めの印象です。変えたい場合は、以下を編集。適当に変えてください。思いつかなければコメントアウトとかでもOKです。変わってない部分があれば、「font-family」で検索して見つけた記述を変えていってください。メニューを編集src/components/header/SiteNav.tsxこれを編集。140行目あたりでしょうか。</SiteNavLeft>こんな感じで。トップページのヘッダにもメニューを表示したいトップページだけヘッダメニューが変な位置にあって、どうにも操作感が微妙に感じてしまう。あと、ロゴはここに要らね。