拡散していないことが不思議なブログパーツ：サイドバー目次追尾（現在地表示機能付き）

　世の中には不思議なことがたくさんあります。

　直近でもっとも不思議におもうことは、サイドバーに目次を追尾させるブログパーツを採用されている方があまりにも少ないということ。

　このブログパーツはただ追尾するだけでなく現在位置も示してくれるというすぐれもの…

　な・の・に

　使っているブログをあまり見かけないという…不思議だわぁ～なぜかしらぁ～？

　スマホでは画面が小さくあれですからパソコン表示で使ってみませんか？

これより三役ブログパーツ

　企業が運営しているサイトでよく見かけるのですが、画面左側を縦に並んだシェアボタンがスクロールしても追いかけてくるブログパーツ。

　つい先日も申しましたが、わたしはあれをクリックしたこと1度もありません。

　左端をずーーーっと追いかけてきたのに見えていないのです。

　視界には入っているはずなのに見えていないのです。

　わたしがそうだから他の人もそうだということはまったくないのですが、追尾させるなら目次の方がよくない？

　左端シェアボタン追尾パーツや3カラムのデザインなら左側に目次追尾させない？

　cssで幅(width)狭めて左寄せ(left)表示にしてみたらいいじゃない。

一石三鳥目次

　「トップに戻るボタン」や「文字数カウンター・読了目安」などのブログパーツをいくつも使うならこれ１つにすればいいのに。

　さまざまな機能をカバーまたはその代替となりますし、1つにすることで読み込みもほんのちょっとだけ速くなるでしょうし、一箇所にさまざまな機能を集約することでツールボックスみたいで見つけやすくて使いやすくなりそうで、一石三鳥ぐらいにはなるんじゃあないかなあ？

　テキスト量って目次の見出しの数でだいたいはかれるでしょぅ？

　今どのあたりを読んでいるのか目次の背景色を変えて示してくれるから、それでおおむね読了までの時間はかれるでしょぅ？

　目次が「トップに戻るボタン」のように追いかけてきてくれるのなら、「トップに戻るボタン」押さなくても目次の中の一番上の見出しリンクをクリックすれば似たようなアクション再現できますし。

　このブログパーツがまだそれほど認知されていないから「トップに戻るボタン」の代替として使えるというのも知られておらず、ゆえにわかりづらいというのなら、追尾する目次の見出し最下段に「トップに戻るボタン」をうまく組み込んじゃうって手もあるでしょう。

　もっと簡単に今すぐできる方法として、31行目のコードに「h1,」を加えてあげれば目次の見出し最上段にh1の記事タイトルリンクが現れるから、これでほぼ「トップに戻るボタン」があるのと同じことにならないかな？

変更前：　var SECTION_QUERY = 'h3,h4,h5';

　↓

変更後：　var SECTION_QUERY = 'h1,h3,h4,h5';

※olのlist-styleまたはlist-style-typeをdecimalにしていて行頭に番号を振るようにしているとh1見出しが「1.」で次のh3(諸々ちょっと変えている場合はh2)が「2.」となってh1とh3とで異なるタグなのに地続きの昇順になってしまいますので、Javaがわかる方はうまいこと回避できるのでしょうけれども、そうでない場合はlist-styleをdiscやcircle、noneにして回避してしまえばいいのではないかとおもいます。

※※これを書いているときは上記のように「h1,」を加えてolのlist-styleをdiscにして使っています。

※※※なぜか#sectionListSide olで指定しても「!important」つけても適用されなかったのでolで指定しました。

　あれこれあちこちブログパーツ加えるよりこれ1つにしてしまうか、統合してしまうか、1箇所にまとめてみるっていうのもいいんじゃない？

　先にも言ったように、スマホで追尾する目次はちょとキツイから、スマホ表示では「トップに戻る」ボタンはユーザビリティ高いとは思いますが、パソコン表示で「トップに戻る」ボタンを設置するのなら…目次にしてみない？

目次遊び

　5〜10行目を消すとトップページやアーカイブページでも見出しタグを収集して追尾する目次を表示させられます。この↓部分ね。

　// 記事ページの時だけ

　if (!$('body').hasClass('page-entry'))

　　return;

　console.log('---sidebar toc---');

　はてなではアーカイブページでは最大50タイトルが表示されます。

　すると目次も最大50見出し表示されることになり、さすがにこれは読み込みに時間がかかってしまうのですが、全体の見通しがよくなりますし、スクロールダウンして振り返ってまた先頭や中盤のエントリを見たいというときなどの利便性は高く、それはそれでおもしろい使い方なのではないかとおもいます。

