最近ブログページのカスタマイズを頑張ってます。
こんなことできたらいいなと思っていたことが
少しずつ形になっていくのは嬉しいですね。
今回は調整に苦労した
目次(アンカーリンク)の設置方法について紹介しておきます。
Blogger 目次設置方法
目次をつけるためまず検索
同じBloggerを利用した記事を参考にさせていただきました。
Bloggerで簡単に目次をつける方法｜moca＊Blogger「Tokyo」
私が現在利用しているのは
BloggerにもともとあるEmporioというテーマしたが、
記事の通りにコピペして保存することで
無事に目次を設置することができました。
見出しタイトル隠れ 位置調整
目次をクリックすると
タイトル部分が固定ヘッダーで
見出しタイトルが隠れてしまう問題が起きました。
アンカーリンク先の位置の調整が必要です。
見出し部分が綺麗に表示されるにはどうしたら良いんだろう・・・。
色々検索したところ
paddingで余白を増やすことで調整する方法を見つけました。
固定バーの幅分paddingで調整
html{ の後に(ctrl＋Fで検索画面)
scroll-padding-top: 70px; を入れて調整。
綺麗にタイトルが表示されるようになりました。
pxの前の数字を変更することで微調整できましたよ。
その後スマホ画面でも確認したところ
上手く表示されなかったので
scroll-padding-top: 100px; に変更しました。
トップページの収まりはよくなりましたが
記事ページでは
Twitterやフィードを入れた部分が
本文で隠れてしまう不具合が出ています。
記事ページでの掲載を減らすか
全文表示されるようにできたらいいな・・・。
参考にさせていただいたのはこちらのページ
アンカーリンクのジャンプ先の余白をCSSで調整する。
見出し（Hタグ）上部にもう少し余白が欲しい！
余白の調整は、marginでも調整できるようですよ。
とりあえず見た目は大丈夫そう。
ほぼコピペだけどどこに挿入していいか戸惑ってしまいました。
本当はまだまだ気になるところはありますが、
すこしずつ改善していきたいと思います。
