Zenn
Closed1

Gatsby Starterでブログ作成した後にやったこと

Gatsby.js
marushomarusho

gatsby-starterでブログを始める

gatsby-starterはGet your Gatsby site in 1 min.とあるように、

爆速で爆速なサイト構築ができてしまいます。

このブログもStarterを使って作成したのですが、テンプレートをそのまま使い続けるのはやっぱり寂しい。

デザインや機能を少しずつ付け加えながら、自分流にカスタマイズするのが楽しそうです。

Wordpressでよくある機能をGatsbyで実現する方法は、検索するとたくさん出てくるので
このブログに実装するついでに、この記事にまとめていこうと思います。


前提

Staterはgatsby-starter-delogを使っています。

他のStarterでも基本的には同じ構成かと思いますので、参考にしていただければ幸いです。


デプロイした後にやったこと


サイト情報の変更

ブログタイトルなどはsite-meta-data.jsonで変更できます。

私はNetlify CMS経由で修正しましたが、直接変更しても問題ないと思います。

site-meta-data.json

{
  "title": "ブログタイトル",
  "siteUrl": "<ブログURL>",
  "description": "ブログ概要",
  "home": {
    "title": "ホームに表示されるタイトル",
    "description": "ホームに表示される概要"
  }
}


ブックマーク時などに表示されるタイトルも修正するために、 gatsby-config.jsも自分のブログ情報に修正します。

デフォルトではDelog GatbsyJS Starterというタイトルになっています。
manifestファイルの各設定項目はこちら。

gatsby-config.js

...
{
resolve: `gatsby-plugin-manifest`,
options: {
  name: `Delog GatbsyJS Starter`,　 // ブログタイトル 
  short_name: `Delog`,  // ホーム画面追加時のブログタイトル
  start_url: `/`, // ブログのベースURL
  background_color: `#fff`,
  theme_color: `#381696`,
  display: `standalone`,
  icon: "src/images/icon.png",
},
}
...


favicon・OGP画像の変更

faviconとOGP画像は以下の画像を差し替えます

  • static/favicon.ico
  • src/images/icon.png
  • src/images/og.jpg


サイトカラーの変更

デフォルトカラーでもおしゃれですが、src/styles/global.scssを修正して自分なりに色を変えてみました。

ライトモードとダークモードが選べるStarterなので、それぞれ色を指定していきます。

src/styles/global.scss

body.light {
  --primary-color: #381696;
  --primary-text-color: #fff;
  --featured-bg: #493b8a;
  --featured-text: #fff;
  --secondary-color: #10072b;
  --background: #fff;
  --site-header: var(--background);
  --card-bg: #fff;
  --card-bdr: #eee;
  --card-shadow: #d5d5d5;
  --btn-bg: var(--background);
  --btn-bdr: #d3d6e7;
  --btn-text-color: #868892;
  --btn-hover-bg: var(--btn-bdr);
  --btn-hover-text-color: #00062b;
  --contact-bg: #f7f8fe;
  --contact-bdr: #d3d6e7;
  --input-bg: var(--background);
}
body.dark {
  --primary-color: #9984d5;
  --primary-text-color: #fff;
  --featured-bg: #66578d;
  --featured-text: #fff;
  --secondary-color: #66578d;
  --background: #0A041A;
  --text-color: rgba(255,255,255,0.88);
  --text-secondary-color: rgba(255,255,255,0.66);
  --site-header: var(--background);
  --card-bg: #181326;
  --card-bdr: #181326;
  --card-shadow: #020204;
  --btn-bg: var(--background);
  --btn-bdr: #d3d6e7;
  --btn-text-color: #868892;
  --btn-hover-bg: var(--btn-bdr);
  --btn-hover-text-color: #00062b;
  --contact-bg: var(--card-shadow);
  --contact-bdr: var(--card-bg);
  --input-bg: var(--card-bg);
}


カラーを選ぶツールはたくさんあるようで。。。

【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ

私はPicularというイメージした単語から色を提案してくれるサービスを使って、お気に入りの色を探しました。

このスクラップは2023/01/15にクローズされました