Firebase + GatsbyJS でWebサイト作る　5　アイコン設定

4362 ワード

テキストリンク

ヘッダーとかの作り方は前回やったので、あとは適当に自分の好きなように編集するだけになります。
今度はアイコンを作ります。
アイコンというのは、

この「不等式botのWebSite」というタイトルの隣にある画像のことです。
ここの画像を変更します。今はデフォルトの状態なので、GatsbyJSのアイコンがそのまま貼ってある感じになります。

GatsbyJSでは、gatsby-config.jsにアイコンの設定が書いてあるので、
React Helmetを使って設定した<head>タグの中にアイコンの設定を書いても反映されないので、注意が必要です。

とりあえずGatsbyJSのアイコンを削除

/src/images/というフォルダの中にGatsbyJSのアイコンであるicon.pngという画像ファイルがあるので、これを削除します。
次に、適当にアイコンにしたい画像をこのフォルダの中に入れます。
今回はinequalitySymbol.pngという以下の画像ファイルをアイコンにします：

この画像ファイルはTeXの\geqで出てくる記号をスクショとって、
Macのプレビューで適当に「編集→楕円で選択→command+Kで切り取り」をしたものです。
縦横比が1:1じゃないですが、だいたい1:1なのでこれでいきます (注[1][2])。

gatsby-config.jsの編集

次に、gatsby-config.jsを編集します。
ここにアイコンの設定が書いてあるので、それを削除して新しいものに変更します：

gatsby-config.js

module.exports = {
  ... ,
  plugins: [{
    ... ,
    {
    resolve: 'gatsby-plugin-manifest',
    options: {
-      "icon": `src/images/icon.png`,
+      "icon": `src/images/inequalitySymbol.png`
      },
    }