Shopifyブログに目次を追加する3つの方法【2026年版】｜手動・テーマ編集・アプリ、どれを選ぶか
Shopifyブログに目次を追加する3つの方法【2026年版】｜手動・テーマ編集・アプリ、どれを選ぶか
執筆: クルル
Shopifyの標準ブログに、目次を自動でつける機能はありません。追加する方法は「手動HTML」「テーマ編集」「アプリ」の3つです。この記事では、導入の楽さだけでなく「記事を書くたびの手間」と「テーマを変えたとき何が起きるか」まで含めて、3つの方法を比較します。
長い記事に目次があると、読者は読みたい場所へすぐ移動できます。ところがShopifyの記事エディタを開いても、目次を挿入するボタンは見当たりません。
結論から言うと、目次は標準機能では追加できません。ただし方法は3つあり、どれも今日から始められます。どれを選ぶかは「記事の本数」と「テーマを保守できる人がいるか」で決まります。
注：「標準に目次機能はない」という前提は、Shopify公式ヘルプ（ブログ記事の作成・リッチテキストエディタ）を2026年8月に確認した結果に基づきます。この記事は、Shopifyブログ向けアプリを開発している Sant Studio が、実装者の視点で書いています。
前提：Shopify標準ブログに目次機能はない
Shopify公式ヘルプのブログ記事作成ページに、目次機能の記載はありません（2026年8月確認）。
記事エディタ（リッチテキストエディタ）は、見出し・リンク・画像・表などの装飾に対応しています。しかし「見出しから目次を自動生成する」機能は含まれていません。
目次に限らず、Shopify標準ブログには「できること・できないこと」の線引きがあります。全体像は早見表つきの記事にまとめているので、あわせてどうぞ。
Shopify標準ブログでできること・できないこと【2026年版・早見表付き】
方法1：手動HTML（アンカーリンク）｜無料・アプリなし・毎回手作業
いちばん確実で費用ゼロの方法が、記事本文にアンカーリンクを手書きする方法です。アプリなしで、どのテーマでも動きます。
Shopifyの記事エディタにはHTML編集ボタンがあり、本文をHTMLとして直接編集できます。これを使って、見出しに「行き先の目印（id）」を付け、記事冒頭にそこへ飛ぶリンクのリストを置きます。
手順（3ステップ）
- 記事エディタでリッチテキストエディタのHTML編集ボタンを押し、HTML表示に切り替える
- 各見出しのタグに id を付ける
- 記事の冒頭に、その id へ飛ぶリンクのリストを置く
見出しに id を付ける例：
<h2 id="how-to-choose">ギフトの選び方</h2>
<h2 id="wrapping">ラッピングについて</h2>記事冒頭に置く目次リストの例：
<ul>
<li><a href="#how-to-choose">ギフトの選び方</a></li>
<li><a href="#wrapping">ラッピングについて</a></li>
</ul>これだけで、クリックすると該当の見出しへジャンプする目次が完成します。
手動方式の注意点
- 記事ごとに毎回、手作業で作る必要があります。見出しを足したり削ったりしたら、目次側も自分で直します
- id は同じ記事内で重複しないように付けます（重複すると最初の1つにしか飛びません）
- デザインは本文と同じ見た目になります。枠や背景で目立たせたい場合は、その装飾も自分でHTMLに書くことになります
向いているのは、記事数が少なく更新頻度も低いストアです。月に何本も書くなら、この手作業が積み重なっていきます。
方法2：テーマ編集で自動生成｜無料・要コード・保守は自分持ち
テーマのコードに手を入れて、記事本文の見出しから目次を自動生成する方法です。一度作れば、記事を書くたびの手作業はなくなります。
仕組みとしては、記事テンプレートにコードを追加し、本文中の見出し（h2・h3）を読み取って目次のリストを組み立てます。具体的な書き方はテーマの構造によって変わりますが、考え方はどのテーマでも共通です。
費用はかからず、挙動も自分で完全にコントロールできます。ただし、アプリを開発している立場から正直に言うと、この方式の本当のコストは「作ったあと」に来ます。
実装者の視点：テーマ編集方式で後から効いてくること
- テーマの乗り換えや大型アップデートのとき、追加したコードの移植や再実装が必要になります（更新時の挙動はテーマによって異なります）
- 実装した人が制作会社や前の担当者だと、その人がいなくなった時点で誰も触れないコードになりがちです
- 本文で h2・h3 を正しく使い分けている前提の仕組みです。見出しの使い方が崩れている記事では、目次も崩れます
向いているのは、テーマを継続して保守できる体制があるストアです。社内やパートナーにコードを見られる人がいるなら、有力な選択肢になります。
方法3：アプリで追加｜ノーコード・保守はアプリ側
目次アプリをインストールし、テーマエディタで有効化する方法です。コードは書かず、以降は記事ごとに目次が自動生成されます。
この方式の本質は「自動生成」だけではありません。テーマの更新やShopify側の変更に追従する保守を、アプリ開発者が引き受けるという点です。方法2で挙げた「作ったあとのコスト」を、外に出せます。
どのアプリを選ぶかの深掘りは、この記事ではしません。目次の定番アプリと、成果の可視化まで扱うアプリの棲み分けは、別記事で整理しています。
なお、私たちが開発している SwirlKit Blog では、目次はStarter（無料プラン）に含まれています。
3方式の比較早見表
「導入の楽さ」だけでなく、書くたびの手間・テーマ変更時・成果計測との接続まで並べた一覧です。
| 手動HTML | テーマ編集 | アプリ | |
|---|---|---|---|
| 費用 | 無料 | 無料（自分で実装する場合） | 無料プランのあるアプリも（SwirlKitはStarter無料） |
| 初期の手間 | 小（HTMLをコピペ） | 大（コード実装） | 小（インストール＋有効化） |
| 記事を書くたびの手間 | あり（毎回手作業） | なし（自動生成） | なし（自動生成） |
| テーマを変えたとき | 目次は本文の一部なのでそのまま残る | コードの移植・再実装が必要になる場合あり | 新テーマで再有効化する程度（追従はアプリ側） |
| やめるとき何が残るか | 本文のHTMLだけ（テーマは無傷） | テーマ内にコードが残る（削除も自分で） | アプリによる（導入前に要確認） |
| 成果計測との接続 | なし（別途用意） | なし（別途用意） | アプリによっては同じアプリで反応・売上まで |
表の読み方
どれが優れているという話ではなく、記事の本数と保守体制で最適解が変わります。月1本以下なら手動HTMLで十分です。継続的に書くなら、テーマ編集かアプリで自動化する価値があります。
判断軸として大事なのは「入れるとき」より「やめるとき・変えるときに何が残るか」です。アプリのアンインストール時に何が残るかの確認方法は、アプリの選び方の記事で基準として詳しく扱っています。
目次をつけた「その次」｜読みやすさの先に、反応と売上
目次は「読みやすさ」の入口です。次に見たいのは、読みやすくした記事が実際に読まれたか・成果につながったかです。
目次で離脱を減らすのは、あくまで手段です。ブログを続けるほど、「どの記事が読者に刺さったのか」「どの記事が売上につながったのか」を知りたくなります。
Shopify標準では、記事への「いいね」も、記事別の売上も見えません。それぞれ補い方を単独の記事で解説しています。
- 読者の反応を数字で見る → Shopifyブログの回遊・再訪を増やす「いいね（反応ボタン）」活用術【ノーコード】
- 記事ごとの売上を見る → Shopifyブログの売上、記事ごとに“効果測定”する方法【ダッシュボード実例あり】
よくある質問（FAQ）
Q. Shopifyのブログに目次を無料でつけられますか？
つけられます。手動HTMLは費用ゼロ、テーマ編集も自分で実装すれば無料です。アプリにも無料プランを持つものがあり、SwirlKit Blog の場合は目次がStarter（無料）に含まれます。
Q. コードの知識は必要ですか？
方法によります。手動HTMLは、この記事のコードをコピーして書き換える程度のHTMLの基礎で足ります。テーマ編集はLiquidやJavaScriptの知識が前提です。アプリはコード不要です。
Q. テーマを変えたら目次はどうなりますか？
手動HTMLの目次は記事本文の一部なので、テーマを変えてもそのまま残ります。テーマ編集で作った目次は、新テーマへのコード移植や再実装が必要になる場合があります。アプリの場合は、新テーマでアプリを再度有効化すれば引き続き使えます（手順はアプリの案内に従ってください）。
Q. 目次をつけるとSEOに有利になりますか？
「目次で順位が上がる」と公式に確認できる情報は見つかっていません。分かっているのは、目次がページ内リンクとして機能し、長い記事の読みやすさと回遊のしやすさに寄与することです。順位への効果を前提にせず、まず読者のための設備として考えるのをおすすめします。
Q. アプリを入れると記事ページは重くなりませんか？
アプリによります。確認すべきなのは「そのアプリのスクリプトが、どのページで読み込まれるか」です。確認の観点はアプリの選び方の記事で解説しており、SwirlKit Blog については同記事でブロック別の読み込み範囲の実測を公開しています。
▶ 目次は無料プランで、今日から自動生成できます
SwirlKit Blog は、目次の自動生成と著者プロフィールをStarter（無料）で使えます。テーマのコードは触らず、インストールと有効化だけで始められます。
この記事について
ブログ記事の目次・いいね・記事ごとの売上計測など、Shopify標準ブログにない機能を補うアプリ「SwirlKit Blog」を開発している Sant Studio が書いています。「標準に目次機能はない」ことを含め、本文の前提はShopify公式ヘルプで確認したうえで執筆しています。