gatsby– category –
-
【GatsbyJS製ブログ】GatsbyにおけるGraphQLの基本を丁寧に説明
今回はGatsbyの目玉、GraphQLについてです。 このGraphQL、かなり便利なのですが「Gatsbyで扱うGraphQL」という意味で色々と使うときに注意する点があります。 そのあたりの解説をしながら、GatsbyでのGraphQLの扱い方について説明していきます。 【GraphQ... -
【Gatsby製ブログ】framer-motionでスクロールしたらフワッと表示させる
Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。 もちろんReactベースのGatsbyでも使うことができます。 私のGatsbyブログでもframer-motionでアニメーションをつけています。 framer-motionは自由度が高く、色々できる... -
【GatsbyJS製ブログ】ページを作るcreatePageの仕組みを理解する
Gatsbyでは、サイトをビルドする際に、gatsby-node.jsと言われるJSファイルで色々な情報を取得しながらページを作っていきます。 そのなかでも実際にページを作るcreatePageについてまとめていきます。 今回はcreatePageの使い方の確認＆まとめの健忘録記... -
【Gatsby製ブログ】framer-motionで好きなタイミングでアニメーション発火
Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。 もちろんReactベースのGatsbyでも使うことができます。 私のGatsbyブログでもframer-motionでアニメーションをつけています。 framer-motionは自由度が高く、色々できる... -
【Gatsby製ブログ】framer-motionでVariantsを使う！
Reactでアニメーションをつけるときにオススメのライブラリーがframer-motionです。 もちろんReactベースのGatsbyでも使うことができます。 私のGatsbyブログでもframer-motionでアニメーションをつけています。 framer-motionは自由度が高く、色々できる... -
【Gatsby製ブログ】framer-motionの基本的な使い方
今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。 Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営しているブログでもアニメーションをつけています。 あまり凝ったアニメーションはつけてい... -
【Gatsby製ブログ】FontAwesome？いやReact Iconsでアイコンを使う！
ブログを作っていたら、要所で「アイコン（とか…こんなのです。）を使いたいな…」ということがありますよね？ 今回はGatsbyにアイコンを導入する方法を説明します。 最初はFontAwesomeを使おうとしていたのですが、FontAwesomeよりももっと便利な「React I... -
【Gatsby製ブログ】Googleアナリティクス設定gatsby-plugin-google-gtag利用
Googleアナリティクスはブログ運営をする上で必須、といえるツールです。 当然Gatsby製ブログでもGoogleアナリティクスは必要になってきます。 この記事では、プラグイン「gatsby-plugin-google-gtag」を使ってGatsby製ブログにGoogleアナリティクスを設置... -
【GatsbyJS製ブログ】コピペで簡単！問い合わせフォームを設置する
ブログに必須の問い合わせフォーム。 ただ、GatsbyJSは「静的なサイトを作る」ので、問い合わせフォームは基本的に設置できないんですよね。 ですので、問い合わせのページに入力してもらったデータを、他のアンケートフォームなどのサービスに送る、とい... -
【GatsbyJS製ブログ】Gatsbyの勉強法
Gatsbyは日本語の情報が少なく、勉強がしにくい、という印象です。 この記事では、私がどのようにGatsbyを勉強してきたか、について紹介していきます。 よければ参考にしてみてください。 とはいえ、勉強方法については当たり前のようなことばかりですので...
