Warning: Undefined variable $post in /home/c3809724/public_html/pote-chil.com/wp-content/themes/sango-theme-poripu/functions.php on line 13

Warning: Attempt to read property "ID" on null in /home/c3809724/public_html/pote-chil.com/wp-content/themes/sango-theme-poripu/functions.php on line 13

【JIN】目次が20倍可愛くなるカスタマイズ方法（サイドバー対応）

【JIN】目次を20倍可愛くするカスタマイズ方法(サイドバー対応)

SHARE


Warning: Undefined array key 4 in /home/c3809724/public_html/pote-chil.com/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/c3809724/public_html/pote-chil.com/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

くるみ

JINの目次さ、ちょっとありきたり感あるからカスタマイズしたいな

ということで今回は

  • JINを使っているが目次のデザインをもっといい感じにしたい
  • デフォルトのデザインもいいけど、他のサイトと被りがちだから差別化したい

という方に向けて、そんなJINの目次を可愛くするカスタマイズ方法をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

目次の完成イメージ

記事内の目次

before

JINのカスタマイズ前の記事内の目次

after

JINのカスタマイズ後の記事内の目次

JINのテーマカラー(?)である紺色を基調に仕上げてみました。

幅を少し狭めることにより記事内を圧迫せず、薄い影をつけることによって少しだけ目を惹くようにしています。

もちろんその基調の色を変えることも容易なのでご安心ください。

サイドバー追従の目次

before

JINのカスタマイズ前のサイドバー追従の目次

after

JINのカスタマイズ後のサイドバー追従の目次

こちらはウィジェットの「サイドバー追従」にセットした場合の目次です。

記事内の目次のデザインはもちろん踏襲しつつ、記事を読んでいる読者の目線を逸らさないように少し控えめなものにしました。
(※上の完成イメージの灰色の枠線は目次のものではありません)

注意
本カスタマイズは、JINで推奨されている目次生成プラグイン「Rich Table of Contents」専用のものになります。他の目次プラグインをご使用の場合はカスタマイズが反映されないためご注意ください。

JINの目次のカスタマイズ方法

手順は以下の通りです。

カスタマイズ手順
step1
「Rich Table of Contents」の設定を変更する
step2
CSSを追加する

バックアップは忘れずにしておこう

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法 ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

step1：「Rich Table of Contents」の設定を変更する

Rich Table of Contents

まず目次生成プラグイン「Rich Table of Contents」の設定を変更していきます。

「そもそもまだ目次すら作ってないよ」という場合はJIN公式の目次の作り方を参考にして、プラグインのインストールから有効化まで行ってください。

step1
「Rich Table of Contents」の設定ページへ

「Rich Table of Contents」の設定ページへ

管理画面の左のバーから「RTOC設定」をクリックします。
step2
表示させる見出しをh3までに変更

表示させる見出しをh3までに変更

すると設定画面が開くので、まずは「表示させる見出し設定」にて「H3まで表示」を選択します。
step3
「プラグインのCSSを読み込まない」を選択

「プラグインのCSSを読み込まない」を選択

ページ下部にある「プラグインのCSSを読み込まない」にチェックを入れてあげます。これでまっさらな状態からカスタマイズすることができます。
step4
保存

ページ下部にある「変更を保存」から保存してあげてください。

step2：CSSを追加する

次に、以下のどれかの方法でCSSのコードをコピペします。

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加
「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

/*--------------------------------------
目次(記事内)のカスタマイズ
--------------------------------------*/
.cps-post-main .rtoc-mokuji-content{
  margin: 0 auto 40px;
  border-radius: 10px;
  border-top: 5px solid #3b4675; /* お好きな色に変更 */
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  width: 75%;
  padding:20px 25px;
  background-color:#fefefe;
}
.rtoc-mokuji-content #rtoc-mokuji-title{
  display: block;
  padding: 0px;
  text-align: center;
  margin:5px 25px 30px 0;
  color:#3b4675; /* お好きな色に変更 */
  font-size:23px;
  font-weight:900;
}
.rtoc-mokuji-content #rtoc-mokuji-title:before {
  font-family:"jin-icons";
  content:"\e918";
  display:inline-block;
  margin-right: 5px;
}
#rtoc-mokuji-title button{
  display:none;
}
.rtoc-mokuji-content ol{
  padding:0 1.7em 0 1em;
}
.rtoc-mokuji-content ol>li:after{
  content:none;
}
.rtoc-mokuji-content a {
  display: block;
  border-bottom: dashed 1px silver;
  padding-bottom: .5em;
  line-height: 1.5;
  position: relative;
  text-decoration:none;
}
.rtoc-mokuji-content .level-1>.rtoc-item{
  font-weight: 900;
  padding-bottom: .3em;
  position:relative;
}
.rtoc-mokuji-content .level-1>.rtoc-item:before {
  font-family:"jin-icons";
  content:"\e902";
  background:none!important;
  left:2px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item {
  font-size: .9em;
  padding:.3em 1em .1em 1.1em;
  position:relative;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
  background:none!important;
  font-family:"jin-icons";
  content:"\e904";
  font-size:.1em;
  position:absolute;
  top:10px;
  left:0px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item a{
  color:#444;
  font-weight:400;
}
/* モバイル */
@media screen and (max-width: 480px) {
  .cps-post-main .rtoc-mokuji-content {
    padding:15px 5px;
  }
  .cps-post-main .rtoc-mokuji-content {
    width: 95%;
  }
}
/*--------------------------------------
目次(サイドバー追従)のカスタマイズ
--------------------------------------*/
#widget-tracking .rtoc-mokuji-content #rtoc-mokuji-title{
  font-size:20px;
  margin-bottom:25px;
}
#widget-tracking .rtoc-mokuji-content ol{
  padding:0 2em 0 1.3em;
}
#widget-tracking .rtoc-mokuji-content ol>li{
  padding-bottom:1em;
}
#widget-tracking .rtoc-mokuji-content .level-1>.rtoc-item:before {
  position:absolute;
  left:-19px;
  top:2px;
  font-size:.85rem;
}
#widget-tracking .rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
  top:8px;
}

