wordpress【JIN】＆ Easy Table of Contentsを使用して目次を作成しよう〜

ブログ徘徊していると、色々な目次を目にすることがあると思います。 私も触発されて導入を試みました。

オレ「 目次作りたい…。」

ハトさん「向上心はよし。」

Easy Table of Contentsのススメ

JINには標準で目次機能があります。ですが、推奨しているプラグインの「Table Of Contents Plus」略してTOCの更新は５年以上も前の表示が……

そんなところ、ネットを漁っていると同じような目次プラグインがあることを知りました！ [blogcard url="https://ja.wordpress.org/plugins/easy-table-of-contents/"] 導入は下記のサイトがわかりやすいです！ www.braveryk7.com

実際に使用してみた感想。

設定もデフォルトのまま、追加CSSもデフォルトのまま…省燃費。

/* Easy Table of Contentsの外観をJIN標準のTOC+風に */

#ez-toc-container {
    background: #fff !important;
    border-radius: 2px;
    color: #666;
    font-family: 'Quicksand', 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
    overflow: hidden;
    letter-spacing: 1px;
    position: relative;
    padding: 0;
    margin-bottom: 40px;
    width: 100% !important; 
}

#ez-toc-container:before {
    position: absolute;
    content: "";
    border: 4px solid #3A4675;
    width: 100%;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    opacity: 0.15;
}

#ez-toc-container .ez-toc-title-container {
    color: #3b4675!important;
    margin-bottom: 1px;
    margin-top:1px;
    font-size: 1.65rem;
    text-align: center;
    position: relative;
    line-height: 2rem;
}

#ez-toc-container.contracted .ez-toc-title {
  padding: 0px 40px; }
  @media (max-width: 767px) {
    #ez-toc-container.contracted .ez-toc-title {
      margin-top: 35px !important;
      margin-bottom: 35px !important; } }
  @media (min-width: 768px) {
    #ez-toc-container.contracted .ez-toc-title {
      margin-top: 45px !important;
      margin-bottom: 45px !important; } }

#ez-toc-container .ez-toc-title {
  text-align: center;
  position: relative;
  line-height: 2rem; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-title {
      margin-bottom: 0px;
      margin-top: 35px;
      font-size: 1.45rem; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-title {
      margin-bottom: 10px;
      margin-top: 45px;
      font-size: 1.65rem; } }

#ez-toc-container ul:not([class]) li:before {
  display: none; }

#ez-toc-container .ez-toc-list {
  list-style-type: none !important;
  counter-reset: li; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-list {
      padding: 0 25px;
      padding-bottom: 30px; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-list {
      padding: 0 60px;
      padding-bottom: 40px; } }

#ez-toc-container .ez-toc-list > li {
  list-style-type: none !important;
  position: relative;
  margin-left: 6px;
  padding-left: 40px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  line-height: 1.35rem; }

#ez-toc-container .ez-toc-list > li:after {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 5px;
  top: -1px !important;
  background: none;
  font-family: 'Quicksand',  sans-serif;
  letter-spacing: 2px;
  font-size: 1.2rem;
  letter-spacing: -1px; }

#ez-toc-container .ez-toc-list > li:first-child:after {
  left: 8px; }

#ez-toc-container .ez-toc-list > li:nth-child(3):after {
  left: 6px; }

#ez-toc-container .ez-toc-list > li:nth-child(11):after {
  letter-spacing: 0.15rem; }

#ez-toc-container .ez-toc-list > li > a {
  text-decoration: none !important;
  font-size: 0.95rem;
  line-height: 1.35rem; }

#ez-toc-container .ez-toc-list li a {
  color: #3b4675 !important;
  display: block; }

#ez-toc-container .ez-toc-list > li a:hover {
  text-decoration: underline !important; }

#ez-toc-container .ez-toc-list > li ul {
  margin-top: 10px;
  padding-left: 0px;
  margin-bottom: 18px; }

#ez-toc-container .ez-toc-list > li > ul > li {
  margin-bottom: 5px;
  padding-left: 33px; }

#ez-toc-container .ez-toc-list > li > ul > li a {
  position: relative;
  text-decoration: none !important; }
  @media (max-width: 767px) {
    #ez-toc-container .ez-toc-list > li > ul > li a {
      line-height: 1.15rem;
      font-size: 0.8rem; } }
  @media (min-width: 768px) {
    #ez-toc-container .ez-toc-list > li > ul > li a {
      line-height: 1.25rem;
      font-size: 0.85rem; } }

#ez-toc-container .ez-toc-list > li > ul li a:before {
  position: absolute;
  content: "・";
  font-size: 2rem;
  left: -25px;
  top: 0px; }

#ez-toc-container .ez-toc-list > li > ul > li > ul {
  margin-top: 5px; }

#ez-toc-container .ez-toc-list > li > ul > li > ul > li a {
  font-size: 0.75rem; }

#ez-toc-container .ez-toc-title a {
  text-decoration: none;
  font-size: 0.75rem; }

.ez-toc-number {
  display: none; }
  
 
#ez-toc-container .ez-toc-title {
    display:inline-block;
    vertical-align: middle;
}

#ez-toc-container .ez-toc-title-toggle:before {
    content: '[';
 }
 
#ez-toc-container .ez-toc-title-toggle:after {
 content: ']';
 }
 
#ez-toc-container .ez-toc-title-toggle {
    display: inline;
    vertical-align: middle;
}

#ez-toc-container .ez-toc-title-toggle > a {
    text-decoration: none;
}

#ez-toc-container .ez-toc-btn-default {
    background-image: none;
}

#ez-toc-container .ez-toc-icon-toggle {
    font-size: 0.75rem;
}

#ez-toc-container .ez-toc-icon-toggle:before {
    content: 'hide';
}

#ezw_tco-3 .ez-toc-widget-container ul.ez-toc-list li.active {
    background-color: #f5f5f5;
}

野獣先輩 CSS長スギィ！ 先輩も悲鳴を上げていますが、こういうのを見るとWEBを本業でヤッている人ってすごいなぁって尊敬します。自分も頑張って覚えていきたいです。

まとめ

今回の記事は研究と勉強のために参考サイトを元になるべく同じ構成になるようには作成してみました。

結論としてはTable Of Contents Plus＆JINとEasy Table of Contents,どちらの組み合わせでもいいかなぁと思いました…

しかし、やはり更新頻度高いほうが信頼はできるのも事実。

ハトさん「更新ガンバやで、オレさん。」