[Shopify]アプリなしでブログに目次をつける実装方法（コピペ可）

Shopifyで長めのブログ記事を書いていると、やはり最初に目次が欲しいなって思う時が多々あります。WordPressでブログを書いていた時はTOC（Table Of Contents）という プラグイン があったので活用していたのですが、Shopifyにはそれらしいアプリが見つからず。今回実装してしまおう！と思いたちました。

今回ご紹介していくのは、見出しを拾って目次を作成するjQueryコードです。ちょっと開発者向けの内容になっておりますので、HTML/CSS/JSちょっと分かるよ！くらいの方を読者として想定しています。

こちらで目次部分を挿入するコードをShopifyサイトに埋め込むことができますので、ご興味ある方はコンタクトページからお問い合わせいただいても大丈夫です。

ちなみに今回作成するのは下記のような目次です。（この記事執筆した後はこの部分に表示されているはず、、！）

ブログ記事の目次コードを作成する

ブログ記事に目次を追加するコードは下記です。jQueryの読み込みは必須ですので、theme.liquid等で読み込んでいない方は下記コードの処理が行われる前に読み込まれるように調整してください。

それでは、コピペ用のコードです。

上記のコードをDebutテーマであれば、article-template.liquid。もし他のテーマで該当ファイルが無い場合は、

という記載があるファイルの一番最後にコピペしましょう。

 これで、準備は完了です。

最初のh2タグの前に目次要素が追加されているはずです。

見え方はこのようなシンプルな感じになっております！ここで目次をクリックすると、該当セクションに飛ぶ作りになっています。ぜひご自身のShopifyストアに上記コードをコピペして、試して見てください。

目次にスムーススクロールを実装する

後は、目次内のリンクをクリックした際に、パッと移動するのが見にくいのでスムーススクロールも実装して見ましょう。

先ほどのjQueryコードの中に下記スムーススクロール部分を追加します。

これで、スクロールがスムーズになり、見やすい遷移にすることが可能になりました。

ブログ記事目次のデザイン調整を行う

最後にブログ記事の目次デザインを調整していきます。

目次ということが分かるように「目次」や「Contents」と最初に入れるのも良いですね。

先ほどのコードの

の部分を

に変更しましょう。

すると目次のタイトルをつけることができました。

「Contents」という文字が入っただけで、グッと目次っぽくなりましたね。そして、各見出し前にある"・（丸ポチ）"の部分が不要ですので、こちらも消去してしまいましょう。

ついでにざっとデザイン調整も含めたSCSSを記載して見ます。ざっと書いた部分、かつ、サラサラっと書いた部分なのでご了承を。

シンプルですが、こんな感じになります。

 Shopifyブログに目次（TOC）を作成する方法　まとめ

以上、Shopifyのブログ記事に目次を作成する方法でした。 Shopifyでブログ発信しているストアオーナーの方も多いと思いますので、ぜひ活用して見てください。

コピペ活用も構いませんのでデザイン調整やコード応用もしながら使うも良し、ご自身のブログで二次配布していただいても大丈夫です。（その際は当EC PENGUINブログを参照元としてご紹介くださいませ。）

それでは本日も良い1日を！