10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、筋肉めがねです。

本サイトは、“gatsby-v2-starter-lumen”のテンプレートを使っていますが、2つ現時点で気になっていた箇所に変更を加えました。

以下、目次です。

リンク先を別タブで開く

幾つかのブログを見ると、markdownファイル内では、直接aタグのtarget=“_blank”とは設定できない、という事、そしてjavascriptを使って、この挙動を実現できる、と書いてありましたが、Gatsbyには既にこの仕様を実現できるpluginが準備されておりました。
という事で、このpluginをインストールします。

npm add gatsby-remark-external-links

そして、公式サイトのガイドライン通りに、gatsby-config.jsファイル内で以下のように設定します。

resolve: `gatsby-transformer-remark`,
options: {
    plugins: [
    {
        resolve: 'gatsby-remark-external-links',
        options: {
            target: '_blank',
            rel: 'noopener noreferrer',
        },
    },
...

公式サイト gatsby-remark-external-links

上のリンクの最後の方に書いてある通り、relは’noopenner noreferrer’としております。

リンクタグのデザイン変更

デフォルトでは、リンクの色を青く、下線が引いてありますよね。 その下線を取り、hover時に色が変わるようにscssで変更を加えました。

まずは、本サイト全体に使用できる共通のscssファイルの設定を行いました。

公式サイトに則り、“gatsby-plugin-sass”をインストールしました。

npm install --save node-sass gatsby-plugin-sass

そして、src直下にindex.scssファイルを作成し、ファイル内へ以下のコードを書きました。

a{
    text-decoration: none !important;
    transition: color 0.9s;
}
a:hover{
    color : #ff7043;
}

最後に、本サイトのroot直下にgatsby-browser.jsファイルを作り、ファイル内へ以下を記述しました。

import("./src/index.scss")

これで、リンクのhover時に、リンクの文字色がゆっくりとオレンジ色に変わるように変更できました。そして勿論リンクをクリックしたら、別タグでリンク先が開きます。

以下、参考にさせていただいたブログです。
Gatsbyで外部サイトへのリンクは別窓で開くようにした
Gatsby.js で Sass .sass .scss を使う
リンクタグのCSSまとめ！リンクの色の変更やオシャレな装飾方法を紹介

それでは、本日は以上です。ではでは。