マガジンのカバー画像

Gatsbyマスターコース

20
本気で学ぶウェブサイト制作。静的サイトジェネレーターであるGatsbyを使ったホームページを作成する方法を教えます。
運営しているクリエイター

2021年11月の記事一覧

Gatsbyでパンくずリストを作る

ウェブサイトの中でいろんなページを遷移している時に、ひとつ上の階層に移りたいと思うことが…

GatsbyウェブサイトをCSS-in-JSでデザインする

個人的にCSSってすごく読みにくいんですよね。 そんな時にはCSS-in-JSを使うことで、スタイル…

Gatsbyウェブサイトにアニメーションを追加する[Framer-Motion]

Gatsbyウェブサイトの見栄えをよくするために、アニメーションを使えるようにしてみましょう。…

Gatsbyに問い合わせフォームを追加する[GoogleForms]

静的ウェブサイトであるGatsbyでは、フォームを直接実装することはできません。そのため外部サ…

Gatsbyサイトにページネーションを追加する

ブログの記事がだんだん増えてくると、1つのページ内に全ての記事を表示することが困難になっ…

GatsbyのMDXブログ記事に画像を追加する

前回の記事で、Gatsbyのブログ記事を作成しました。 これでブログが完成!…でもまだ文章しか…

Gatsbyウェブサイトのブログ記事にコメント欄をつける[CommentBox.io]

前回の記事では、ブログ記事を作成することができました。 ブログ記事にはコメント欄をつけたい人も多いでしょう。でも、Gatsbyで制作したウェブサイトのような静的ウェブサイトでは、コメント欄を直接実装することはできません。 そのため、こうしたウェブサイトにコメントをつけることができるサービスがたくさんあります。ちょっと調べただけでも、以下のようなサービスがありました。 Disqus welcomments.io ReplyBox Commento CommentB

Gatsbyブログにカテゴリやタグを追加する

ブログの記事が増えてくると、読みたい分野の記事を探すのが大変になってきます。そうなると記…

Gatsbyでデータを外部から持ってきて記事を生成する

前回の記事で、GatsbyでのGraphQLの使い方を学ぶことができました。 GraphQLを利用することで…

GatsbyでのGraphQLの使い方

前回までの記事で、Gatsbyでページを作成する方法について学ぶことができました。 新しいペー…

Gatsbyウェブサイトに画像を追加する(Static Image)

Gatsbyのウェブサイトを作成し、公開できるようになりました。ただ、ここまでまだ画像を1枚も…

Gatsby V3からV4にアップデートする

Gatsbyは最近V4になりました。 今回は、Gatsby V3で作成したサイトをGatsby V4に更新する方法…

GatsbyウェブサイトをGitHub経由で公開する

前回の記事でGatsbyの最初のウェブサイトを作成し始めました。 まだほとんど何も作っていない…

Gatsbyで新規ページをコンポーネントを使って作成する

前回の記事では、Gatsbyのインストールと最初のウェブサイトの作成を行いました。 「index.jsを変更したら、ページの内容が変わったけど…新しいページはどうやって作ったらいいんだろう?」 あなたもそう考えている頃かもしれません。新しいページを作ることができるようになれば、簡単にGatsbyを使える気分になってきますからね! さて、さっそくあなたのウェブサイトのトップページを作ってみましょう。 Gatsbyでトップページを作成するまず最初に前回作成したあなたのプロ