お尋ねさせていただきます。

1つ目についてですが、サイトを見る限りもう少し作りこまれてから回答したほうが良いかなと思ってます。

と言うのは、まず、それぞれの必要な要素を追加した上で、スクリプトを組むほうが後からの修正がなくなるのと仕様を統一できるだろうと思うからです。

まず必要なこととして、ターゲットとなる要素はどうするかが最重要です。わいひらさんが参考リンクで提案されているのはページ内リンクで、クリックしたら即座にそのリンクのハッシュまで飛びます。

例えば、グローバルメニューに以下のようなリンクがあったとして、
<a href="http://www.simamu.pw/#goods">Goods</a>

ターゲットになる見出し部分に
<h1 id="goods" class="entry-title"><center>GOODS</center><!--––トップページ––--></h1>

このように設定されていれば、href=”http://www.simamu.pw/の部分は無視してトップページ内のgoodsが表示されます。もしこのリンクのアドレスが別ページであった場合でも、そのページのハッシュに飛びます。無い場合は無視されます。

質問の内容からすると、トップページ内にそれぞれのターゲットを作ってそのグローバルメニューはリンクとして機能させず、ターゲットまでスクロールして欲しいと言うことなんだろうと思いますが、これを実現するためにはjQueryでスクロールさせる処理を書く必要があり、どのリンクはページの遷移を無効にするかがまず必要なのと、ターゲットにどのような文字列があるかが必要になります。
これはどこか前に書いたような記憶がありますが。

つまりスクリプト自体は簡単に作れるわけですが、どのリンクがトリガーで、どのIDなりがターゲットであるかを決めておく必要があるわけです。

なので、まず決めて欲しいのは、見出しなら見出しにどんなIDなり「印」となるものをつけておくかを考えてつけて下さい。

例えば、
<h1 id="goods" class="entry-title"><center>GOODS</center><!--––トップページ––--></h1>
なら、idが印になります。idは同名のidをページ内に複数入れることはできません。実質はできますがしないようにする事になっています。
idが別で何かに使用されるなら、data属性もあります。

<h1 id="goods" class="entry-title" data-target="goods"><center>GOODS</center><!--––トップページ––--></h1>
これでもよいです。

印は何でも構いませんがそのターゲットが重複しないことが前提で、重複さえしていなければclassでも良いです。

<h1 class="entry-title goods"><center>GOODS</center><!--––トップページ––--></h1>
こんなのでも良いわけです。この.goodsは識別用のクラスなのでスタイルを持ちませんが、持たせても良いです。

ここをどうするかをいろいろ考えて下さい。今後ターゲットの種類が増えた時に自分が管理しやすいように、あるいはわかりやすいようにすればよいかと思います。この部分の仕様が変わらなければ後は対応しているグローバルリンクを無効にしてページ内スクロールさせる処理を書くだけです。
この場合、グローバルリンクはスクロール用のリンクになりますから、該当の記事に飛ぶ場合は、スクロールして表示されるターゲット部分に該当のリンクがないといけません。

ただまぁこれらは実現できますが、比較的ターゲットのアイテム(記事)が多いサイトでは有効(※)ですけれども、少ない場合は逆に面倒くさいだけになりますので、ユーザビリティあたりも考えなくてはいけません。
面倒くさくなるというのは、本来該当ページにその内容が書いてあるのに、わざわざスクロールさせてリンクを誘導するのに1クッション挟むという部分です。
普通は、こういったギミックよりも1発で該当ページに移動したほうが便利ですよね。なので、スクロールさせて表示するターゲットに何かしらの意味があるかどうかもあわせて考えてスタイルする必要があります。

※ アイテム数が多いサイトではおそらくグローバルメニューを使わず別の方法でトリガーを作ると思います。サブメニュー的な何かとか。

Hidekichi様
わいひら様
色々ご教授、アドバイスありがとうございます。
質問してから、悔しくコツコツと独りで試行錯誤しながらだいぶ納得のいく感じになってきました。
ですが、どうしてもグローバルメニューのところから、目的の記事までスクロールするのができません。
どうか、教えてください。
やりたいことは
例：グローバルメニューの「Movie」をクリック
すると、見出しの「Music Video」のところまでスクロールで移動する。
ということをやりたいです。
Easy Smooth Scroll Linksというプラグインを入れても使えていないのかできず、

//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;

というのを入れてもうまくできません。

どうかお願いします。

まずそのスクリプトでは永久にスクロールさせることはできません。
なぜなら、リンクをクリックしたらページが遷移してしまうからです。

