当サイトは Gatsby でマークダウンを利用してブログを書いています。いろんなプラグインを開発者様が公開してくださってるので、大抵の機能は検索すればすでにあります。

今回はGatsby のプラグイン「gatsby-remark-autolink-headers」を導入した流れを記録しています。

できるようにする事

マークダウンで記載しているブログ内の <h1> タグなどのタグに、URLフラグメント付きのリンクを付けることができます。

マークダウン側では特になにも意識することはありません。自動的にプラグインがリンクを付与してくれます。

イメージこんな感じのものです。

<h1>タグの後に以下のような<a>タグリンクとSVG画像が追加されました。

<a href="#できるようにする事"
   aria-label="できるようにする事 permalink"
   class="urlhash-class after"><svg 画像のデータ></svg>
</a>

導入手順

前提

Gatsby にマークダウンプラグイン（gatsby-transformer-remark）を導入してページ生成していること。

インストール

公式で紹介されている手順に従っていきます。

npm 経由で簡単に導入できます。

> npm install --save gatsby-remark-autolink-headers

無事にパッケージが追加されたら使うための設定を書いていきましょー。

gatsby-config.js への設定追記

以下のように gatsby-remark-autolink-headers への参照とオプションを 記載してあげます。表示する icon は公式がサンプルの SVG を書いてくれてますので そのまま使っても違和感ないです。素晴らしぃ！

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
  　　：中略
    { // prismjs よりも上で設定する！      resolve: `gatsby-remark-autolink-headers`,      options: {        offsetY: `100`, // 横方向のオフセット位置(単位はピクセル)指定        icon: `<img src='xxxx.gif' />`, // SVG もOK        className: `urlhash-class`,     // 追加される Aタグのクラス名        maintainCase: true,   // 付与するURLフラグメントの英字を大文字に        removeAccents: true,  // 生成するHEADINGタグ内のIDからアクセント消去        isIconAfterHeader: true,  // icon を付与する        elements: [`h1`,`h2`],  // どのタグを対象にするか      }    },    {
    resolve: 'gatsby-remark-prismjs',
    options: {
      ：以下略

ブログ内のコードにスタイルを適用してくれるプラグイン（gatsby-remark-prismjs）を使っている方は、prismjs の定義より先に定義を書いてあげる必要がありますので注意。

URLフラグメントの詳細については Mozilla - URL.hashを。定義については(英語)whatwg - dom-url-hashをご参照ください。

動作の確認

今回生成された URLフラグメント付きアドレスはちゃんと外部サイトからもジャンプできました。

外部サイトからジャンプしてきた時の画面の表示場所も、ちゃんとページが生成された後にヘッダーの位置に飛んでくれます。

スタイル（ご参考）

自分のサイトのCSS定義（スタイル定義）についてはご参考程度にどうぞ。 ヘッダの右側に鎖アイコンSVG を表示します。 ホバーするとにゅっと大きくなるアニメーション付き。

.urlhash-class {
  text-decoration: none;
  border-bottom: 0;
  transition: all 0.15s ease-out;
  svg { fill: rgb(100, 100, 100); }
  &:hover{
    transform: scale( 1.6, 1.6);
    svg { fill: rgb(123, 60, 229); }
    transition: all 0.15s ease-out;
  }
}

記号を表示する場所はデフォルトだと、HEADING タグの右側です。 例として簡易的に左側に表示するには以下のようにスタイル定義すればＯＫです。

.urlhash-class {
  position: absolute;
  left: -13px;
}

SEO やページ表示速度への影響

そこまで気にはしてないのですが、気になる方もいるかと思いますので、プラグイン導入前後で劣化などがないかを比較確認しました。

当サイトのブログページ - Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する機能をつける方法 を対象に Google Light House や Google SpeedInsight で前後を 5 回計測してスコアを確認。

Google Speed Insight

手軽にサイトの表示速度処理速度などを診断してくれる Google Speed Insight で当サイトのブログページを5回計測して平均値を比較しました。

影響なし。計測する時のネットワーク状況とかで左右される誤差のレベルだと思います。 モバイルも 90点～100点を行ったり来たり。

Google Lighthouse

総合的なページの技術的な観点での状態をスコアしてくれる Google Lighthouse で当サイトのブログページを5回計測して平均値を比較しましました。

Google Speed Insight 同様、Performanceは影響誤差レベル。 他の項目は 1 点も変化なし。

あとがき

これでブログがより使いやすくなりました。自分のサイト内から過去の記事へのリンクを貼るときも、ドンピシャで記事の位置を指定できると読み手として読みやすくなりますしいいですね！

プラグイン作者さまに感謝です。

おしまい。

参考

• (英語)Gatsby公式 - packages - gatsby-remark-autolink-headers
• (英語)GitHub - gatsby - gatsby-remark-autolink-headers - README.md
• Google Speed Insight
• Google Lighthouse

変更履歴

• 2020/10/21 Cover, eyecatch 画像作成
• 2020/07/24 初版公開