コンテンツにスキップ
【2023年版】おすすめ Shopifyアプリ 30選
【2023】おすすめ Shopifyアプリ30選
Shopifyのブログ記事内に自動で目次を生成する

Shopifyのブログ記事内に自動で目次を生成する

2022年12月に目次を自動生成できるShopifyアプリをリリースしました。
無料でブログ記事をもっと読みやすく拡張します。

ぜひ一度お試しください。

RuffRuff 目次作成

2022年12月にリリースしたばかりの最新Shopifyアプリです。
無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

なぜ、作ろうと思ったのか?

  • ブログ記事の読みやすさを考えると目次は必須である
  • Shopifyの純正CMSでは目次を生成することが出来ない
  • 目次を生成できたとして、1記事ずつ手動で目次を挿入するのは手間がかかる

下記の記事ではShopifyに目次を生成するアプリをご紹介していますので、ご参考にしてみてください。

目次を生成できるShopifyアプリを紹介

まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。
Shopifyのブログ機能をフル活用しよう|機能や拡張アプリを紹介

作成したもの

Shopifyブログ記事内のh2とh3タグを抽出して、目次を自動生成するスクリプトを作成しました。
このような目次が生成できます。

目次の生成した参考例

主な機能は下記のとおりです。

  • ブログ記事内のh2とh3タグを元に目次を自動で生成
  • テーマ内でスクリプトを実行するため、すべてのブログ記事に反映
  • 目次部分のクリックで該当箇所までスクロール

コード全体はTsun Inc.のリポジトリをご覧ください。

以下で実装方法を詳しく解説していきます!

実装に入る前に(アプリとソースコードの比較)

実装に入る前に「RuffRuff 目次作成」という無料で利用できる目次作成アプリをリリースしています。実装に入る前に一度アプリを導入し、無料で実装時間を節約しませんか?

アプリとソースコードの機能比較

名称 RuffRuff 目次作成 本記事のソースコード
目次の自動生成
見出し選択
(目次に利用する)

h1~h6

h2とh3のみ
スクロール
(Smooth Scroll)
段落表示
3種類
区切り線
字下げ
(インデント)
カラー変更
特定記事で目次非表示
テンプレートを分けて対応
目次の表示位置調整
3種類

最初の見出し上のみ
ライブプレビュー

前提条件

対象読者

  • Shopifyのテーマ変更ができる
  • HTML、CSS、JavaScriptに関する簡単な知識がある

準備するもの

  • Dawnテーマ (v5.0.0で動作確認しましたが、以前のバージョンでも問題ないはずです)
  • ブログ記事 

実装

※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。

今回の実装では

  • 目次を自動生成するJavaScriptファイルを追加する
  • 上記JavaScriptが実行されるようにする

の2つの工程を行います。

どちらの工程もコード編集画面から行いますので、

  1. Shopifyの管理画面から オンラインストア > テーマ を選択
  2. アクション > コードを編集 を選択

を行い、コード編集画面を表示しておいてください。

JavaScriptファイルを追加する

  1. Assets > 新しいassetを追加を選択
  2. 空のファイルを作成する
  3. 名前: table-of-contents、ファイルタイプ: .js を入力し、アセットを追加する
  4. Assets一覧に作成されたtable-of-contents.jsを選択
  5. コードを貼り付けて、保存するを選択

JavaScriptが実行されるようにする

  1. Sections一覧からmain-article.liquidを選択
  2. ブログ記事のコンテンツ部分が挿入される箇所を下記のように変更

開発環境でのテスト

KOMARIさんの Shopifyテーマのローカル開発環境 -Shopify CLI- の記事がとても参考になるので、テスト方法が気になる方はぜひチェックしてみてください!

まとめ

上記のように、JavaScriptのコードをテーマに追加することで目次を自動で生成することができました。

目次部分のデザインや抽出するタグ、生成するタグのIDなど適宜修正して、お好みに合わせた形でご利用ください。

目次の自動生成する無料のShopifyアプリ「RuffRuff 目次作成」を作りました。

オリジナルデザインの目次を簡単にブログ記事に追加したい場合は一度お試しください。

【無料】RuffRuff 目次作成

2022年12月にリリースしたばかりの最新Shopifyアプリです。
無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

料金

$0 / 月〜

機能

  •  目次の自動生成
  •  目次に利用する見出しの選択(h1からh6の中から)
  •  タイトルの文言変更
  •  区切り線の有無を変更
  •  カラー変更(背景、枠、区切り線、タイトル、リンク)
  •  章番号の表記の変更(なし、点、数字の3種類から選択可能)
  •  字下げ(インデント)の有無を変更
  •  スクロールの有無を変更
  •  スクロールオフセットの調整
  •  ライブプレビュー
前の記事 Shopifyのブログ記事内にタグ一覧を追加する
次の記事 Shopify Liquidで配列から任意の要素を取り除いた配列を生成する
小笠原京平|株式会社Tsun CTO

執筆者

小笠原京平|株式会社Tsun CTO

ReactとFlutter等の開発経験を生かしてShopify開発に貢献していきます。

(経歴)
・2022年 Tsun Inc.共同創業
・2016年 ookami Inc.入社
・2012年 株式会社ワークスアプリケーションズ入社

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較