はじめに
本はてなブログに「目次に戻るボタン」を設置してみました。
方法はとても簡単なので、是非参考にしてみて下さい。設置方法は以下の方法を参考にしました。
【はてなブログ】上に戻るよりも<目次に戻るボタン>を設置しよう！ - るいのブログ
本記事では外部CSSの「Font Awesome」は使わず、はてなブログ標準のアイコンでボタン作成する方法を載せています。
やること
必要な追加事項は以下の３点です。
- デザインCSS にコードを追加する
- 記事下HTMLにコードを追加する
- 目次の1行上にコードを追加する
「記事下HTML」ってどこ？？ってこの記事を見ている多くの方は思ったのではないでしょうか。以降順に解説してゆきます。
デザインCSS にコードを追加する
デザインCSSは以下の部分ですね。
デザイン > スパナマーク > 下にスクロール
以下のコードを追加
/*目次に戻るボタン*/ .hi-mkj { display: inline-block; position: fixed; bottom: 20px; left: 13px; height: 60px; width: 60px; line-height:60px; text-align: center; opacity: 0.7; border-radius: 50%; z-index: 5; text-decoration: none!important; background: #fff!important; border: 1px solid #668ad8; color: #668ad8!important; } .hi-mkj:after { content: "目次へ"; position: absolute; top: 15px; left: 14px; font-size: 10px; } .hi-mkj:before { font-family: blogicon; content: "\f039"; position: absolute; top: -2px; left: 17px; font-size: 26px; }
これでデザインCSSの準備はOKです。
目次のアイコンについて補足
ここで一つ押さえておきたいのは以下の部分です。
font-family: blogicon; content: "\f039";
「font-family: blogicon;」とすることではてなブログで標準的に利用が可能なアイコンを使うことができます。
利用ができるアイコンは他にもたくさんあり以下のサイトにまとまっていましたので参考にさせて頂きました。
はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG
アイコンは「Font Awesome」と呼ばれる外部ライブラリを利用していることが前提でしたが、目次のアイコン程度なら、はてなブログ標準アイコンで良いと思っています。
※バージョンが変わったりすると面倒なので今のところ自分は使ってないです。
すでに Font Awesome を利用している方であれば、上記の font-family と content の部分を適宜変更してもOKです。
記事下HTMLにコードを追加する
こちらは今まで自分は触れたことがありませんでしたが、以下の部分になります。
デザイン > スパナマーク > 下にスクロール > 「記事」を選択
スクロールすると、「記事下HTML」という箇所が見えます。
「記事下HTML」に以下のコードを追加します。
<a href="#link" class="hi-mkj"></a>
これで各記事に目次が設置されたはずです。
目次の1行上にコードを追加する
最後に、目次に戻るボタンを押下したら目次に戻るようにします。
カラクリとしては、目次に戻るように見せているだけで、
目次の１行上の部分に目次に戻るボタンがリンクする要素を作っておくのです。
目次自体の設置方法は省略しますが、目次を表す[:contents]の1行上に以下のコードを追加します。
<p><a name="link"></a></p>
以下のようになればOKです。
以上、はてなブログの記事に目次を設置する方法でした。上手くボタンの追加と目次へのリンクが成功したでしょうか。
最後までご覧頂きありがとうございました。
