はてなブログは、先人の知恵を借りれば、
自分のような素人でも、ある程度のカスタマイズが可能ですよね。
今回は、サイドバーにスクロールに追従してくれる目次を設置したいと思います。
参考にさせて頂いた記事はこちら
こちらの方の記事を参考に、はてなブログにスクロールに追従する目次を無事設置することができました。基本形はこちらの方の記事の通りです。
サイドバーに現在位置を表示して追尾する目次を設置する【Ver3】 - Twilyze blog (hatenablog.jp)
以下、★参考記事★とさせて頂きます。
テーマによっては、うまくいかないこともあるかもとのことですが、素人な私でも無事に設置することができました。これは本当にうれしい。。
この場をかりて御礼申し上げます。ありがとうございました！
（こっそり御礼…(゜-゜)）
↑ 完成したのがこちら
ということで、上の方のサイトで完結するので、以下はお暇な方だけどうぞ…。笑
※ 今回はCSSなどいろいろ触るので、間違えた時に復元できるように、必要に応じてバックアップをとっておいたり、テストサイトを作って試してみたりするのが安心かと思います。
簡単な流れ (詳細は★参考記事★をご確認ください)
１．[デザイン] > [カスタマイズ] > [サイドバー] > [モジュールを追加]
[</> HTML] を選択して、新しいモジュールを追加する。
これは一番下に置いておくこと。指定されたコードを記載して保存。
２．指定されたJavaScript を貼る
私は自分が何をどこに貼ったか忘れてしまうので、１．で作ったモジュール内に追記しました。
３．指定されたCSSをコピペする
[デザイン] > [カスタマイズ] > [デザインCSS] を開いて、指定されたCSSを丸ごとコピー＆ペースト。
アレンジしたこと
基本形でも十分なのですが、自分のブログに合わせて少しだけアレンジしました。
１、３、４は、★参考記事★に説明がありますので、そちらを見て頂くのがよいかと思います。
１．文字の色の変更
操作するところ：デザインCSS
#stoc a { } の中に
color: #カラーコード;
を追加します。
２．マウスカーソルを合わせたところが太字になる
操作するところ：デザインCSS
#stoc:not(.touch) a:hover { } の中に
font-weight: bolder;
を追加します。
例えば、私のはこんな感じになっています。
３．目次を表示するページの変更
トップページやアーカイブで表示しないようにするために、JavaScriptの記載を編集する。詳しくは★参考記事★をご覧ください。
私のはこんな感じになっています。
４．h2タグに対応させる
デフォルトは、はてなブログに合わせて h3-h5タグ に対応するようになっています。
h3-h5以外のタグを利用しているなどで、必要な場合は、JavaScriptの該当箇所を変更します。詳しくは★参考記事★をご覧ください。
私は見出しに「h2タグ」を使っているので、以下のように書き換えました。
５．背景に色をつける
邪道かもしれませんが、私のモジュール内の記載の始まりはこうなっています。
下のマーカー部分を追加しました。
<div style="padding: 10px; background-color: #好きな色; border-radius: 10px;">
<nav id='stoc'></nav>
</div>
ちなみに私は、背景を塗りつぶすのではなく、オンライン上の画像を貼っています。
この場合は、
「background-color: #好きな色;」の部分を
「background-image: url(https://～オンライン画像のURL～);」
にしたらよいです。▲ http://の場合は、http://にしてくださいね。
border-radius: 10px; の部分は、四角に丸みを持たせるために記載しています。不要な方は削除してください。
６．追従する目次の後ろに他のものを置いたりする
サイドバーの追加したモジュールの後ろに、新たなモジュールを追加してしまうと、スクロールすると、目次が途中でとまってくれずにそのまま流れて行ってしまいます。
なので、新たなモジュールを後ろに置くことはできません。
目次の後ろに何か置きたい時は、同じモジュール内に追記していきます。
ただ、設定によっては、目次のない記事などでは、このモジュールは表示されないので、この方法を使う場合は、それでもOKなものを置くようにします。
私は最初にモジュール内に書いたHTMLとJavaScriptで書いたものの間に、例えば広告のHTMLなどを追記していますが、とりあえず私のサイトでは今のところ思った通りに表示されています。
2022/11/8時点では、
目次、検索窓、広告が並ぶようにしています。
最後に
今回はずっと設置したいと思っていたけれど、なかなか調べてやる気になれなかったスクロールに追従する目次を設置した話でした。少し長めの記事を書く時に、いつも欲しいと思っていたんですよね…。
素敵な記事にめぐりあうことができたおかげで、理想通りの目次を作ることができました°˖✧◝(⁰▿⁰)◜✧˖°
本当はサイドバーのタイトルの部分もアレンジしたいのですが、今回は余力がなく、、それはまた機会があれば。
あと、現在サイドバーにいろいろ貼りすぎているので、少し整理した方がいいのかなと思いつつ…(゜-゜) まあまた。
あ、あと、このブログはモバイル版はサイドバーないタイプなので、スマホでこれ読んでくださって、「え、サイドバー？追従？何もないやん？」ってなった方ごめんなさい。PC版であれば、このサイトでも実際の雰囲気をみて頂くことができます。。
それでは今回はこのへんで。(*'▽')/
▼ 参考にさせて頂いた記事。