.cps-post-main .rtoc-mokuji-content{
  margin: 0 auto 40px;
  border-radius: 10px;
  border-top: 5px solid #3b4675;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  width: 75%;
  padding:20px 25px;
  background-color:#fefefe;
}
.rtoc-mokuji-content #rtoc-mokuji-title{
  display: block;
  padding: 0px;
  text-align: center;
  margin:5px 25px 30px 0;
  color:#3b4675;
  font-size:23px;
  font-weight:900;
}
.rtoc-mokuji-content #rtoc-mokuji-title:before {
  font-family:"jin-icons";
  content:"\e918";
  display:inline-block;
  margin-right: 5px;
}
#rtoc-mokuji-title button{
  display:none;
}
.rtoc-mokuji-content ol{
  padding:0 1.7em 0 1em;
}
.rtoc-mokuji-content ol>li:after{
  content:none;
}
.rtoc-mokuji-content a {
  display: block;
  border-bottom: dashed 1px silver;
  padding-bottom: .5em;
  line-height: 1.5;
  position: relative;
  text-decoration:none;
}
.rtoc-mokuji-content .level-1>.rtoc-item{
  font-weight: 900;
  padding-bottom: .3em;
  position:relative;
}
.rtoc-mokuji-content .level-1>.rtoc-item:before {
  font-family:"jin-icons";
  content:"\e902";
  background:none!important;
  left:2px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item {
  font-size: .9em;
  padding:.3em 1em .1em 1.1em;
  position:relative;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
  background:none!important;
  font-family:"jin-icons";
  content:"\e904";
  font-size:.1em;
  position:absolute;
  top:10px;
  left:0px;
}
.rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item a{
  color:#444;
  font-weight:400;
}
@media screen and (max-width: 480px) {
  .cps-post-main .rtoc-mokuji-content {
    padding:15px 5px;
  }
  .cps-post-main .rtoc-mokuji-content {
    width: 95%;
  }
}
#widget-tracking .rtoc-mokuji-content #rtoc-mokuji-title{
  font-size:20px;
  margin-bottom:25px;
}
#widget-tracking .rtoc-mokuji-content ol{
  padding:0 2em 0 1.3em;
}
#widget-tracking .rtoc-mokuji-content ol>li{
  padding-bottom:1em;
}
#widget-tracking .rtoc-mokuji-content .level-1>.rtoc-item:before {
  position:absolute;
  left:-19px;
  top:2px;
  font-size:.85rem;
}
#widget-tracking .rtoc-mokuji-content .mokuji_ul.level-2>.rtoc-item:before{
  top:8px;
}
色を変えたい場合は「お好きな色に」とコメントアウトがあるところのカラーコードを変更してあげてください。

あともし「デザインを変えるのは記事内(サイドバー)の目次の方だけでいい」という場合は、「〇〇のカスタマイズ」とコメントアウトがあると思うのでいらない方のコードを消してあげればOKです。

ここまで来ればカスタマイズは終了。お疲れ様です。

お疲れ様！

くるみ

CSSの変更が反映されない場合の対処法

「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。

  • キャッシュ系プラグイン
  • プラウザキャッシュ

キャッシュ系プラグインを疑う

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows［Shift］＋［Ctrl］＋［Delete］キー
Mac［shift］＋［command］＋［delete」キー

まとめ

以上、JINのありきたりな目次を可愛くするカスタマイズ方法でした。

他のJINカスタマイズに関しては以下の記事でまとめているので、ぜひ参考にしてください。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。

前の記事

【コピペで解決】「第三者コードの影響を抑えてください」の解決法
【コピペで解決】「第三者コードの影響を抑えてください」の改善方…

次の記事

【JIN】ブログカードをより読みたくなるデザインにするカスタマ…
【JIN】ブログカードをより読みたいデザインにするカスタマイズ