マガジンのカバー画像

Gatsbyマスターコース

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

#react

Gatsbyウェブサイトでアニメーションを動かす[Tween24.js編]

前回[Framer-Motion]でアニメーションを動かしてみましたが、[Tween24.js]を活用することで同…

GatsbyウェブサイトでGoogleFontsを使う方法

ウェブサイトのデザインをしたいときに、フォントを変えるとけっこう雰囲気が変わったりします…

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

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

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

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

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

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

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

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

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

Gatsbyウェブサイトの見栄えをよくするために、アニメーションを使えるようにしてみましょう。 やっぱりウェブサイト上に動くものがあると印象的になりますからね。…とはいえ、ウェブサイトが読みにくくなったりもするので、使いすぎには注意したいところですね。 個人的には、最初に表示するときだけアニメーションが動くようにして、それ以降は動かない…というのがちょうど良い感じです。 framer-motionのインストール今回は、Gatsbyウェブサイトのプロジェクトが既にある前提

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

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

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

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

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

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

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

前回の記事では、ブログ記事を作成することができました。 ブログ記事にはコメント欄をつけた…

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

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

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

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

GatsbyでのGraphQLの使い方

前回までの記事で、Gatsbyでページを作成する方法について学ぶことができました。 新しいページに文字と画像を表示できて、後はデザインを追加すれば、Gatsbyのウェブサイトは制作できてしまいます。ただ、このウェブサイトにたくさん新しいページを作りたくなった場合、少し話は変わってきます。 例えば、ブログの記事を書きたいときに、新しいページのために毎回コーディングする必要はないはずです。WordPressで記事を書いているときのように、記事だけ追加すればブログが更新されて欲