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

こんな感じのボタン

MENくん

目次へひとっ飛び!

くま3号

目次までの導入文が長いときに使えそうやな

CUSTOM POINT
スマホ表示のときだけ、目次へシュパッと行けるボタンを作ってみました。アイキャッチ画像はカスタマイズで非表示にしています。
注意
このカスタマイズはモバイルのときだけ表示されます。

カスタマイズの準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

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

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

MENくん

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

コードを追記するための方法は3つ

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

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

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

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

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

MENくん

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

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

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

まとめ

追加CSSのまとめ

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

MENくん

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