JIN

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

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

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。
シンプルバージョン
色塗りバージョン
MENくん
MENくん
2種類作ってみました!
くま3号
くま3号
色塗りバージョンはJINっぽい色にしてみたんだね

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

[toc]

カスタマイズの準備

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

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

その場所は

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

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

<a href="#toc_container"  class="tomkj tomkj-color"><p>目次へ</p><p>GO</p></a>
MENくん
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くん
MENくん
色を変更したいときは、.mkj-colorのカラーコードを変更してくださいね

まとめ

個人的には目次へGOのボタンはトップへ戻るボタンよりも使いやすいです!

SANGOのメインカスタマイズ(?)サイトはこちら

ここにボックスタイトルを入力

 

関連記事