サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
どうなる?Twitter
twilyze.hatenablog.jp
いわゆるシングルページナビゲーションみたいなやつ(はてなブログ用) (2021/08/12 ver3.4.1) できること サイドバーに目次を設置 スクロールに合わせて追尾 現在位置の背景色変更 リンク先へのスムーズスクロール ウィンドウサイズ変更に合わせてサイズ変更 記事ページ以外でもページ内の記事一覧などを表示 できること 動作環境 前バージョンからの主な変更点 インストール HTML JavaScript CSS 文字色(2018/04/22追記) 設定について メディアクエリ(重要) 条件の調べ方(2019/04/08追記) 例1:簡単な調べ方 例2:CSSを調べる方法 目次を表示するページ 表示する見出しタグ 固定時の余白 グローバルメニュー 見出し位置などの更新(2018/05/03追記) スムーズスクロール HTML構造 仕様と注意点 タッチデバイスでの動作 h2タグを使用す
※追記(2018/01/15) 新しいバージョンを作ったので今後はこちらを参考にしてください。 前バージョンを公式の目次記法に対応させたり色々改良した版です。(2017/09/10更新) やること 前回からの変更点 やり方 HTMLとJavaScript CSS 仕様 少しだけ解説 参考 やること サイドバーに目次を設置 現在位置の背景色変更 スクロールすると位置が固定(追尾)される リンクをクリックするとスムーズスクロール 目次記法使用時はリンクの内容を合わせる 目次記法をクリックした時もスムーズスクロール 前回からの変更点 目次記法に合わせて使う見出しタグをh2~h4からh3~h5に変更 リンクをクリックした時にURLを変更して履歴が残るように変更history.pushState() モジュールタイトルを入れる場所を修正 高さを計算する場所を少し改良 読み込むjQueryのバージョン
※追記(2018/01/15) 新しいバージョンを作ったので今後はこちらを参考にしてください。 ※追記(2016/12/29) サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】 - Twilyze blog ※追記(2016/12/22) この記事から色々変更してるので終わったら新しく記事を書きます。(作業中) 前に記事上に目次を設置したけど はてなブログを便利にするカスタマイズ - Twilyze blog サイドバーにも欲しい。ついでに追尾してほしい。 やること やり方 HTMLとjavascript css 少しだけ解説 参考 やること サイドバーに目次を設置 現在位置の背景色変更 スクロールすると位置が固定(追従)される やり方 HTMLとjavascript デザイン設定の[カスタマイズ]-[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける。 (
※追記(2016/12/22) ページトップへ戻るボタンを書く所を間違えてたので修正 ※追記2(2016/12/22) この記事から色々変更してるので終わったら新しく記事を書きます。(作業中) ※追記3(2016/12/29) 書きました。 またこの記事も使う見出しタグをh2~h4からh3~h5に変更しました。 はじめに やること 見出しに自動で番号をつける 記事に自動で目次をつける TOPへ戻るボタンを設置 その他見た目の変更まとめて やり方 自動見出し番号付加 見た目の変更を含む 見た目の変更を含まない 自動目次作成 TOPへ戻るボタン 蛇足 はじめに 記事の編集はMarkdownモードでh3~h5タグを見出しに使う デザインは公式テーマのEpicを使っているので、他のテーマではおかしい所があるかも スマホ版のことは考えてない 見た目に関してはそのうち変えそう やること 見出しに自動で
このページを最初にブックマークしてみませんか?
『twilyze.hatenablog.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く