ココまとめ

ゲーム、映画、ドラマを中心に記事にしていきます

ココまとめ

ーおすすめ記事ー

はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法

f:id:coco090:20190817184220j:plain

こんばんは。
最近ブログのデザインを、いじり倒してる今日この頃でございます。

なかなか自分の納得いくデザインにならなくて、四苦八苦していましたが、
一区切りついたので、私のブログに取り入れた内容を
ボチボチ紹介していきたいと思います。

さて、今回ご紹介したいのはサイドバーに追従する目次でございます。

目次は通常最初のほうにありますが、
記事が少しでも進むと見えなくなり、読んでる途中で今どのくらいかな?
と把握したくなると、いちいち最初に戻る必要がある為、
もう戻らないで突き進む方が大概ではないでしょうか?

そんな時に、
常に表示されていたら、これほど便利なことは無いと思い、
追従する目次を設置した次第で御座います。

はじめに

まず、初めにご了承いただきたいのは、
今回ご紹介する、
「サイドバーへ固定・追従する目次」はスマホには対応しておりません。
レスポンシブ対応でも特に問題はございませんが、スマホでは表示されなくなります。

スマホの小さい画面でサイドバー表示されても邪魔ですけどね!

サイドバーへ固定・追従する目次とは?

f:id:coco090:20190817180906j:plain

そもそも、サイドバーへ固定・追従する目次とは何ぞや?
というところから説明いたします。

サイドバーへ固定・追従する目次とは、
記事中サイドバーに表示されたまま、追従する目次のことです。

上記写真の右側黄色枠で囲ったものが、実際に追従している目次になります。

サイドバーへ固定・追従する目次の設置方法

基本的には下記3つのコードをコピー&ペーストで設定できます。

HTML

f:id:coco090:20190817190149j:plain f:id:coco090:20190817190209j:plain f:id:coco090:20190817190215j:plain

デザイン>サイドバー>モジュールを追加>HTMLへ下記のコードを貼りつけます。

HTML解説

タイトルは何も記載しなくて構いません。
ここで作ったサイドバーのモジュールは記事ページを開いたときにのみ表示されます。
そういうコードを口述のcssで記載します。

Javascript

f:id:coco090:20190817181555j:plain

デザイン>カスタマイズ>フッターへ下記のコードを貼りつけます。

Javascript解説

目次の余白調整

const MARGIN_TOP = 10;

33行目のこの値で、目次の上側の余白を指定できます。
もう少し下側へ目次を固定したい場合は、この数値を大きくしてください。

CSS

f:id:coco090:20190721160726j:plain

デザイン>カスタマイズ>デザインCSSへ以下のソースを貼りつけます。

CSS解説

マウスのカーソルを合わせた時の調整

/* マウスカーソルをあわせた時 */
#stoc:not(.touch) a:hover {
background-color: rgba(0,0,0,.05);
text-decoration: underline;
/*color: #333;*/
}

65~69行目でマウスのカーソルを合わせた時の反応を調整できます。

background-color: rgba(0,0,0,.05);

ここで色を入力すると、背景の色を変更出来ます。#FFFFFF等のコードでも可能です。

/*color: #333;*/

 ここの「/*」と「*/」を外せば文字色を変更出来ます。

現在位置時の目次の調整

/* 現在位置 */
#stoc .active {
background-color: rgba(0,0,0,.05);
/*color: #333;*/
}

ここは上の説明と同じで、background-colorで背景色を、
colorで文字色を変更することが出来ます。

最後に

HTML、Javascript、CSSを所定の場所にコピペ出来ましたでしょうか?
これで目次が出てきているはずです。

私はそんなにHTMLやCSSに詳しくありませんので、
下記サイト様を参考に、コードを調整させて頂きました。ありがとうございます。
細かい設定や、不具合が起きた場合について色々記載されてますので、参考下さい。

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

というか、もともとコードに詳しくないので、
ご質問頂いても、本当に初歩的なことしか回答出来ないと思います・・・!
リンク先のサイトを見てください。ごめんなさい!🙇

合わせて読みたい"ブログカスタマイズ"の記事