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

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

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

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

シンプルパターン

色違い

色塗り

カスタマイズのポイント

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

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

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

カスタマイズするための
準備

目次へ戻る

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

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

ウィジェットにHTMLを書き込む手順

外観ウィジェット記事タイトル下広告(モバイル)

記事タイトル下広告(モバイル)にカスタムHTMLをぐぐぐっと入れます。

ここにコードを書き込んでいきます。

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

HTMLコード

「Table of Contents Plus(TOC+)」

「Easy Table of Contents」

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

プラグインはどっちを使ってる?

もくじを表示するプラグインは2つあります。 「Table of Contents Plus(TOC+)」 と 「Easy Table of Contents」 です。使っている方に対応するコードをコピーして使ってください。

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

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です
MENくん
なんで3パターン作ったんやろか、、

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

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

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

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

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

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

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

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

まとめ

追加CSSのまとめ

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

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

MENくん
カスタマイズのアイディアが出るとついついやっちゃうね
くま3号
それはお前だけだぞ、はよ記事かけ

コメントを残す

メールアドレスが公開されることはありません。