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

 Shopify ブログ記事 目次をつける 方法

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

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

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

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

 

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

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

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

<script>
$(function(){
 $(".blog-article-template h2").first().before("<div id='toc-shopify'><ul></ul></div>")
 var counter = 1;
 $(".blog-article-template h2").each(function() {
  var toclink = "toclink" + counter;
  $(this).attr("id", toclink);
  var toctext = $(this).text();
  var element = "<li><a href='#" + toclink + "'>" + toctext + "</a></li>";
  $("#toc-shopify ul").append(element);
  counter++;
 });
});
</script>

 

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

{{ article.content }}

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

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

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

目次 Shopify テーマ

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

 

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

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

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

$('a[href^="#"]').click(function(){
 var speed = 800;
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
});

 

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

 

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

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

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

先ほどのコードの

$(".blog-article-template h2").first().before("<div id='toc-shopify'><ul></ul></div>")

 

の部分を

$(".blog-article-template h2").first().before("<div id='toc-shopify'><p class='toc-title'>Contents</p><ul></ul></div>")

 

に変更しましょう。

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

Shopify Contents 目次 タイトル追加

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

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

 

#toc-shopify{
 padding: 30px 20px;
 border: 3px solid black;
 border-radius: 15px;

 .toc-title{
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 10px;
 }

 ul{
  list-style: decimal-leading-zero;
  width: 80%;
  margin: auto;
  padding-left: 50px;
 }

 li{
  padding: 7px 10px;
 }

 a{
  border: none;
 }
}

 

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

Shopify 目次 デザイン調整後

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

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

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

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

コメントを残す

コメントは表示される前に承認される必要があります。