shopifyはECサイト用のカートASPですが、CMS（WordPress等のホームページ管理ツール的な物です）としての役割も担っています。 その中にサイト運営上欠かせない要素として「ブログ」の機能もあるんですが、ブログ機能の初期からついている物は非常にシンプルな投稿機能だけを有している為、例えば冒頭で表示する「目次」の項目が設定出来なかったりします。 ただ、この下を見るとわかる通り、このブログには目次が付いていますよね？ こう言った機能は後からつけ足すことが可能です。さて、どうやってつけ足していくのでしょうか？と言うのが今回の記事の趣旨になります。 shopifyで制作する上では、結構痒い所だったりもするので、こう言うのはカスタマイズしてやっつけます！ 目次 いくつかある選択肢 まず前提として、ブログって何かと言うと、その記事内の上の方にあって「各見出しへリンクされている一覧項目」とでも言えばいいでしょうか？上にもあるので、この下にも少し画像で貼ってみるとこんなパーツです。 大きな見出しと、その下の階層にある小さな見出しがリンクされているのがわかるかと思います。 これの作り方は大きく分けると３通りに分ける事が出来ますので、その３つの要素を解説していきます。 頑張って作る方式 頑張って作る方式はやれば誰でも出来る方式です。目次の仕組み自体は非常に簡単で、単純に「アンカー」と呼ばれるリンクを付けているだけですから、手動で目次的な要素をブログ投稿機能から作成する事で可能です。 shopify初期機能のブログ投稿で「目次っぽい物」を作ってそこに「リンクを挿入」でリンクを作成して行けばいいのですが、この方法だとリンク先の見出しにもいちいちIDを振って行く必要があります。 こんな感じでブログ本文を作ったとしても、どうやってリンク先を判定するのでしょうか？その判定方式として活用されるのがhtml（ソースコード）内に書く必要がある「id」と言う存在ですが、このままの機能ではidが触れないので右上の「< >」こんなマークを押してソースコードを表示します。 するとこうなります。 赤線を引いてある所がidを追加する必要がある場所で、h2と言う大見出しの方には既にidを振ってみてますが、下のh3と言う小見出し要素にはまだidを付けていない状態です。 ご覧の通りhtmlなどの編集を普段しない方にはこの時点でまぁまぁ難易度が高いので、やれば出来ると言われても若干ハードルが高いかと思います。 それにブログを書く毎にidを振って行くのはとても手間に感じてしまうかと思います。 そこで、何とか自動化出来ない物だろうか？と考えた場合に出てくるのが２番目と３番目の方式です。 アプリを使う方法 ２つ目に考えられる方法としては、shopifyに数多あるアプリの中に「目次制作機能」ぐらいあるのではないか？と言う考えが出てきます。 そこで目次用のアプリを探してみると あれ？ないのかな？？と焦りますが、こういう時shopifyの場合は日本語アプリだけで諦めてはいけません。英語も検索してみましょう。 英語で目次はなんて言うのかgoogleで検索してみると「table of contents」と言う事なのでそのままその単語で検索してみます。 すると２つほど、それっぽい物が見つかるので片方を押してみたところ、出来る事は間違いなく目次の制作が作れそうですが・・・唯一の欠点として「有料」であると言う事が発覚します。 月額$2だけとは言え、目次の為に年間3,000円ぐらい払うのが果たしていいのかどうか・・・ましてアプリは英語の管理画面ですから、ちょっと面倒そうではあります。 １番目と違って自動化はされるので、手間代を考えれば全然払ってもいいラインかもしれませんが、ちょっと迷ってしまいますよね。そこで当ブログで３つ目の選択肢を採用しています。...
