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

2022年12月に目次を自動生成できるShopifyアプリをリリースしました。
無料でブログ記事をもっと読みやすく拡張します。
ぜひ一度お試しください。
2022年12月にリリースしたばかりの最新Shopifyアプリです。無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。引用元: RuffRuff 目次作成
下記の記事ではShopifyに目次を生成するアプリをご紹介していますので、ご参考にしてみてください。
まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。
Shopifyのブログ機能をフル活用しよう|機能や拡張アプリを紹介
Shopifyブログ記事内のh2とh3タグを抽出して、目次を自動生成するスクリプトを作成しました。
このような目次が生成できます。
主な機能は下記のとおりです。
コード全体はTsun Inc.のリポジトリをご覧ください。
以下で実装方法を詳しく解説していきます!
実装に入る前に「RuffRuff 目次作成」という無料で利用できる目次作成アプリをリリースしています。実装に入る前に一度アプリを導入し、無料で実装時間を節約しませんか?
名称 | RuffRuff 目次作成 | 本記事のソースコード |
---|---|---|
目次の自動生成 | ◯ | ◯ |
見出し選択 (目次に利用する) |
◯ h1~h6 |
✕ h2とh3のみ |
スクロール (Smooth Scroll) |
◯ | ✕ |
段落表示 | ◯ 3種類 |
✕ |
区切り線 | ◯ | ✕ |
字下げ (インデント) |
◯ | ◯ |
カラー変更 | ◯ | ◯ |
特定記事で目次非表示 | ◯ テンプレートを分けて対応 |
✕ |
目次の表示位置調整 |
◯ 3種類 |
✕ 最初の見出し上のみ |
ライブプレビュー | ◯ | ✕ |
※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。
今回の実装では
の2つの工程を行います。
どちらの工程もコード編集画面から行いますので、
を行い、コード編集画面を表示しておいてください。
KOMARIさんの Shopifyテーマのローカル開発環境 -Shopify CLI- の記事がとても参考になるので、テスト方法が気になる方はぜひチェックしてみてください!
上記のように、JavaScriptのコードをテーマに追加することで目次を自動で生成することができました。
目次部分のデザインや抽出するタグ、生成するタグのIDなど適宜修正して、お好みに合わせた形でご利用ください。
目次の自動生成する無料のShopifyアプリ「RuffRuff 目次作成」を作りました。
オリジナルデザインの目次を簡単にブログ記事に追加したい場合は一度お試しください。
2022年12月にリリースしたばかりの最新Shopifyアプリです。無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。引用元: RuffRuff 目次作成
料金
$0 / 月〜
機能
小笠原京平|株式会社Tsun CTO
ReactとFlutter等の開発経験を生かしてShopify開発に貢献していきます。
(経歴)
・2022年 Tsun Inc.共同創業
・2016年 ookami Inc.入社
・2012年 株式会社ワークスアプリケーションズ入社
2022年12月にタグ一覧を自動生成できるShopifyアプリをリリースしました。Shopifyストアに無料でタグ一覧&タグフィルターを出しませんか? ...
Shopifyストアの構築・運営を行っている中で、データ作業の大変さを日々感じているのではないでしょうか? 本記事では、データ作業の効率化にオススメのSh...
バナーとは バナー(Banner)は、日本語に直訳すると「のぼり」や「旗」という意味になります。 Shopifyストアにおけるバナーの使われ方は、「新商品...
EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。
{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}