銀ねこアトリエ
  • Home
  • Blog
    • ウェブ制作
    • CMS
    • SEO対策・デジタルマーケ
    • 海外ノマド生活
    • キャリアアップ
    • かみーゆ徒然記
  • Mind Journey
  • About Me
    • かみーゆの本棚
  • Contact
Gatsbyブログサイト移行物語~ブログ記事、カテゴリ、タグ一覧の出力~ のサムネイル
  1. 海外ノマドブログ
  2. ウェブ制作
  3. React
  4. Gatsbyブログサイト移行物語~ブログ...
SHARE
Facebook

Gatsbyブログサイト移行物語~ブログ記事、カテゴリ、タグ一覧の出力~

公開日:
2020.12.03
メンテナンス日:
2026.03.26
  • # React
広告
広告
広告

Cropper.js 使い方|画像のリサイズ・ダウンロードをJSで実装

Cropper.js 使い方|画像のリサイズ・ダウンロードをJSで実装
2023.12.28
  • # JavaScript

これだけ覚えておくと便利!フロントエンジニアのためのコマンド(ライン)

これだけ覚えておくと便利!フロントエンジニアのためのコマンド(ライン)
2014.09.10
  • # コマンド

Netlify + WordPress で HeadlessCMSを作る - 環境構築 -

Netlify + WordPress で HeadlessCMSを作る - 環境構築 -
2025.01.10
  • # Next.js
  • # React
  • # WordPress

Gatsbyブログサイト移行物語~パンくずリストを追加する~

Gatsbyブログサイト移行物語~パンくずリストを追加する~
2022.01.04
  • # React

便利なのに使ってないの?!CSSプロパティ5選

便利なのに使ってないの?!CSSプロパティ5選
2020.11.03
  • # CSS

Gatsbyホットリロード中他のディバイスからアクセスする方法

Gatsbyホットリロード中他のディバイスからアクセスする方法
2020.12.07
  • # npm
広告

この記事のサマリー

  1. 今までのGatsbyの記事と注意点
    1. このシリーズではテーマGatsby Starter Blogを改造
    2. 今回やりたいこと
  2. src/pageディレクトリーにあるindex.jsを複製
  3. gatsby-node.jsで一覧を作成するためのコードを書く
    1. テンプレートを使ってブログ記事の一覧を生成する
  4. pageTypeがblogの記事のみを取得する
  5. サムネを出力するためのコンポーネント作成
    1. styled-componentsで見た目をきれいにする
  6. カテゴリを追加する
  7. 記事詳細にカテゴリやタグのリンクを追加する
  8. まとめ

記事を探す

  • セブ拠点の日系Web制作会社 Lenz
  • 銀ねこ Mind Journey
  • YouTubeチャンネル
  • 広告
  • Home
  • Blog
    • ウェブ制作
    • CMS
    • SEO対策・デジタルマーケ
    • 海外ノマド生活
    • キャリアアップ
    • かみーゆ徒然記
  • Mind Journey
  • About Me
    • かみーゆの本棚
  • Contact
  • Policies
  • Lenz

© 海外ノマドエンジニアの暮らしと移住ログ【銀ねこアトリエ】