記事ごとにサムネイル画像を追加

記事へのリンクのアイコンにしたり、記事のアイキャッチにしたりする。

やるかやらないか

多分やらない🙅‍♀️。単純に転送サイズが大きくなる。
あと画像探すのも面倒。
やらない🙅‍♀️。あまり意味がない。

ファイルパス

src/pages/about.js

上部で固定されるヘッダーの作成

やるかやらないか

多分やる

記載する内容の決定

• ロゴ(トップページへ戻るリンク)
• ダークモードへの切り替えのトグルボタン

デザイン

狭くなってる

scssでのメディアクエリ修正

• PC時は現ページネーションを表示しない

現状

• サイト名→header-title
• ページのタイトル→page-title

gatsby-remark-code-titlesでいけるらしい

https://qiita.com/Takumon/items/da8347f81a9f021b637f#%E6%8C%87%E5%AE%9A%E8%A1%8C%E6%95%B0%E3%82%92%E5%BC%B7%E8%AA%BF%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88

なにこれ

list-styleのデフォルト設定を無効化。絵文字とかでスタイルを作る。

ファイルパス

src/scss/_article.scss

ファイルパス

src/scss/_article.scss

参考

https://qiita.com/ymeeto/items/f165576f49f37e28e253

• gatsby-plugin-manifestのインストール
• gatsby-plugin-offlineのインストール
• gatsby-config.jsの編集
• 動作確認
• テーマカラーの変更(濃いグレーにする)
• アイコン画像の用意

存在するカテゴリをリスト表示し、それぞれのカテゴリの記事一覧へのリンクもつける

https://qiita.com/aocattleya/items/5f836e9c65ba3eb3af03

• key属性をちゃんと設定してみる
• a要素がネストしてるから修正してみる

• 基本的な機能の作成
• スタイルの調整

===

• ページ数がすごい増えた時の省略（...みたいなの）はどうする？
  • 変数paginationを用意、そこに代入してreturnするように書き換える
  • category.js、tag.jsはどうする？
  • 関数を作成、引数にisCategory、isTagみたいにboolを渡してパスを切り替える

ファイルパス

gatsby-node.js

クエリを複数回投げているので1つにまとめる

なにこれ

連載を「カテゴリ」としているが、「シリーズ」の方が適切では。

修正箇所

1. 目に見える表記
2. パスの変更
3. cssのクラス名書き換え

• コンポーネント化

多分line-heightかpadding-topがかかってる

padding-topがかかってた。解消済み

• SCSSファイルの分割
  • reset.scss
  • header.scss
  • fixHeader.scss
  • blog.scss
  • footer.scss
  • article.scss

存在するカテゴリをリスト表示し、それぞれのカテゴリの記事一覧へのリンクもつける

• category-list.jsの作成
• 存在するカテゴリを取得するgraphql

• カテゴリに分けたうえでの、前後の記事へのリンクを追加する

• 存在するカテゴリを取得し表示する

• #55で作ったcategoyList.jsを利用

• /pages/categories.jsの作成

• トップページにリンク作成

最初1,845Byte

トップページに行ったときに、/page/1/にリダイレクトさせる

• gatsby-config.jsへのID記述
• 確認

マークダウン中のリンクを_blinkにする

やるかやらないか？

多分やらない。UX的にやらない方がいいと思うから。
やらない。やるとしたらファイルを開くとか画像を開くときだけ。

どのプラグインを使うか

gatsby-remark-external-linksでいける？
リンク

全部のリンクはしたくないから、選べないか？

できるのなら「外部リンクへ飛ぶ」みたいなアイコンをつけて区別する。
でもゴチャゴチャやるくらいならしたくない。

• 記事ページのスタイル
  • ヘッダーの文字小さい
  • テーブルの文字小さくする
  • h1、本文の文字が大きい気がする（1/27、h1→4.5rem、h2→3.8rem、h3→3rem、p→1.8rem）

• 記事に対応するタグを表示

ToDo

• article.scssの編集
• マークダウンの書き換え

ページパス

このページ

原因

ファイルパスは.jpgで指定しているが、リポジトリ上では.JPGで保存されている

どうする？

一度ローカルから画像を消してコミット、そのあと復活させて再度コミットさせたらいける？

サイトタイトルはpropsで渡すのではなく、header.jsの中で取得

• 文字小さい
• ファイル名の表示
• 行番号の表示