当サイトは 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-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フラグメント付きアドレスはちゃんと外部サイトからもジャンプできました。
外部サイトからジャンプしてきた時の画面の表示場所も、ちゃんとページが生成された後にヘッダーの位置に飛んでくれます。
SPA(Gatsby) でちゃんと動作するのかな?と恐れてましたが Chrome では問題なく動作しました。この辺りはブラウザ処理に依存します。 Firefox や Edge(Chromium版)でも同様に動作したので問題なさそうです。
自分のサイトの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 タグの右側です。 例として簡易的に左側に表示するには以下のようにスタイル定義すればOKです。
.urlhash-class {
position: absolute;
left: -13px;
}
そこまで気にはしてないのですが、気になる方もいるかと思いますので、プラグイン導入前後で劣化などがないかを比較確認しました。
当サイトのブログページ - Gatsbyブログの環境変数でブログ記事の公開、非公開を制御する機能をつける方法 を対象に Google Light House や Google SpeedInsight で前後を 5 回計測してスコアを確認。
手軽にサイトの表示速度処理速度などを診断してくれる Google Speed Insight で当サイトのブログページを5回計測して平均値を比較しました。
分類 | 導入前 | 導入後 |
---|---|---|
モバイル | 93点 | 94点 |
パソコン | 83点 | 82点 |
影響なし。計測する時のネットワーク状況とかで左右される誤差のレベルだと思います。 モバイルも 90点~100点を行ったり来たり。
総合的なページの技術的な観点での状態をスコアしてくれる Google Lighthouse で当サイトのブログページを5回計測して平均値を比較しましました。
分類 | 導入前 | 導入後 |
---|---|---|
Performance | 92点 | 91点 |
Accessibility | 95点 | 95点 |
BestPractices | 100点 | 100点 |
SEO | 98点 | 98点 |
PWA | 有効 | 有効 |
Google Speed Insight 同様、Performanceは影響誤差レベル。 他の項目は 1 点も変化なし。
これでブログがより使いやすくなりました。自分のサイト内から過去の記事へのリンクを貼るときも、ドンピシャで記事の位置を指定できると読み手として読みやすくなりますしいいですね!
プラグイン作者さまに感謝です。
おしまい。
コメント、ありがとうございます。
ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。
Twitter:@NodachiSoft_jpお名前:以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前: