マガジンのカバー画像

Gatsbyマスターコース

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

#ウェブサイト

Gatsbyウェブサイトのメタデータ設定

SEO的にメタデータを設定しておくのは大切なことです。 メタデータを設定することで、Google…

Gatsbyウェブサイトのページ遷移時にエフェクトを追加する

Gatsbyのウェブサイトを触っているとわかりますが、ページの読み込みが非常に早いです。そのた…

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

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

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

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

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

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

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

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

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

ブログの記事がだんだん増えてくると、1つのページ内に全ての記事を表示することが困難になってきます。ページを表示する時間が遅くなったり、視認性が悪くなったりもします。 そうした場合にページを分割する方法を知っておくと、一覧をみやすくすることができます。 商品がたくさんある場合に、1ページに表示する商品数を制限したりすることにも使えます。 今回は、ページネーションをGatsbyで実装する方法について説明していきます。 Gatsbyにページネーションを追加する 前回の記事で

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

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

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の最初のウェブサイトを作成し始めました。 まだほとんど何も作っていないので、内容がスカスカな状態ではありますが、この段階で一度ウェブサイトを公開してしまいましょう。 最終的なアウトプットまでのプロセスを作っておけば、後は少しずつウェブサイトを改良していけば、いずれ完成されたウェブサイトが公開されることになります。 また、時間をかけずに更新することができるため、バグが発見されてもすぐに直すことができますし、全く動かなくなってしまったとしても、すぐに