Hexoのテーマ「matery」カスタマイズしたい！目次のクリック先を下にずらしたい！

このブログは、Hexoの materyでブログを書くために、カスタマイズしたところをまとめてみました。備忘録として書いています。

　今回の内容

• ページ内リンクのリンク先を変えたい！
• 参考にしたサイト
• もともとmateryに入ってるtocの修正方法
• npm install hexo-toc –saveの修正
• まとめ
• カテゴリ一覧

ページ内リンクのリンク先を変えたい！

hexo公式サイト「matery」より引用

もともとmateryに入っている目次（toc）をクリックしても、

npm install hexo-toc --saveの目次をクリックしても、

見出しが画面上部に重なってしまい、もう少し下に表示してほしい！と思って、

検索しまくりました。

コードをコピペしても、うまくいかない・・。

やっと解決方法のサイトを見つけ、解決できました！

参考にしたサイト

参考記事 目次の修正

unibloさま - npm install hexo-toc --saveの修正

ほんとうに感謝でいっぱいです。

もともとmateryに入ってるtocの修正方法

• ディレクトリ

matery/css/matery.css

h2タグに、

border-top: 80px solid #fff;

を追加しました。

見出しの上部に太い線を引き、背景と同じ色で表示しています。

jsなどいじればできるかと思うのですが、わからず・・。

色々なサイトを見て、コピペしてみましたが、ハンバーガーアイコンがクリックしても画面上部に戻るようになってしまったりと。

npm install hexo-toc –saveの修正

• ディレクトリ

matery/source/css/matery.css

挿入する場所は特に指定なし。

:target::before {
content: "";
display: block;
height: 100px; /* ずらしたい高さ */
margin-top: -100px; /* heightに対するネガティブマージン */
visibility: hidden,
}

まとめ

今回、「Hexoのテーマ「matery」カスタマイズしたい！目次のクリック先がうまくいかない！」のお話をしました。

ほんとうに時間がかかりました。

やっとできて一安心です。

参考にさせていただいたHPはこちら ＞＞ リンク先

参考にさせていただいたHPはこちら ＞＞ 参考記事：daddytreviaさま

最後まで読んでいただき、ありがとうございました。

はつごかんでした。

関連コンテンツ

まずはじめにしたこと

■hexo

「materyの中のconfig.yml」

■hexo

広告がクリックできない！

■hexo

aboutのcategoriesやtagのリンクが飛ばない！

■hexo

メニューバーとトップの色をなしにしたい！

■hexo

目次が別タブになる！

■hexo

目次のクリック先がうまくいかない！

■hexo

記事の上の写真をなくしたい！

■hexo

カテゴリ一覧

■育児

■家計術

■シニア・介護

■グルメログ

■HEXO

■イラスト