マガジンのカバー画像

Gatsbyマスターコース

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

GatsbyCloudからNetlifyに移行する

先日、GatsbyCloudが提供を終了するというメールが届きました。 2023年の9月29日までにどこか…

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
8か月前
5

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
1

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
1

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
2

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
4

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

個人的にCSSってすごく読みにくいんですよね。 そんな時にはCSS-in-JSを使うことで、スタイルのコンポーネントを新しく作成することで、ちょっと読みやすくすることができます。 作成したコンポーネントをインポートすれば、他のページでも同じようなデザインができるようにもなって便利です。 CSS-in-JSライブラリであるEmotionを使うまずは必要なパッケージのインストールから始めます。 npm install gatsby-plugin-emotion @emot

にしまつ@マーケティン…

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
8

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
5

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
2

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前
2

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

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

にしまつ@マーケティング・サイエンティスト
にしまつ@マーケティング・サイエンティスト
2年前

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

前回の記事で、GatsbyでのGraphQLの使い方を学ぶことができました。 GraphQLを利用することで、プロジェクト内部のデータや外部サービスのデータに簡単にアクセスできることがわかりました。今回は、GraphQLでデータを取得して、ブログの記事ページを作成していきます。 Gatsbyでブログ記事を作成する考え方 Gatsbyでブログ記事を作成するには、２つやることがあります。１つはブログの記事を書くこと、もう１つはブログ記事のベースとなるテンプレートページを作成す

にしまつ@マーケティン…