前書き
カスタマイズ記事を探索していると「この記事の通りやったらできました！」なんて記事ででてくるのですけど。その情報に価値なし、削除して欲しい。あげく、その記事に書かれているリンクから飛ぶと、また「この記事に通りにやったらできました！」なんてでてくる。
なに？煽ってんの？
まとめアンテナじゃあるまいし、単のブログでやらないでくれ。
私は手っ取り早く有用な情報が欲しいのだ。ちょっとコードを改変するなり編集してるならまだ許せるけど、パクリました！なんて記事、正直いらない。
サイドバーで追尾して強調表示してくれる目次
今回のコードはパクリました。
即落ち二コマ。結構いろんなサイトを巡って情報収集してました。まずはサイドバーに目次だけ表示する方法、サイドバーを追尾する方法、サイドバーで２つのコンテンツを追尾する方法。今回、紹介するのはそれの集大成。結局、コレってやつ。
有名なのはstickyを使って固定するもの。でもレスポンシブじゃバグる経験があった。
ジャバスクリプトなんてわかんねえよ〜
って私でもコピペだけで完成した。ちょっとCSSは弄りました。
結局、コレ
実用的で有益な情報記事。でも、文字が多くて読むの諦める人はいるかな。大丈夫、書いてあることはHTMLに追加、スクリプトの読み込み、CSSの追加、あと細かな微修正ポイントだけ、カスタマイズ記事とほぼ一緒。
実装図
画面右のやつ。GIFにするとき短いほうがいいから早くスクロールしてたけど、こうやって見ると早すぎる。２倍速くらいに見える。CSSいじったのは「→」を付けるのとオレンジ色にカスタマイズしたってこと。背景色は弄れなかった、やろうと思えばできるはず。
ちなみに、PCでは表示されるけど、スマホでは表示されないようにしてる。動作環境？は考慮してません。
HTMLのコピペ
サイドバーの一番下のモジュールに追加。なぜ、一番下なのかはスマホでは表示されないようにするための伏線。
JavaScriptのコピペ
コピペする箇所は、主コードのあとにすること。理由は知らない。この場合、サイドバーに書いたからフッターにコピペ。基本、JavaScriptはフッターに書いておけば問題ないはず。
長いコードも全範囲選択すればいい。macだとcommand+a、windowsだとctrl+a。
CSSのコピべ
これも全範囲選択でOK。GitHubの場合、下の方にveiw rawてあるからそれをクリックすれば全部表示される。
このコードはどこに書くのかって言うと、デザインCSS。
完成！・・・だけど
ほうら簡単でしょ。これで作業は終了、保存すると追尾する目次が出現する。
けど・・・
トップページに謎の記事一覧が表示される！
デフォルトではなんかダサいし！
デフォルトがダサい、いやシンプルなのは各々でデザインしてくださいねっていう製作者からの粋な計らいです。
では、このデザインをカッコよくスタイリッシュにしましょう。
さらなるカスタマイズ
このページの記事一覧を非表示
これは製作者さんのページでも紹介させてました。設定についてのところで紹介されてます。具体的には、フッターに書いたJavaScriptで設定します。私はたまたまは横幅768pxテーマを使ってましたから少し設定をいじる必要があるかもしれません。
withサイドバーに現在位置を表示して追尾する目次を設置する【Ver3】 - Twilyze blog
ここですね。詳しくみると
class : 'page-index',
title : 'このページの記事一覧',
listPage : true,
display : true/*→falseに変更*/
},
{
class : 'page-archive',
title : 'このページの記事一覧',
listPage : true,
display : true/*→falseに変更*/
},
つまり、
class : 'page-index',
title : 'このページの記事一覧',
listPage : true,
display :false
},
{
class : 'page-archive',
title : 'このページの記事一覧',
listPage : true,
display : false
},
にすることでトップページの「このページの記事一覧」を非表示にできます。
カッコよくスタイリッシュにする
デフォルトのままではシンプル！なので少し変えましょう。
私のブログみたいに「→」とオレンジ色にハイライトする方法を紹介します。
まずは製作者さんのページに書いてあった。文字色のところに色を変更するコードが書いてあります。
#stoc a {
color: #カラーコード;
}
/* マウスカーソルをあわせた時 */
#stoc:not(.touch) a:hover {
color: #カラーコード;
}
/* 現在位置 */
#stoc .active {
color: #カラーコード;
}
/* 訪問済みのリンクの色（一色だけにしたい場合は指定しない ※テーマによる） */
#stoc a:visited {
color: #カラーコード;
}
編集したのは「現在位置」の部分と#stoc .active:beforeを追加して「→」を付けました。ちなみに背景色は変えられませんでした。（やろうとすればできると思います。）
「→」はFontAwesome５を使っています。インストールしてない人は、ヘッダに以下のリンクタグを貼り付けてください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
出典：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
これは余談なんですけど、jQueryもヘッダに書いておけばいちいち読み込みコード書かかくてよくなるんですね。
「訪問済のリンクの色」は変えないほうが自然見えます。私は下のコードをデザインCSSに追加しました。
#stoc a {
color: #カラーコード;
}
/* マウスカーソルをあわせた時 */
#stoc:not(.touch) a:hover {
color: #00DFFC;/* 水色 */
}
/* 現在位置 */
#stoc .active {
color: rgba(255,153,51,0.8);/* オレンジ*/
}
#stoc .active:before {
font-family: "Font Awesome 5 Free";
content: '\f061 ';/* 右矢印＋全角スペース */
font-weight: 900;
color: #1D3557;/* 右矢印の色 */
}
/* 訪問済みのリンクの色（一色だけにしたい場合は指定しない ※テーマによる） */ #stoc a:visited {
color: #カラーコード;
}
#stoc .active:beforeを追加して「→」を文字の前に表示させました。
完成！・・・かと思いきや
以上でサイドバーの追尾目次は完成です！・・・あれ？レスポンシブならサイドバーのモジュールは下に表示されるはずじゃ？
その通りです。このままだと、レスポンシブデザインではスマホで表示したとき一番下に「目次が表示」されます。
ここで匠のテクニック発動！サイドバーの一番下のモジュールにした伏線です。
以下のCSSをデザインCSSに追加することで非表示にできます。
追記（2020/11/05）、TOUCH_DEVICE_DISABLE｜タッチデバイスで非表示にする｜true, false｜falseの項目があり、CSSで非表示にしなくてもtrueにすれば非表示にできます。
@media screen and (max-width:768px){
#box2-inner .hatena-module:last-child {display: none;}
}
コードの意味は「画面サイズが768px以下のときサイドバーの一番下のモジュールを表示しない」ってことです。つまり、一番下なら目次でもなんでも非表示にされます。
わざわざ、この書き方をしたのはクラスidを知っておきたいという私の個人的なことです。はてなブログでは、運営者がclassとかidとか指定しなくても勝手に標準でclassとかidとかが付けられることがあります。#top-editareaでは痛い目みましたから。
指定の仕方さえ分かればカスタマイズの幅が広がります。
目次＋広告を追尾は・・・
目次＋広告を追尾させる方法は探しましたが妥協案はありましたけど「コレ！」ってやつはありませんでした。だいいち、見出しの多い記事では２つめのモジュールが隠れてしまいます。
見出しの多い記事ほど余白は少なくなります。ここに広告を入れるのははみ出したりして現実的ではありません。
たとえば、目次を固定サイズにしてスクロール表示にすることは、製作者さんの記事のオプション設定SCROLL_SHADOWにあります。＋別のモジュールを追尾させるのは・・・考えてみるとありますが妥協案くらいしかありません。
追記（2020/11/05）、MAX_HEIGHT｜目次モジュールの最大サイズを指定（0にするとオフ）｜pixel｜0の項目があり、目次の最大サイズを固定できます。
オプション設定:はてなブログ向けのサイドバーで追尾する目次【ver3】 http://twilyze.hatenablog.jp/entry/sidebar-toc-3 · GitHub
終わり
サイドバーにあって嬉しいのは「目次」と「関連記事」なんだよね……
追記（2020/11/05、以下）
オプション設定:はてなブログ向けのサイドバーで追尾する目次【ver3】 http://twilyze.hatenablog.jp/entry/sidebar-toc-3 · GitHub
TOUCH_DEVICE_DISABLE｜タッチデバイスで非表示にする｜true, false｜falseの項目があり、CSSで非表示にしなくてもtrueにすれば非表示にできます。
MAX_HEIGHT｜目次モジュールの最大サイズを指定（0にするとオフ）｜pixel｜0の項目があり、目次の最大サイズを固定できます。
追記（2020/11/05、以上）
追記（2020/11/05、以下）
TOUCH_DEVICE_DISABLE｜trueにしたらPCでも表示されないことがありました。本記事で書いたコードのが安定します。
背景色は最初にCSSにコピペした中に#stoc .active {background-color: rgba(0,0,0,.05);/*color: #333;*/}があります。これが灰色ですので、このカラーを変えると背景色も変わります。
文字色は元記事でも説明された通り。
追記（2020/11/05、以上）
