<!-- ここから目次r --> <section id="mokuji" class="up"> <nav> <h2>目次</h2> <ul> <li><span class="number">1.</span><a href="#section1">施術メニュー</a></li> <li><span class="number">2.</span><a href="#section2">料金</a></li> <li><span class="number">3.</span><a href="#section3">施設・スタッフ紹介</a></li> <li><span class="number">4.</span><a href="#section4">よくあるご質問</a></li> <li><span class="number">5.</span><a href="#section5">場所</a></li> </ul> </nav> </section>
cssフォルダのstyle.cssから「#mokuji」でテキスト検索してみて下さい。詳しい解説もあります。
上の画像、下の画像と2つ使っています。
上の画像は「images/bg_mokuji_top.png」で、下の画像は「images/bg_mokuji_bottom.png」です。
style.cssの「.number」でGoogle Fontsを指定しています。
フォント自体はcss冒頭で読み込んでいます。
Google Fontsを変更したい場合。
このテンプレートは同一ページ内リンクなので、ブロックごとにidをつけてそこに飛ぶ指定になっています。
例えば、
<a href="#section1">
というのは、同一ページ内の
id="section1"
に移動する指示になります。
(「#」と「id」は同じ意味ですが、使う場所によって使い分ける必要があります。)