Skip to content

Instantly share code, notes, and snippets.

@Twilyze Twilyze/CHANGELOG.md
Last active Aug 7, 2019

Embed
What would you like to do?
はてなブログ向けのサイドバーで追尾する目次【ver3】 http://twilyze.hatenablog.jp/entry/sidebar-toc-3

SidebarToc3

はてなブログ向けのサイドバーで追尾する目次【ver3】


使い方(簡易)

  1. デザイン設定の[カスタマイズ]を開く
  2. sidebar_toc.html を[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける
  3. sidebar_toc_footer_minify.html を[フッタ]に追加する
  4. sidebar_toc.css を[デザインCSS]に追加する

ファイルの目次

ファイル 説明
sidebar_toc.html サイドバーに貼り付けるHTML
sidebar_toc_footer_minify.html フッターに貼り付けるスクリプト
sidebar_toc.css CSS
custom.css 公式テーマの表示崩れ修正例
sidebar_toc_footer.html 圧縮前のスクリプト
CHANGELOG.md 変更履歴

要望・バグ報告

Googleフォーム


オプション

変数名 説明 設定値 デフォルト
PAGES 各ページごとの動作設定 PAGES options
MATCH_MEDIA サイドバーが横に表示されているかの判定をmatchMedia関数で行う true, false false
MEDIA_QUERY_SIDEBAR サイドバーが表示された状態を指定(MATCH_MEDIAがtrueの時) mediaQueryString '(min-width: 768px)'
MARGIN_TOP 目次を固定する時の上の余白 pixel 10
MARGIN_BOTTOM 目次を固定する時の下の余白 pixel 0
CURRENT_MARGIN 現在位置表示の位置取得に余裕をもたせる pixel(0以上) 50
ADJUST_FIXED 固定開始位置がずれるときの調整用(最終手段) pixel 0
MAX_SIZE 目次モジュールの最大サイズを指定(0にするとオフ) pixel 0
HEADLINE_QUERY 表示する見出しタグ(数字が小さい順・小文字) h1-h6 ['h3', 'h4', 'h5']
HEADLINE_MIN 見出しがn個以下なら表示しない 0以上 1
ADJUST_SCROLL スクロール先の調整 pixel 0
SCROLL_TIME スムーズスクロールにかける時間(0にするとオフ) ミリ秒 400
SCROLL_TIME_TOUCH タッチデバイスでスムーズスクロールにかける時間(0にするとオフ) ミリ秒 0
TOC_INSIDE_SCROLL 目次内のスクロールを自動追尾 true, false true
TOC_TITLE_TOP 目次タイトルにトップへ移動するリンクを設定 true, false true
SCROLL_SHADOW 目次内スクロールが可能か分かりやすくするための表示 true, false false
LINK_HISTORY ページ内リンクをブラウザ履歴に追加(目次が表示されるページのみ適用) true, false true
DELAY_TIME_DOM ページが読み込まれてから処理の開始を遅らせる時間 ミリ秒 250
DELAY_TIME_LOAD ページが完全に読み込まれてから処理の開始を遅らせる時間 ミリ秒 1000
GLOBAL_HEADER 常に表示されるグローバルヘッダーなどの要素を指定 #id .class ['#globalheader-container']
CLICK_UPDATE クリック後に見出し位置などの再取得を行う要素を指定 #id .class []
CLICK_UPDATE_DELAY CLICK_UPDATEの実行を遅らせる時間 ミリ秒 500
USE_LIST 使用するリスト要素 ol, ul 'ol'
TOUCH_DEVICE タッチデバイスの判定方法 'ontouchstart' in window
TOUCH_DEVICE_DISABLE タッチデバイスで非表示にする true, false false
F_STICKY_MODE ブラウザが対応していれば常にposition:stickyを使う(IE11未対応 true, false false
PAUSE_NO_SIDEBAR サイドバーが横に表示されていない時処理を止める true, false true
PAUSE_MAIN_SMALL サイドバーより記事の方が小さい時処理を止める true, false true

PAGES options

ページごとの動作設定

  • class — 各ページでbodyに設定されているクラス名

    クラス名 ページ名
    page-entry 記事ページ
    page-index トップページ(Pro機能の一覧形式を使うとpage-archiveも付く)
    page-archive アーカイブページ(最新記事やカテゴリ、検索等)
    page-static_page 固定ページ(Pro機能)
  • title — 目次タイトル('' : 空文字にすると非表示)

    • 記事一覧ページ以外はtitleの設定を'entry-title'にすると記事のタイトルが表示されます
  • listPage — 記事一覧ページに付ける(true)

  • display — 目次を表示するかどうか(true, false)

※注意:Pro機能のトップページの一覧形式を有効にする場合、page-archiveよりpage-indexを先に書かないと期待した動作にならない。

// デフォルト
const PAGES = [
  {
    class    : 'page-entry',
    title    : '目次',
    display  : true,
  },
  {
    class    : 'page-index',
    title    : 'このページの記事一覧',
    listPage : true,
    display  : true,
  },
  {
    class    : 'page-archive',
    title    : 'このページの記事一覧',
    listPage : true,
    display  : true,
  },
  {
    class    : 'page-static_page',
    title    : 'entry-title',
    display  : false,
  },
];

ライセンス

このページにあるファイルはCC0ライセンスです。必要な部分だけをコピーして使ってもかまいません。

Creative Commons — CC0 1.0

3.2.0 - 2019/08/08

  • モジュールの最大サイズ設定を追加
  • タッチデバイスで非表示にする設定を追加
  • 目次タイトルを非表示にすると動作しないことがある問題を修正
  • その他細々修正

3.1.2 - 2019/07/27

  • モジュールの高さ取得でマージンを取り忘れていたのを修正
  • CSS修正

3.1.1 - 2018/07/03

  • 目次要素作成時にHTMLのエスケープ処理を追加

3.1.0 - 2018/05/03

  • 特定の要素をクリック後に見出し位置などの再取得を行うオプションを追加
    • CLICK_UPDATE, CLICK_UPDATE_DELAY

3.0.3 - 2018/05/03

  • SCROLL_TIME_TOUCHのデフォルトを0(オフ)に変更
  • 目次記法の目次とサイドバーの目次の表示数が違う時にリンク先がずれる問題を修正
  • スムーズスクロールが0(オフ)の時に横へスクロールしてしまう問題を修正
  • CSS修正

3.0.2 - 2018/03/01

  • 目次内スクロール可能か分かりやすくする表示をオプションにしてデフォルトはオフに変更
    • SCROLL_SHADOWオプション追加
    • CSS変更
  • ページを開いた時のスクロール位置によっては現在位置が設定されていなかったのを修正

3.0.1 - 2018/01/15

  • F_STICKY_MODEオプション追加
  • CSS修正

3.0.0 - 2018/01/13

追加

  • ウィンドウサイズ変更に対応
  • 使用できるテーマが増えた
  • 横スクロールにくっついてこないように
  • ウィンドウの縦幅よりも大きくなったらスクロールバーを表示
  • 記事ページ以外でもページ内の記事一覧などを表示
  • モジュールタイトルをページトップへのリンクにする機能
  • 設定変更を簡単にできるように上の方にまとめた
  • その他色々

変更

  • スクリプト記述場所をフッターに変更
  • スクリプトを開始するタイミングをDOMContentLoadedに変更
  • jQueryを使わなくても動くように書き換え
  • CSS用のid, class名を変更
  • その他色々

2.0.0 - 2016-12-29

1.0.0 - 2015-08-04

/*------*/
/* Aero */
/*------*/
/*
Shadows: rgba(255,255,255,.5)
Shadow covers: #8095ad
a:hover, active: rgba(255,255,255,.36)
*/
#stoc {
font-weight: 600;
}
#stoc li {
padding-bottom: 0;
}
/*-----------*/
/* Afternoon */
/*-----------*/
#stoc li {
list-style-type: none;
padding: 0;
margin-left: 0;
}
/*-------------------*/
/* ヨミカキ by kanahei */
/*-------------------*/
#stoc-module:not(.touch).tracking {
border: 3px solid #000;
border-radius: 20px;
margin-top: -3px;
margin-left: -3px;
padding-bottom: 20px;
}
/*----------------------*/
/* Popcorn by カタノトモコ */
/*----------------------*/
#stoc-module a {
border-bottom: 0;
}
#stoc-module:not(.touch).tracking {
background: #fff;
border: 2px solid #4c3326;
border-radius: 20px;
margin-top: -2px;
margin-left: -22px;
padding-left: 20px;
padding-right: 20px;
}
/*--------*/
/* Report */
/*--------*/
#stoc li {
margin-bottom: 0;
}
/*-----------*/
/* レトロポップ */
/*-----------*/
#stoc-module {
position: static;
}
/*-------------*/
/* Skull wings */
/*-------------*/
/*
Shadows: rgba(255,255,255,.8)
Shadow covers: #000
a:hover, active: rgba(255,255,255,.9)
*/
#stoc-module {
font-weight: 600;
}
#stoc .active {
color: #cb2d8e;
}
/*-------*/
/* Solid */
/*-------*/
/*
Shadows: rgba(255,255,255,.5)
Shadow covers: #292c2f
a:hover, active: rgba(255,255,255,0.15)
*/
/*----------*/
/* Terminal */
/*----------*/
/*
Shadows: rgba(255,255,255,.5)
Shadow covers: #272822
a:hover, active: rgba(255,255,255,0.2)
*/
/*---------*/
/* Venetia */
/*---------*/
/*
Shadow covers: #f6f5dd
*/
#stoc-module a:hover {
border-bottom: 0;
}
#stoc-module.tracking {
padding-bottom: 50px;
background: url(/css/theme/venetia/bee.png) no-repeat 0 100%;
}
/*-------------*/
/* 追尾する目次 */
/*-------------*/
#stoc-module {
backface-visibility: hidden;
}
#stoc-module.tracking {
margin-bottom: 0;
}
#stoc-module.fixed {
position: fixed;
}
#stoc-module.absolute {
position: absolute;
}
#stoc-module.sticky {
position: -webkit-sticky;
position: sticky;
}
#stoc-module.fade-in {
animation: fadeIn 300ms;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
#stoc {
overflow-y: auto;
}
#stoc.shadow {
/* Shadows */
background:
radial-gradient(farthest-side at top, rgba(0,0,0,.17), transparent) top / 100% 11px,
radial-gradient(farthest-side at bottom, rgba(0,0,0,.17), transparent) bottom / 100% 11px;
background-repeat: no-repeat;
background-attachment: scroll;
}
#stoc ol {
margin: 0;
padding: 0 0 0 1em;
list-style-type: none;
}
#stoc > ol {
padding-left: 0;
}
#stoc.shadow > ol {
/* Shadow covers */
background:
linear-gradient(#fff 30%, transparent) top / 100% 40px,
linear-gradient(transparent, #fff 70%) bottom / 100% 40px;
background-repeat: no-repeat;
background-attachment: local;
overflow-y: hidden;
}
#stoc li {
/*margin: 3px 0;*/
}
#stoc a {
padding: 2px 2px 2px 6px;
display: block;
text-decoration: none;
/*color: #999;*/
}
#stoc:not(.touch) a:hover {
background-color: rgba(0,0,0,.05);
text-decoration: underline;
/*color: #333;*/
}
#stoc .active {
background-color: rgba(0,0,0,.05);
/*color: #333;*/
}
#stoc::-webkit-scrollbar {
width: 8px;
background: #ececec;
}
#stoc::-webkit-scrollbar-button {
display: none;
}
#stoc::-webkit-scrollbar-thumb {
background: #b1b1b1;
}
<!-- 追尾する目次 -->
<nav id='stoc'></nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.