Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

gatsby-remark-autolink-headers の導入手順。GatsbyブログのHeadingタグにURLフラグメントを付ける

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

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

できるようにする事

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

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

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

add_plugin_autolink

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

追加されるHTML要素
<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 を書いてくれてますので そのまま使っても違和感ないです。素晴らしぃ!

gatsby-cofig.js(抜粋)
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フラグメント付きアドレスはちゃんと外部サイトからもジャンプできました。

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

SPA での URL hash へのジャンプ処理

SPA(Gatsby) でちゃんと動作するのかな?と恐れてましたが Chrome では問題なく動作しました。この辺りはブラウザ処理に依存します。 Firefox や Edge(Chromium版)でも同様に動作したので問題なさそうです。

スタイル(ご参考)

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

CSS定義。Header右側にアイコン表示。
.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 タグの右側です。 例として簡易的に左側に表示するには以下のようにスタイル定義すればOKです。

CSS定義。HEADING左側にアイコン表示
.urlhash-class {
  position: absolute;
  left: -13px;
}

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

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

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

Google Speed Insight

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

分類 導入前 導入後
モバイル 93点 94点
パソコン 83点 82点

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

Google Lighthouse

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

分類 導入前 導入後
Performance 92点 91点
Accessibility 95点 95点
BestPractices 100点 100点
SEO 98点 98点
PWA 有効 有効

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

あとがき

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

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

おしまい。

参考

変更履歴

  • 2020/10/21 Cover, eyecatch 画像作成
  • 2020/07/24 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
gatsby-remark-autolink-headers の導入手順。GatsbyブログのHeadingタグにURLフラグメントを付ける
gatsby-remark-autolink-headers の導入手順。GatsbyブログのHeadingタグにURLフラグメントを付ける
できるようにする事
できるようにする事
導入手順
導入手順
前提
前提
インストール
インストール
gatsby-config.js への設定追記
gatsby-config.js への設定追記
動作の確認
動作の確認
スタイル(ご参考)
スタイル(ご参考)
SEO やページ表示速度への影響
SEO やページ表示速度への影響
Google Speed Insight
Google Speed Insight
Google Lighthouse
Google Lighthouse
あとがき
あとがき
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020