ずっといる目次へGOボタン

WordPressテーマSANGOのちょっとしたカスタマイズを紹介します。

今回は「目次へGOボタン」を固定で表示するカスタマイズ方法について解説します。

MENくん

ちょこんと右下にいるのがかわいいよぉ!

こんな感じで変更

シンプルパターン

 

色違いパターン

 

色塗りパターン

CUSTOM POINT
モバイル表示の時、しかも記事ページのときだけちょこんと出てきます。簡単に色を変更できるようにしておきました。

カスタマイズの準備

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

HTMLをウィジェットに書き込みます

モバイル表示、しかも記事ページのみで表示させるコードを書くのがめんどくさかったので、SANGOのウィジェットを使います

ウィジェットにHTMLを書き込む手順
外観
ウィジェット
記事タイトル下広告(モバイル)
記事タイトル下広告(モバイル)にカスタムHTMLをぐぐぐっと入れます。
ここにコードを書き込んでいきます。
MENくん

目次へGOボタンの元となるコード(HTML)を記入するよ

HTMLコード

これをそのままコピペして保存完了を押してください。

くま3号

あとはいつもどおりCSS書いてしまいやな

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

カスタマイズ方法

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

追加CSSの使い方はこちら

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

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

MENくん

なんで3パターン作ったんやろか、、

コメントありのカスタマイズコード(シンプルバージョン)

MENくん

色を変えたいときは17~19行目のカラーコードを変更してくださいね

シンプルバージョンのカスタマイズコード

色違いバージョンのカスタマイズコード

色塗りバージョンのカスタマイズコード

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

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

まとめ

追加CSSのまとめ

目次へGOボタンは使いやすくて良さそうですね(*´罒`*)

このツイートのおかげです!感謝!

MENくん

カスタマイズのアイディアが出るとついついやっちゃうね

くま3号

それはお前だけだぞ、はよ記事かけ