Shopifyのブログ記事にコーディングなしで簡単に目次を表示する方法を、Shopifyアプリ「RuffRuff 目次作成」を使って紹介します。無料で利用でき、ブログ記事だけでなく商品ページやコレクション、Pagesで作成したページにも目次を表示できるため、ショップオーナーの方々に便利なアプリとなっています。
Shopifyアプリ「RuffRuff 目次作成」とは？
RuffRuff 目次作成は、コンテンツ内の見出しを利用して目次を自動で生成し、表示してくれるShopifyアプリです。無料から利用することができ、ブログ記事だけでなく、商品ページやコレクションページ、Pagesで作成したページなどにあらゆるページで目次を表示することが出来ます。また、日本で初めて最高品質アプリの証である「Built for Shopify」を獲得したShopifyアプリです。
料金プラン
Shopifyのブログ記事に目次を自動生成し、表示するのはRuffRuff 目次作成の無料プランから可能です。
| プラン名 | フリープラン | ライトプラン | レギュラープラン |
|---|---|---|---|
| 料金 | 無料 | 月額3.99ドル | 月額9.99ドル |
| ブログ記事に目次を表示 | ◯ | ◯ | ◯ |
| 商品に目次を表示 | ✕ | ✕ | ◯ |
| コレクションに目次を表示 | ✕ | ✕ | ◯ |
| ページに目次を表示 | ✕ | ✕ | ◯ |
| 目次のデザイン変更 | ◯ | ◯ | ◯ |
| 目次の表示位置の変更 | ◯ | ◯ | ◯ |
| ライブプレビュー | ◯ | ◯ | ◯ |
| ブランドの非表示 (RuffRuff App by Tsun) | ✕ | ◯ | ◯ |
| 見出しID生成方法の変更（見出しを利用したアンカーリンク） | ✕ | ◯ | ◯ |
| 開閉ボタンの表示 | ✕ | ◯ | ◯ |
| 初期表示行数の変更 | ✕ | ◯ | ◯ |
アプリを利用してブログ記事に目次を表示する方法
事前準備
① Shopifyのブログ機能を利用して、見出しの存在するブログ記事をご準備してください。
見出しは、下記添付画像のハイライト箇所のようにコンテンツエディターの「A」をクリックすることで、ブログ記事内に追加することができます。
② RuffRuff 目次作成をインストールしてください。
本章の設定は「RuffRuff 目次作成」のインストールが完了している状態からの説明となりますので、まだインストールが済んでいない方は、【アプリのインストールはこちら】 よりインストールをお願いします。
アプリ側の設定方法
ShopifyテーマがOS2.0（Online Store 2.0）の場合
ブログ記事に目次を表示するまでの設定方法は下記2ステップのみです
① 目次に利用する見出しを選ぶ
② Shopifyテーマにアクセスし、アプリブロックを追加する
Shopifyテーマが以前のテーマ（Vintageテーマ）の場合
ブログ記事に目次を表示するまでの設定方法は下記2ステップのみです
① 目次に利用する見出しを選ぶ
② Shopifyテーマにアクセスし、埋め込みアプリを有効化する
最後に
今回はShopifyアプリ「RuffRuff 目次作成」を利用してブログ記事に目次を自動で表示する方法を紹介しました。本アプリは無料プランから利用可能で、ブログ記事だけでなく商品ページやコレクション、Pagesで作成したページにも目次を表示できる機能が魅力です。ショップオーナーの方々の記事構成を見やすくするのに役立つアプリだと思います。 実際に「RuffRuff 目次作成」を使ってみて、ブログ記事の目次を表示してみてはいかがでしょうか。
関連記事
Discussion