目次へGOボタンを作ってみた

こんな感じのボタン

MENくん
目次へひとっ飛び!
くま3号
目次までの導入文が長いときに使えそうやな
CUSTOM POINT
スマホ表示のときだけ、目次へシュパッと行けるボタンを作ってみました。アイキャッチ画像はカスタマイズで非表示にしています。
注意
このカスタマイズはモバイルのときだけ表示されます。

カスタマイズの準備

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

目次へGOボタンの元となるコード

投稿画面のテキストエディタ最上部にこちらのコードをぶち込みます。

MENくん
元となるコードはこれだけです!次はCSSコードの準備です。

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう!

夏だしどっか行こう!

カスタマイズコードの追加

コメントありのカスタマイズコード

コメントなしのカスタマイズコード

あるページだけ適用させたい場合

プラグインのPer page headを使うとページ毎にコードを追加できます。

MENくん
こいつは(カスタマイザーにとっては)最高のプラグインやで!

カスタマイズがうまくいったか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ

追加CSSのまとめ

スマホ表示だとコンテンツが縦長になるので、目次へシュッといけるボタンがあると良いかもしれませんね。

MENくん
パッパッパっと目的の場所に行きやすいね