　数時間このような表示にしていましたが…やはり読み込み時間がねぇ〜…ということで戻しました。

　読み込み時間がボトルネック。

　これさえなければトップページやアーカイブページでも現在位置を示しながら追尾する目次表示させるのになぁ〜。

目次サンドイッチを召しあがれ！

　スマホでは追尾する目次はしんどいけれど…スマホ表示時の「トップに戻る」ボタンのようにフッター固定の目次ってどう？

　ヘッダーにはグローバルメニュー、フッターには目次のサンドイッチってどう？

　これを実装するとグローバルメニューまたはグローバルナビゲーションはサイト全体の目次のようなものなので、ヘッダー目次とフッター目次の「目次サンド」なデザインになるんだけどね。

　まあそれはいいとして、それでフッター目次なるものは一体どういったものかというと、たとえばこんなの↓をフッターに設置するといった感じかな？

※クリックすると開きます。

これより三役ブログパーツ

　実際にフッター追尾の目次ってどんな感じなのか見てもらおうと思ったんだけど…なんかめんどくさそうだったから↑こんなんでごまかそうと思ったんだけどぉ…気になるからやっぱりコード組んでみました。

　参考にしたのはこちらのサイト。

　それでここまでスクロールダウンしてきて、高さ2,000px超えたあたりからふんわり画面下に「目次」が現れてついてきてたでしょ？

　もしかしたらブラウザやAMP表示で見ているからなにも出てきていないかもしれないけれど…。

フッター目次録

　自分で言っておいてなんだけど、わたしはフッター目次使わないけれど、今回は「追尾目次拡散啓蒙活動」の回なので、いちおうここで使われているコードを載せておきます。不具合起きても知らないけれどね。

　特定のエントリを表示したときにだけフッター目次を表示させたいのなら、エントリ内に、はてなの場合は「HTML編集」ででも以下のコードを加えてください。

　常時表示させるのであれば「デザイン」で「記事上」でも「記事下」でも「フッタ」でもどこでもお好きなところに加えてください。

HTML ＆ Java

<div id="footer-menu">
<div class="toggle-content">
<p>[:contents]</p>
</div>
<div class="btn-area"><span class="toggle-btn">目　次</span></div>
</div>

<script>
$(document).ready(function(){
$("#footer-menu").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 2300) { //上から2,300を超えると表示
$('#footer-menu').fadeIn();
} else {
$('#footer-menu').fadeOut();
}
});});});
$(function(){
var contentArea = $(".toggle-content");
$(".toggle-btn").click(function(){
var index = $(this).index()-1;
var clickedArea = $(contentArea).eq(index);
if($(clickedArea).css('display') !='none'){
$(contentArea).slideUp();
}else{
$(contentArea).slideUp();
$(clickedArea).slideDown();
};});});
</script>

　cssは特定のエントリ表示時のみフッター目次を表示させるのならそのエントリに「HTML編集」ででも加えてください。

　フッター目次を常時表示させるのなら以下のcssを「デザイン」で「デザインcss」の中に、先頭と最後尾にある「<style type="text/css">」と「</style>」を削除して加えてください。

　お使いのテーマによっては多少表示がくずれるかもしれませんし、そもそもここに表示されているものもちょっと崩れているでしょ？変な隙間あいてない？微調整めんどうだったのでいいにしちゃいましたので…。

　なので微調整は各々うまいことやってね。

css

<style type="text/css">
#footer-menu{
position: fixed;
bottom: 0;
left: 0;
width: 100%; /*バーの幅*/
height: 35px; /*バーの高さ*/
z-index:10; /*要素の前面・後面調整 − この行を削るとスクロール中画像などの下を通過*/
font-size:1.3em;
font-weight:bold; /*太字*/
background: #dcdcdc; /*背景色*/
opacity: 0.95; /*バーの透過具合*/
display: inline-block;
border: 1px solid #bdbdbd; /*枠線*/
cursor: pointer;
}

#footer-menu:hover{
background: #bdbdbd;
color: #fff;
font-weight: bold;
}
.toggle-content{
position: fixed;
bottom: 50px;
background: #dcdcdc; /*リスト背景色*/
width: 100%; /*リスト幅*/
font-size:80%;
display: none; /*はじめにトグルを閉じておく*/
}
.btn-area span{
display: block;
text-align: center;
}
</style>