はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • お金
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
    • Advent Calendar
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
  • おすすめ

    どうなる?Twitter

『twilyze.hatenablog.jp』

  • 人気
  • 新着
  • すべて
  • サイドバーに現在位置を表示して追尾する目次を設置する【Ver3】 - Twilyze blog

    14 users

    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 20:35
    • カスタマイズ
    • はてなブログ
    • CSS
    • javascript
    • サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】 - Twilyze blog

      16 users

      twilyze.hatenablog.jp

      ※追記(2018/01/15) 新しいバージョンを作ったので今後はこちらを参考にしてください。 前バージョンを公式の目次記法に対応させたり色々改良した版です。(2017/09/10更新) やること 前回からの変更点 やり方 HTMLとJavaScript CSS 仕様 少しだけ解説 参考 やること サイドバーに目次を設置 現在位置の背景色変更 スクロールすると位置が固定(追尾)される リンクをクリックするとスムーズスクロール 目次記法使用時はリンクの内容を合わせる 目次記法をクリックした時もスムーズスクロール 前回からの変更点 目次記法に合わせて使う見出しタグをh2~h4からh3~h5に変更 リンクをクリックした時にURLを変更して履歴が残るように変更history.pushState() モジュールタイトルを入れる場所を修正 高さを計算する場所を少し改良 読み込むjQueryのバージョン

      • 暮らし
      • 2016/12/29 06:07
      • はてな
      • あとで読む
      • サイドバーに現在位置を表示して追尾する目次を設置する - Twilyze blog

        6 users

        twilyze.hatenablog.jp

        ※追記(2018/01/15) 新しいバージョンを作ったので今後はこちらを参考にしてください。 ※追記(2016/12/29) サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】 - Twilyze blog ※追記(2016/12/22) この記事から色々変更してるので終わったら新しく記事を書きます。(作業中) 前に記事上に目次を設置したけど はてなブログを便利にするカスタマイズ - Twilyze blog サイドバーにも欲しい。ついでに追尾してほしい。 やること やり方 HTMLとjavascript css 少しだけ解説 参考 やること サイドバーに目次を設置 現在位置の背景色変更 スクロールすると位置が固定(追従)される やり方 HTMLとjavascript デザイン設定の[カスタマイズ]-[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける。 (

        • 暮らし
        • 2015/08/04 01:06
        • カスタマイズ
        • はてなブログを便利にするカスタマイズ - Twilyze blog

          3 users

          twilyze.hatenablog.jp

          ※追記(2016/12/22) ページトップへ戻るボタンを書く所を間違えてたので修正 ※追記2(2016/12/22) この記事から色々変更してるので終わったら新しく記事を書きます。(作業中) ※追記3(2016/12/29) 書きました。 またこの記事も使う見出しタグをh2~h4からh3~h5に変更しました。 はじめに やること 見出しに自動で番号をつける 記事に自動で目次をつける TOPへ戻るボタンを設置 その他見た目の変更まとめて やり方 自動見出し番号付加 見た目の変更を含む 見た目の変更を含まない 自動目次作成 TOPへ戻るボタン 蛇足 はじめに 記事の編集はMarkdownモードでh3~h5タグを見出しに使う デザインは公式テーマのEpicを使っているので、他のテーマではおかしい所があるかも スマホ版のことは考えてない 見た目に関してはそのうち変えそう やること 見出しに自動で

          • 暮らし
          • 2015/06/11 20:07

          このページはまだ
          ブックマークされていません

          このページを最初にブックマークしてみませんか?

          『twilyze.hatenablog.jp』の新着エントリーを見る

          キーボードショートカット一覧

          j次のブックマーク

          k前のブックマーク

          lあとで読む

          eコメント一覧を開く

          oページを開く

          はてなブックマーク

          • 総合
          • 一般
          • 世の中
          • 政治と経済
          • 暮らし
          • 学び
          • テクノロジー
          • エンタメ
          • アニメとゲーム
          • おもしろ
          • アプリ・拡張機能
          • 開発ブログ
          • ヘルプ
          • お問い合わせ

          公式Twitter

          • 公式アカウント
          • ホットエントリー

          はてなのサービス

          • はてなブログ
          • はてなブログPro
          • 人力検索はてな
          • はてなブログ タグ
          • はてなニュース
          • App Storeからダウンロード
          • Google Playで手に入れよう
          Copyright © 2005-2023 Hatena. All Rights Reserved.
          設定を変更しましたx