Webflow Collectionsにアンカーリンクを追加する方法

Webflowは気に入っていますが、ひとつ困った点があります。ブログをコレクションとして運用している場合、ブログ記事にセクションリンク(アンカーリンク)を追加できないのです。たとえば、冒頭の目次でリンクをクリックすると、該当のセクションまでページ内でジャンプする、といった機能のことです。

回避策はいくつか見かけました。その一つが、埋め込み機能を使って記事本文にコードを追加する方法ですが、手作業が多く、かなり面倒です。そこで、ちょっとしたハックをご紹介します。ブログ記事のテンプレートファイルにJavascriptを一度追加するだけで、そのコレクション内のすべての記事にアンカーリンクを追加できるようになります。

Note: this code will add anchor links into all of your H2 headings on all of your collection pages. It's not a big issue really, it just means all of your H2 headings become links but if you prefer not to do this then you may want to find an alternative method.

ステップ1:コレクションページにコードを追加する

コレクションには必ずテンプレートページがあります。これはコレクション内のすべてのアイテムに使われるテンプレートで、このページを変更すると、コレクションのすべてのアイテムに反映されます。そこで、このページのヘッダーにJavascriptを少し追加し、すべてのブログ記事に適用されるようにします。ただし、適用されるのはこのテンプレートを使うページだけで、サイトのほかの部分は変わりません。

このページを開いたら、設定に移動し、<head>と書かれた箇所までスクロールしてください。

ステップ2:Javascriptコードを追加する

次に、以下のコードをコピーして、ボックスに貼り付けてください。コードの内容は、このあとすぐに説明します。

仕組み

このコードは、Webページの中からH2見出しに設定されているものをすべて探します。アンカーリンクを設定する対象は、通常このH2見出しだからです。もちろん、h2をh3などに変更すれば、別の見出しにも対応するようにスクリプトを変更できます。

すべての見出しを取得すると、見出しのリストを順に処理し、次のようなIDを追加します。

コードの次の部分では、アンカーリンク要素を作成して見出し要素の前に追加します。これにより、その要素へリンクできるようになります。リンクの参照先には、上記で作成したheadingIDを使います。たとえば、セクション1のアンカーリンクは#section-1となり、以降も同様です。

Javascriptに詳しくなくても、完全に理解する必要はありませんので、ご心配なく。ChatGPTにコードを貼り付けて、説明してもらうこともできます。

ステップ3:テストドメインに公開してH2のスタイルを確認する

次に、これらの変更をステージング用またはテスト用のドメインに公開します。通常はURLに「webflow」が含まれているドメインです。メインドメインと競合しないよう、このドメインはGoogleのインデックスから削除しておくことをおすすめします。

公開したら、見出しの見た目を確認してください。見出しにリンクを追加したため、リンクのような見た目になっているはずです。その場合は、そのページ専用に、H2リンク用のカスタムスタイルをブログ記事のテンプレートページに追加するとよいでしょう。コードで見ると、基本的な例は次のようになります。

このコードも、テンプレートページの<head>部分にコピーします。ただし、動作させるには、前後を<style> </style>タグで囲む必要があります。その後、通常の見出しに合わせてスタイルを調整できます。

ステップ4:ページの冒頭にアンカーを追加する

これで完了したら、ページ上部にアンカーリンクを追加できます。ページ上のテキストにリンクを設定し、セクション1には #section-1、セクション2には #section-2 というリンクを使うだけです。以降のセクションも同様です。

このスクリプトの優れた点は、作成できる数に上限がないことです。見出しがH2に設定されていれば、リンクが作成されるため、アンカーとして使えます。

当社のサイトでとても役立ったので、ほかの方のお役にも立てればうれしいです。分かりにくい点があれば、お気軽にお問い合わせください。指示どおりにコードをコピーし、必要に応じてH2のスタイルを調整すれば、あとはアンカーを追加して正しい参照リンクを使うだけです。楽しいリンク作りを!