またjQuery('a[href^=#]')この指定もあまり良くありません。項目が増えた時に困ったりするだろうと思います。

考え方としては、
・デフォルトのページ遷移を停止させる
・ターゲットのオフセットを調べる
・スクロールさせる

こんな感じですが、スクロールさせるのは関数で別途処理させたほうが色々便利です。そのため、まずクリックされたら、リンクがページ遷移させるのを止めるようにして、ターゲットのオフセットを抽出する所までがまず第一段階。
取得したオフセットにスクロールさせるのが第二段階かと思います。

サンプル: クリックした任意の箇所までスクロール | jsFiddle
※ jQuery 3.1.0対応済み

サンプルをザックリ作りましたが、サイトのほうでターゲットをどうするか等を決めておかないといけないのは前の回答の通りです。それに合わせてスクリプトを作らないといけません。
結局難しいのはそこだけなんですよ。ターゲットをどう抽出するか、どう指定するか、それだけです。

> リンクをクリックしたらページが遷移してしまうからです。

これで対象外のリンクはどうするかですが、例えばhrefに#があればスクロール、無い場合はlocation.hrefでページ遷移という具合に仕分ける必要があります。

メニューに#があるかを調べて、ある場合は.scroll等のクラスを入れて仕分けるというのも良いかと思います。
.scrollクラスがついていればスクロールさせる、付いていなければ普通のリンクと言う具合に仕分けられます。ページ内リンク等で#を利用していないのであれば、アドレスに#があるかどうかでも判別できると思います。

ここらも仕様次第でどうとでもできます。

そもそもグローバルメニューを利用するのが案外面倒な部分なので、グローバルメニューではなく、スクロールに追従するサブメニューを作ったほうが何かと簡単だろうとは思います。そうすれば、各見出しを行ったり来たりをスクロールですることができます。

通常、こういったサブメニューはTOC等のリンクみたいなものです。どうせTOCはページ内のリンクですから、メニュー作る所まではTOCでやらせて(流用して)、ページ内で移動させる時にスクロールにすればよいだけです。

これらサブメニューはCSSでも、jQueryででもページのスクロールに追従して一定の位置にすることはできますから、TOCのように記事上部に固定などという使い勝手が良いのか悪いのかわからない仕様よりは便利かと思います。

そもそもスクロールさせるのが便利かどうかは別の話としてですが。

サンプルで作っていただいたものを、header.phpに貼ってはみました。
それとメニューには#はなかったのでどうしたらいいのかわかりませんでした。
といった感じにしたらいいのでしょうか？

