JINカスタマイズ｜目次へ戻るボタン

この記事ではスマホ表示のときにちょこんと現れる「目次へGOボタン」を作ってみたカスタマイズを紹介します。

カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

シンプルバージョン

色塗りバージョン

MENくん

2種類作ってみました！

くま３号

色塗りバージョンはJINっぽい色にしてみたんだね

このカスタマイズをする前に上に戻るボタンは非表示にしておいてくださいね。それと関連記事や前の記事、次の記事のカードとは被ってしまいます。

[toc]

Contents

カスタマイズの準備
1. 目次へGOボタンの元となるコードを記入
2. カスタマイズコード（CSS）を書く準備
カスタマイズのコード
まとめ

カスタマイズの準備

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

今回のカスタマイズでは、元となるコード（HTML）をある場所へ記入しておく必要があります。

その場所は

広告管理＞【記事タイトルの下に表示される広告】＞スマホの部分です。

ここにこちらのコードを入れてください。

<a href="#toc_container"  class="tomkj tomkj-color"><p>目次へ</p><p>GO</p></a>

MENくん

コピペして「変更を保存」をお知らた、元となるコードの準備は完了です！

カスタマイズコード（CSS）を書く準備

子テーマを使用している方は、style.cssを開いてください。追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

CSSコード（シンプルバージョン）

.tomkj {
    display: inline-block;
    position: fixed;
    bottom: 125px;
    right: 13px;
    height: 58px;
    width: 58px;    
    text-align: center;
    opacity: 0.6;
    border-radius: 50%;
    z-index: 9;
    font-size: .8em;
    text-decoration: none!important;
}
.tomkj-color{
    background: #fff!important;
    border: 1px solid #424242;
    color: #424242!important;
}
.tomkj p {
    padding-bottom: 0px;
    margin-top: 6px;
    margin-bottom: -12px;
}
.tomkj p:last-child {
    font-size: 1.4em;
}

CSSコード（色塗りバージョン）

.tomkj {
    display: inline-block;
    position: fixed;
    bottom: 125px;
    right: 13px;
    height: 58px;
    width: 58px;    
    text-align: center;
    opacity: 0.6;
    border-radius: 50%;
    z-index: 9;
    font-size: .8em;
    text-decoration: none!important;
}
.tomkj-color{
    background: #3B4675!important;
    border: 1px solid #3B4675;
    color: #fff!important;
}
.tomkj p {
    padding-bottom: 0px;
    margin-top: 6px;
    margin-bottom: -12px;
}
.tomkj p:last-child {
    font-size: 1.4em;
}

MENくん

色を変更したいときは、.mkj-colorのカラーコードを変更してくださいね