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

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

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

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

こんな感じで変更

シンプルパターン

 

色違いパターン

 

色塗りパターン

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

カスタマイズの準備

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

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

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

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

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

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

HTMLコード

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

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

3つのコード追加方法

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

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

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

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

夏だしどっか行こう!

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

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

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

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

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

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

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

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

確認の手順

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

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

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

まとめ

追加CSSのまとめ

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

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

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

Amazonでお得にお買い物する方法

お金をコンビニ・銀行(ATM・ネットバンキング)でお支払い。

チャージタイプめんどくさいギフト券番号の登録はいりません

Amazonを使う人にとってベストな選択を

チャージ額とポイント

チャージ額とポイント