$("h3").each(function(i) {
      var str = "#" + $(this).attr("id");
      $("#test").find("ul li a").eq(i).attr("href", str);
    });

    //クリックした時にスクロールさせる処理
    $("#test").find("ul li a").on("click", function(e) {

> h1の部分にスクロールさせるので、h3の部分はh1に変えました。

h1は普通サイトタイトルで、記事内にh1があるとアレではなかろうかと思うんですが、まぁそこらは好きにしてもらってよいです。例えば、見出しは、h1であろうとh3であろうとclassなりをつけておけばcssで同じ見た目にできるのでどちらでもよいわけです。ただしこれがSEOの観念から言うと、h1にはその意味があって、それに従いつつ利用するのが吉です。

> test…

これは何にでも当てはめることができる部分です。つまり、なくても良い部分です。
必要なのは、「どこの何」が必要であって、それを調べるためにtestと言うIDを入れてあるだけです。
Simplicityの場合なら、#the-contentとしておくと書いた記事の中の見出しと言うふうに場所を限定できます。

jQueryはjavascriptのライブラリですから、javascriptのgetElementByID()と言うのが検索最速で、IDは重複がない事から(が前提なので)対象が見つかったら即それが対象になります。ここからIDから走査するのが速いとされています。
最近のブラウザでは、querySelector()でjQueryのIDやclassのような検索ができますが、最速なのはgetElementByID()に変わりないので、どちらにせよIDから探すほうが良いわけです。

で、「どこの何」というのは、#testの中のulのliのaなわけです。
ここで(質問の部分で)何をしているかというと、見出しにつけたIDをそれぞれ調べて取得し、リストの中のaのhrefに「#なんちゃら」と言う値を入れています。

つまり、元々、

<li><a href="#">Goods1</a></li>

とあった箇所に、見出しのID(<h3 id="goods1">Goods1</h3>)からidを抽出して「#goods1」と言う文字列を作り、

<li><a href="#goods1">Goods1</a></li>

こういうふうになるようにリンクの値を書き換えています。
つまりターゲットとなるスクロール先の見出しに、idが設定してあってそれが何かわかれば、質問の処理は不要です。逆に例えば、

<h3 id="goods1" class="scrollTarget">Goods1</h3>

このように書いておいて、jQueryでは、h3をそれぞれ調べて、h3にscrollTargetがあれば、そのIDを返すということもできます。このh3の部分は記事内に書かれますから自分で好きに付けられる部分です。スクロールさせる要素(ターゲット)が増えれば<h3 id="item2" class="scrollTarget">Goods1</h3>と言う感じにIDを任意につけていけばよいだけです。

これらをスクリプトで書くと、

サンプル: .scrollTargetと入っている見出しを抽出してメニューにする | jsFiddle

こんな感じになります。

htmlの部分で、scrollTargetが入っているものだけメニューとして表示されているかと思います。またサブメニュー的なものを表示するulには中身が何も入っていないということにも注目して下さい。スクロールする部分のメニューは見出しから作るわけです。

で、このulはどのようにすればよいかですが、通常記事編集で書いたものはSimplicityでいうと、記事タイトルの下に入ります。このulのリストをどこに出すのが良いかは各々スタイルや考えがあると思うので、ここらに出したいと言うような仕様が決まっていないと、こうすれば良いというような答えが書けませんが、例えば、

<ul class="scrollMenu"></ul>

というのをスクロールさせたい記事の最初にでも書いておけばそこにメニューが表示されます。
もし、記事表示部分ではなく、別の箇所に入れたいというのがあれば、セレクタを調べてサンプルで言うと、

//メイン
  $(function() {

の中に、希望する指定セレクタの前後等を指定して<ul class="scrollMenu"></ul>を挿入すればよいです。例えば、記事タイトル下なら編集画面の最初で良いですが、グローバルメニューの下に出したいとすれば、

$(function() {
  $("#navi").after("<ul class='scrollMenu'></ul>");

と言うのを書けば、#naviの下にulが挿入されます。もちろんここを変更すれば、サンプルで言う、

$("#test").find("ul").append("<li><a href="+hash+">"+text+"</a></li>");
は、
$(".scrollMenu").append("<li><a href="+hash+">"+text+"</a></li>");
に変わりますし、

$("#test").find("ul li a").on("click", function(e) {
も同様に、
$(".scrollMenu").find("li a").on("click", function(e) {
と言う具合に変わります。

例えばグローバルナビの下に入れて、画面がスクロールして、メニューが隠れたら画面上部に固定されるというような事も別途処理を書けば可能になります。
結局、何をどういうふうにデザインしたいかが決まっていればさっくり作れるのですが、どういう用途や意図で利用されるのかは僕らはわかりませんので、どうすれば最適かというのも言えません。

で、これらはサブメニューを作ってスクロールさせる方法ですが、グローバルメニューのリンクの値を書き換えてでもできなくはないと思います。ただし、現在どうなっていて、これからどうしたいか等も添えて具体的なページ情報がないと抽象的なサンプルでしか回答できないので、そこらはページ作りが進んだら質問してもらえればどうすれば良いかは答えられるかと思います。

サブメニューを作ってやる場合にはそのメニューが画面内に表示されていれば、マウスのホイールやタッチムーブ等をさせなくてもターゲットまでクリックひとつでスクロールできるというのが長所です。逆に画面内に表示されている必要があるというのが短所で、ホィールをクルクルすればいいじゃないとか、タッチムーブすればすぐじゃんと言うような状況になれば実装する必要性は薄れます。

解答ありがとうございます。
頭がパンクしてしまい、simplicityのどのファイルのどの部分から何を調べ、
どこのファイルのどの部分に書いていけばいいかよくわからなくなっています。

>結局、何をどういうふうにデザインしたいかが決まっていればさっくり作れるのですが、どういう用途や意図で利用されるのかは僕らはわかりませんので、どうすれば最適かというのも言えません。

っとおっしゃってくださいましたが、
それについては
http://chetfaker.com
と同様のサイトを作りたいと思っているので、
使い勝手など今後不便に感じることなどあるとは思いますが、
まずは同じものを作れるようになってから、そこからカスタマイズしていきたいと思っています。
なので、どうしたら自分のサイトhttp://www.simamu.pwの場合どうしたらいいかと思っています。

グローバルメニューのMovieから
同じところのMusicVideoの部分まで飛ぶにはどういうふうにしたらいいでしょうか。
手とり足取り状態で教えないといけないという、大変お手間をかけてしまいますがどうかよろしくお願いします。

> どこのファイルのどの部分に書いていけばいいか

jQueryは全て子テーマjavascript.jsです。他に書くとしたら親テーマjavascript.jsですが、アップデートで上書き更新されてしまうので、子テーマjavascript.js以外に選択肢はないかと思います。
jQueryは予めjQueryが読み込まれてからしか動作しません。別途スクリプトを読み込むということはできますが、必ずjQueryが読み込まれているかを確認してから外部のファイルを読み込むことになります。そうしないとエラーが出て正しく機能しません。
これらは、wordpressの場合、wp_enqueue_scriptと言う関数でjQueryに読み込むファイルが依存しているかどうかを指定することができるんですけれども、Simplicityのjavascript.jsはwp_enqueue_scriptでjQueryが読み込まれてからしかjavascript.jsが読み込まれませんから、読み込み順序の問題はjavascript.jsに書けば問題ありません。

ここらから、jQueryは全て子テーマjavascript.jsですと言う答えになるわけです。

どうしてもという場合は、script.phpをいじくって、新たに外部ファイルに書いたjQueryを読み込むようにすると言う感じですが、ここまでする必要はありません。
内容が干渉(コンフリクト=衝突)しないように即時関数で書いているのもポイントです。

cssは子テーマstyle.cssです。これも環境(完全レスポンシブのONあるいはOFF等)によっては子テーマmobile.cssやらと分けても良いですが基本style.cssで問題ないかと思います。

見出しは部分は編集画面で書きますし、他に書きようがないのですが、場合によっては子テーマfunctions.phpで何かしらカスタマイズされている場合もあるので、ここらは何とも言えません。結局出力されたhtmlに対してjQueryをいじくるわけですからhtmlがどのように出力されているかがまず重要な点です。
見出しにidを加えたりdata属性を加えたりも、どのようにhtmlが出力されているかだけの話です。

サイトを見ると、見出し部分にstyle属性でスタイルされていますが、これは見出しに任意のidなりclassを入れて、子テーマstyle.cssでやる方がベターです。

> http://chetfaker.com と同じようなサイトを作りたい

同じようなことをやるのであればwordpressは使わないほうが簡単に作れますが、wordpressで、かつSimplicityでやる場合は、考え方を変えないといけません。そもそもグローバルメニューでhttp://chetfaker.comのスクロールリンクのメニューを作ろうとする場合は逆にややこしい場面があったりします。
なので、サブメニューで同様の仕組みを作ったらどうですか？と言う提案をしているわけです。グローバルメニュー自体は使わないでできます(非表示にしても良い)し、使った場合でも、用途を分けて併用することができます。

例を挙げれば、グローバルメニューはその記事へのリンクとして配置しておき通常の機能を持たせておきます。その上でグローバルメニューの下にサブメニューを追加して、それの中のリンクをクリックしたらページ内の該当部分へスクロールするという感じにしたりです。
別にサブメニューはグローバルメニューの下である必要もありません。記事内に入れても良いですし、サイドからパネルで表示することもできますし、モーダルで表示することもできます。ここらはデザインの問題です。

なぜグローバルメニューを直接スクロールさせるメニューにしないのか(オススメしないのか)は理由があります。
スクロールさせる項目がグローバルメニューに増えたら、それに合わせてスクリプトを書きなおさなければならないというのが1つ、他には、wordpressは本来、記事単位で管理されてますよね？つまりトップページにリストがあったり、何かしらの商品の紹介などがあったとしても、それらがサムネイル等とそのタイトルで作られていたとしても基本それらをクリックすると記事に飛び、そこで商品やその記事の詳細等が見れるようになってます。
wordpressがブログツールだからこそなんですが、この機能は例えばカテゴリ管理であったり、タグ管理等wordpressと言うかCMSを利用する上で通常のhtmlのサイトを作るよりも便利に使える点です。それら(記事単位の管理)を利用しないのであればwordpressを使う利点が無いと言っても過言ではありません。

なので、グローバルメニューは本来の機能を残しつつ、ページのデザインをした方が良いのではないですか？と言う提案です。
参考サイトと同じようなものをwordpressで作るのはもちろんできます。できますが、参考サイトと同じようなものならwordpressを使う必要がないと言うのもあるわけです。折角wordpressで作るのであれば、その良い部分は残しつつ、かつ参考サイトと同じようなギミックを取り入れたサイト作りをされてはどうですか？と言うことから、ページのデザインをまずして、後からスクロールさせるためのメニュー等に追加が出た場合でもそれに対応できるようなスクリプトを作ったほうが良いと言うことなだけなんですよ。

記事を追加しても管理できるのがwordpressの良い点じゃないですか？それにあわせてグローバルメニューにも項目を追加できるでしょう？
今のサイトの状態から内容に変化が無いというのであれば希望通りに実現することはできますが、変化はありきと考えてデザインするのが良いと思うんですよ。

これらを踏まえて、
> グローバルメニューのMovieから
> 同じところのMusicVideoの部分まで飛ぶには
> どういうふうにしたらいいでしょうか。

この問には、確か前にも書いたと思いますが、これ以上メニューの項目が増えないかどうかを決める必要があるというのを書いたように思うんですが、movieだけスクロールさせる固定仕様ならそれを狙い撃ちしてリンクを無効化して、あるいはリンクを書き変えてページ内のスクロールにすることはできます。

しかし、僕がページを全部デザインしてからされたほうが良いのではないですか？と言っていたのは、例として出されているサイトはメニューに色々と項目があり、それぞれにスクロールしてますよね？movieがスクロールできるようになったら、次はsongも入れてみようと言う感じになったりすると思うんですよ。

こういうふうに後から条件を追加されると、スクリプトを書きなおさなくてはいけなくなるわけです。なので必要なものを全部とまでは言いませんがある程度作った上で、仕様が決まってからスクリプトを作ったほうが良いのではないですか？と何度なく書いているわけです。
これを是非理解していただきたい。

movieしかスクロールさせない(グローバルメニューにスクロールさせる項目が今後追加されない)というのであれば、完全に狙い撃ちしてスクリプトを作ることはできます。

2つ目のサンプルでは、見出し側に情報を入れてその情報を読み取ることでトリガーとなるメニューの値を変えています。これを応用してグローバルメニューのリンクをまず無効化し、リンクの値を書き換えれば後はターゲットまでスクロールさせるだけなのです。

ここで問題となるのが、「グローバルメニューのリンクをまず無効化」をしてしまうので、ページの遷移が欲しい場合にはそれぞれを何かしらの条件で仕分ける必要があって、それをどうするかを決めないといけないと言うのが問題点です。
グローバルメニューは外観→メニューで各記事を貼っ付けてるだけですから、これ自体のリンクの内容をいじくるのは逆に難しい話になります。a hrefの内容とかその他諸々。

なので、グローバルメニューではなく、スクロール用のサブメニューを作ったほうが簡単で、かつスクロールしたいものだけ抽出できるというのが2つ目のサンプルのメリットです。で、その抽出したリンクを貼り付けるにはulを任意の場所に入れる必要があると言うのも書きましたが、これはページをどうデザインするかでどこでも好きな場所に入れることができ、またスタイルすることができます。

これらはwordpressの機能とそれらを利用する際に、質問の参考サイトのギミックを取り入れるためにどのようにすれば実現可能であるかの提案です。

少なくともスクロールさせるのがmovieだけなら現状でもさっくりサンプルを作ることはできますが、項目が増えた場合はそのままでは対応できないのと、対応するならご自身でやっていただく必要があるという感じになってしまうので、できればスクリプトを作る際に、ページがどのようにデザインされて項目が追加されるのかの仕様が確定してからスクリプトを作ったほうが、結局Sっちさんの手間が減るということになると言うのを念頭に置いて下さい。

それが決まれば、それに合わせてスクリプトを作ることはできます。

Hidekichi様

全文丁寧に読ませていただきました。
ようやくおっしゃっていた意味、私自身がどれだけ頭が固くなっていたのかがわかりました。
参考にしているサイトを作ろうと思ったら、wordpressじゃなくても作れるし、むしろそっちのほうが簡単だったりするんじゃないかと思いました。
ですが、管理の面ではwordpressのほうが圧倒的に便利だなと思いました。

おっしゃっていた、movieからMusicVideoに飛ばすというだけ、これだけならばいいということでしたね。
今後も色々追加したりすることも必ず出てくるので、だとしたらHidekichi様がおっしゃっていたように、
グローバルメニューだけではなく、サブメニューを作ったほうがいい。根本的なデザインから考えたほうがいいということですね。
ようやく理解し決めました。
グローバルメニューだけでスクロールはいちいちスクリプトを書き直したりと手間が増えるため、
wordpressのsimplicityを活かすべく、グローバルメニューの下にサブメニューを作ることにしました。
サイドに作ったりは考えているデザイン的には少し離れてしまうような気もするので、
グローバルメニューの下に作りたいと思います。

ではこの場合はどうしたらよろしいでしょうか。
もう本当に、言っていただいていたことを実感し、すごい気持ちになっています。
感謝しています。
言っていただいていた、wordpressを活かした場合のパターンのサンプルを交えつつ教えていただけませんか？
よろしくお願いいたします。

少し話変わりますが、やりとりするうえでHidekichi様がこっちのほうが楽と思う手段がありましたら、そっちでもやりとりするので、何かあればおっしゃってください。
メール、LINE、skypeなどなんでも大丈夫です。
直接ここにさらすのは危険だと思うので、一回捨てアドなどを通してなどでも構いません。
Hidekichi様の負担にならないようにとの、今できる私からの気遣いです。
それではよろしくお願いいたします。

まずスクリプトを作るにあたって、記事内の見出しまわりの統一化をして下さい。

#listの部分を見ると、それぞれの見出し付近に#the-contentが見えることから、全文表示をされてこのリスト表示になっているのかと思います。

wordpress的に言うと、全文表示の際は表示に必要な項目の後にmoreタグを入れることで「続きを読む」と言うのが表示できます。つまり、記事自体をもっと細かく書くことができるということです。表示したい内容を記事上部に書いておき、その感想やそこから派生する情報は続きを読む(moreタグ)以降に書いておいて記事へ誘導すると言う感じです。

なぜこれを今さら言うのかと言いますと、まず記事が例えば広告のバナーだけであったり、動画がひとつだけの記事よりも、ちゃんとそこに内容があって、カテゴリやタグに基づいた記事が存在することがSEO的に重要です。
例えば「Song」でそれは何が目的でそこにSoundCloudが貼っ付けてあるのか、その貼っ付けた曲は何なのか等の説明や解説が必要なわけです。それがあって記事として成立します。

また.entry-titleの部分のh1見出しがdisplay: none;で非表示になっています。これは本来SEO的にはタブーな処理です。h1と言うのは大見出しであって、それがその記事の何たるかを示すものですから、h1を利用することにも問題がありますけれども、display: none;で非表示にするのは頂けません。

この後で、更にh1にstyleとして、Songが再度入っています。

ここのあたりは、どうすればよいのかですが、タイトルを表示させたくないと言うのであれば、.entry-titleを非表示にするのはまぁ良しとして、次のSongの一部styleタグでアンダーラインが入っているような場所は、h1ではなく、h2やh3を利用するべきです。

例えば、

h2.stylingTitle {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 117%;
}
h2.stylingTitle span {
  border-bottom: solid 4px;
}

と言うようなcssを子テーマstyle.cssに書いておいて、実際の記事の中では、

<h2 class="stylingTitle">
  <span>So</span>ng
</h2>

こうすれば同等のことができると思います。h2.stylingTitleはpositionであったり、h2から継承するであろうborder-left等を打ち消す必要があるかも知れませんが、ここらは試し試しcssに追加していけばよいです。

例えば次の見出しのMusic Videoの部分であれば、

<h2 id="movie" class="stylingTitle">
  <span>Mus</span>ic Video
</h2>

とするだけです。このMusicVideoの見出しはスクロールの対象と考えられているので、id=movieが入っています。しかしこれだけでは、対象がid=movie以外に増えた場合に対応できませんので、例えば

<h2 id="movie" class="stylingTitle scrollTarget">
  <span>Mus</span>ic Video
</h2>

このようにクラスも入れておくと、jQuery側では、h2をそれぞれ調べながら、classにscrollTargetがある場合にそのidを抽出するということができるようになります。scrollTarget自体はスタイルを持たないただの識別用のクラスです。
逆にスクロール対象の記事は何かしら色などを付けるという場合には、このscrollTargetにスタイルすれば良いようになります。

仮にSongもスクロールターゲットとする場合は、

<h2 id="song" class="stylingTitle scrollTarget">
  <span>So</span>ng
</h2>

このようにすればよいです。わかりやすいように改行を入れていますが、ワンライナーで書いても良いです。
<h2 id="song" class="stylingTitle scrollTarget"><span>So</span>ng</h2>
こんな感じで。

ここまでのポイントは、

• .entry-titleはやむなしにdisplay:none;にする
  • SEO的には難有りですが、SEOとかよりも内容を優先させるべきです
  • .entry-titleに.stylingTitleとidを入れることでもできるがh1を利用しているのでどっちにしろSEO的にはマイナス評価になるでしょうから、entry-titleとは別に見出しを作るのはOKとする
• スタイルする見出しはh2もしくはh3で.stylingTitleクラスを新設する
  • jQueryでの走査を容易にするためと、h1を重複させてSEO的に問題になるのをできるだけカバーするため
• タグ内にstyle属性でスタイルするとcssで上書き等がややこしくなるために、予めstyle.cssでスタイルを作っておき、それを適用するようにする
• スクロールするターゲットにはscrollTargetクラス(あるいは他の任意のクラス)を追加する
  • scrollTargetクラスを入れた場合は必ずその見出しに重複しない一意のIDをつける事
  • このidがスクロールのターゲットとなる位置を調べるの利用されます

ひとまずこんな感じで統一してもらえると色々助かります。統一したルールがあれば、項目が増えてもそのルールに則っていればスクリプト側で対応できるようになります。

現状では、スクリプトでスクロールするターゲットの位置を調べるのがMovieだけなら、#movieの位置を調べてそこまでスクロールさせればよいわけですけれども、他の項目が追加された時に、#movie以外のidが入ったとしてもそれにスクリプトが対応することができません。

そのために、何かしら統一したルールに従って見出しを作ることで、その位置を調べられる「印」を見つけることができるようになります。上記で言えば、h2の.scrollTargetと、そのh2のidが印になります。
.scrollTargetが付いていないh2は対象から外れますので、サブメニューには表示されませんし、統一した書き方で書きなおせば、全てをスクロールのターゲットにすることも可能です。

ひとまずここらを実際のサイトに反映してみた下さい。そしたらスクリプトが作れますので、サンプルでどういう動作をするか確認しながら、実装することが可能になるかと思います。

Hidekichi様

ありがとうございます。
まずやったことは子テーマstyle.cssに以下を記入しました。
http://codepen.io/stti/pen/NAzwvw

そして記事内は全部でこういう風になりました。
上記のサイトのHTMLのものです。

という風にさせていただきました。
ですがここでテキストからビジュアルで確認をすると以下の2点の問題が起こりました。
1つ目が見出しが反映されていない。
2つ目が<span>で囲っていたのにSpanが消えてしまいました。

イメージでは下みたいにする予定です。

こうするうえでは、画像の上にentry-tytleが上にきたりするので、非表示にしていて、
1カラムで表示したく、トップページの各カテゴリは常に最新の記事で、よりそのカテゴリのことについてよくみるには詳細というボタンを用意して、他ページに飛ばしていけたらと思っています。
要するにグローバルメニューのMovieをクリックすると
まずトップページのMusicvideoまで自動でスクロールされ、
MusicVideoをもっとみたいとなったら詳細というボタンを押して他のページに飛ばせたらいいなと思っています。

教えていただいたところで、まだできていない部分があるとしたら理解できないでいると思うので、
どうぞ教えてください。
合っているとしたら、次の作業だと思われるスクロールする手順をお願いします。
また何か見ておきたいソースなどありましたら言ってください。

画像がエラーでてるみたいですが、右クリックでアドレスコピーしていただいて、新しいタブで張り付けていただいたらみれました。
お手数おかけします。

サンプル: 自動でスクロールターゲットのメニューを作ってそこにスクロールする | codepen

こんな感じでしょうか。

htmlの方も一部直しています。直した内容としては、
・ターゲットとなる見出しとその他のh2を統一
・iframe等の前後にcenterタグが入っていたが、テーマが持っているセンター寄せを適用

CSSはSCSSで書いてあるので、css欄にある「∨」ボタンからview compiled cssを適用して、変換されたcssを子テーマstylr.cssへ。

またスクロールのメニューはアイテムが増えた時にどうなるかを確認するためにわざとsongも入れています。songを消した際に表示がどうなるかも確認してみて下さい(メニューを区切っているセパレータが消えます)。
スクロールのメニューは.scrollMenuにスタイルすることでマージンパディングその他諸々をスタイルすることができます。
メニューの最初のアイテム左側に、ScrollMenu>>と言うのが入っていますが、これは、

li {
      float: left;
      
      &:first-child::before {
        content: "ScrollMenu >>";
        margin-right: 10px;
      }

こういった部分でやっています。contentを修正することで好きな文字にすることができますが、liの最初のアイテムにあると言うことに注意です。
これらliを囲むulは幅の指定がないと画面幅一杯になります。仮にulにtext-align-centerをやったとしてもliがfloatされているためセンター寄せにはできません。
もしセンタリングしたいような場合は、

.scrollMenu ul {
  width: 400px;
  margin: 0 auto;
}

こんな感じで、ulのサイズを決めてそのmarginの左右をautoにすることでul自体をセンタリングすることはできますが、liの幅が変わるため完全なセンタリングはできません。
完全なセンタリング等を実現したい場合は、liのfloatをやめて、ulをflex等で構築することでセンタリング、左右寄せ、均等割つけは可能です。

更にulに、

    &::before,
    &::after {
      content: "";
      display: table;
    }
    &::after {
      clear: both;
    }

こういったものがありますが、これはulの中のliがfloatさせてあるために、ul自体が高さを持たなくなるのをfixするためのclearfixです。もし仮に、このメニューの後に何かしらの要素が続く場合にulの最後尾に回りこんでしまうのを解除するためでもあります。

また#なんちゃら-inのwidthが1250pxに親テーマstyle.cssでなっていたので、このままだと画面幅が狭い場合に横スクロールバーが表示されるため、これら#なんちゃら-inのwidthを100%にすることで横スクロールバーが発生しないようにしてあります。

ユーザビリティを上げるために、スクロールして表示された見出しにはトップへ戻る何かしらのリンクが欲しい所です。もし、Simplicityの「トップへ戻るボタン」が機能していればこれらは必要ありません。

また別問題ですが、soundCloudはまぁおいておいて、youtubeは直接プレイヤーを埋め込むのではなく、まずサムネイルを表示しておき、クリックしたらプレイヤーを読みこませるようにすると、若干ページの速度が上がると思います。

参考: jQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる

ウチのサイトですけれども(笑)
ただしこのサンプルではサムネイルは16:9でレスポンシブになってるので、プレイヤーを囲むブロックが別途必要です。このブロックに対して100%のサイズで表示します。

これについて何かしらわからないことがあれば記事にコメントしてもらうか、別でトピックを立てて下さい。

Hidekichi様

無事スクロールすることができました。
ただ、自分のイメージではこのスクロールができたら、グローバルメニューはいらなく
スクロールできるサブグローバルメニュー（？）があればよいので、一番上のグローバルメニューは消したいのですが、
ただ、ここで消してしまうとせっかくのスムーススクロールのメニューのほうも消えてしまいますよね？
スムーススクロールのほうを残し、グローバルメニューのほうを消すというのは可能でしょうか。
またどうしたら良いでしょう。

Youtubeの件に関して、
ありがとうございます。Hidekichi様のサイト拝見しました。
とりあえずは現状のままでもいいかと考えていて、
一通り完成してから、そういう細かいところも調整していきたいと思っています。
なので、また質問するかと思いますが、そのときはよろしくお願い致します。

> 一番上のグローバルメニューは消したいのですが

#43894の、

>> で、このulはどのようにすればよいかですが、
>> 通常記事編集で書いたものはSimplicityでいうと、
>> 記事タイトルの下に入ります。

以降の部分からメニューの挿入位置について説明してます。ここらを理解してもらった上で、サンプルの、

//メニューを収納するulを挿入
    $("#navi").after("<div class='scrollMenu'><ul></ul></div>");

この部分で、$(“#navi”)このセレクタを変更すれば任意の位置にメニューを入れることはできます。
$(A).after(B)
は、Aの後にBを挿入ということなので、ここらを色々駆使すればより任意の箇所に入れることは可能です。例えば#headerの手前に入れるのであれば、

$("#header").before("<div class='scrollMenu'><ul></ul></div>");

このようにして入れます。#headerの下なら、.beforeが.afterになります。

ただ、グローバルメニューは残しておくべきです。スクロールのメニューと役割を分けて残しておくのが良いです。どのようにすべきかは、どのような管理にするか、運営方法にするかによって変わりますのでこれと言う最適解は僕には言えませんが、色んな手段で各記事にアクセスできる方法を残しておくべきですし、スクロールメニューはトップのリストでかつスクロールのターゲットがある場面でしか表示させないようにしていますが(本来なら上記のulを挿入する部分もトップのリストのみと制限するほうが良いかも知れません)、グローバルメニューは各記事にも表示されます。

今読んでいる記事から他の記事へ誘導できる道筋は残しておくべきです。どうしてもトップページはグローバルメニューが要らないというのであれば、トップページのみグローバルメニューを非表示にするようにcssを書くのがベストかと思います。で、#headerの手前(後)にスクロールのメニューを出せばよいのではなかろうかと思います。

.home #navi {
  display: none;
}

とでもすれば、トップページからグローバルナビ自体は非表示にできます。

Hidekichi様

ここ最近忙しいのもあり、返信遅れすみません。
グローバルメニューのイメージはどうしようかと悩みながら、過ごた結果、
トップに戻るのように、最初消えててスクロールされたら出現させるというのは可能なのでしょうか。
だめでしたら、他の方法を考えようかと思ってます。