はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法2019-08-18はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法ブログカスタマイズこんばんは。最近ブログのデザインを、いじり倒してる今日この頃でございます。一区切りついたので、私のブログに取り入れた内容をボチボチ紹介していきたいと思います。今回ご紹介したいのはサイドバーに追従する目次でございます。追従する目次を設置した次第で御座います。「サイドバーへ固定・追従する目次」はスマホには対応しておりません。レスポンシブ対応でも特に問題はございませんが、スマホでは表示されなくなります。スマホの小さい画面でサイドバー表示されても邪魔ですけどね!サイドバーへ固定・追従する目次とは?そもそも、サイドバーへ固定・追従する目次とは何ぞや?というところから説明いたします。記事中サイドバーに表示されたまま、追従する目次のことです。上記写真の右側黄色枠で囲ったものが、実際に追従している目次になります。基本的には下記3つのコードをコピー&ペーストで設定できます。HTMLデザイン>サイドバー>モジュールを追加>HTMLへ下記のコードを貼りつけます。HTML解説タイトルは何も記載しなくて構いません。ここで作ったサイドバーのモジュールは記事ページを開いたときにのみ表示されます。いうコードを口述のcssで記載します。Javascriptデザイン>カスタマイズ>フッターへ下記のコードを貼りつけます。10;33行目のこの値で、目次の上側の余白を指定できます。下側へ目次を固定したい場合は、この数値を大きくしてください。CSSデザイン>カスタマイズ>デザインCSSへ以下のソースを貼りつけます。#333;*/}65~69行目でマウスのカーソルを合わせた時の反応を調整できます。rgba(0,0,0,.05);ここで色を入力すると、背景の色を変更出来ます。#FFFFFF等のコードでも可能です。#333;*/ここの「/*」と「*/」を外せば文字色を変更出来ます。#333;*/}ここは上の説明と同じで、background-colorで背景色を、colorで文字色を変更することが出来ます。最後にHTML、Javascript、CSSを所定の場所にコピペ出来ましたでしょうか?これで目次が出てきているはずです。下記サイト様を参考に、コードを調整させて頂きました。ありがとうございます。細かい設定や、不具合が起きた場合について色々記載されてますので、参考下さい。blogというか、もともとコードに詳しくないので、ご質問頂いても、本当に初歩的なことしか回答出来ないと思います・・・!リンク先のサイトを見てください。18:30はてなブログで、サイドバーへ固定・追従する目次をコピペで簡単設置方法Tweet関連記事2019-08-14【はてなブログ】にほんブログ村のランキングをサイドバーへ表示する方法こんばんは。わたくし最近、にほんブログ村に登録しました。...2019-08-05【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法みなさまこんばんは。L...👈宜しければポチっとお願いします最後までお読み頂き、ありがとうございました。気軽に読者登録して頂ければ幸いです。レビュアーランキングで上位10位以内を狙う方法...2019-10-26仕事の整理術まとめ。関連記事2019-08-25はてなブログで、アンケートをコピペで簡単設置方法2019-08-14【はてなブログ】にほんブログ村のランキングをサイドバーへ表示する方法2019-08-05【カスタマイズ】はてなブログで「画面固定シェアボタン」を簡単コピペ設置方法2019-07-30【2019年最新版】はてなブログProの始め方と追加設定、注意点をまとめてみた2019-07-22【ブログカスタマイズ】はてなブログで、トップへ戻るボタンをコピペで簡単設置方法(HTML/CSS)このサイトについてプライバシーポリシーお問い合わせ。