【賢威8】ページ表示時、目次を閉じた状態にする

賢威（賢威8を使用しています）では、記事に目次を表示させる機能があります。
こちらを使用してみると、記事内のh1、h2などのタイトル用のタグを元に自動で目次を生成してくれます。

たいへん有難い機能です。ただ、目次は開いた状態で表示されます。→目次を閉じた状態にできる機能ができたようです（2019年4月25日追記）。こちらを閉じた状態でページ表示する方法をご紹介します。

※本記事は、「基本的には目次は開いていてOKだが、特定の記事の場合には閉じたい」という方に向けての内容になります。よって、記事ごとに設定するタイプの方法です。

目次を閉じた状態にする方法（賢威8）

賢威で記事を投稿する際、記事を書く画面の下の方に「この投稿のみに表示するCSS / JS」という項目があるかと思います。

そちらに下記を記述すると、目次が閉じた状態で表示されます。
※「・・・jquery/1.12.4/jquery.min.js」の部分はご自身がダウンロードされたjqueryを読み込む形でも問題ありません

※jqueryの1.12.4を使用しています

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  if ($('.toc-area_btn').hasClass('toc-area_btn_close')) {
    $('.toc-area_btn').addClass('toc-area_btn_open');
    $('.toc-area_btn').removeClass('toc-area_btn_close');
    $('.toc-area_list').slideUp('fast');
  }
});
</script>

簡単な説明

対応内容は単純です。

目次の「閉じる」ボタンを押したときの動作をページ読み込み時に一度行います。

これで目次が閉じた状態になります。

その他のバージョンについて

その他のバージョンについて、同じ方法で対応できるかどうかは不明です。クラス名等が変わっていれば、動作しないと思います。

もし別バージョンで動作しない場合は、バージョンを教えていただければ、時間があれば確認・追記しますので、コメントいただければと思います。
※忙しい場合は確認できない場合もあります。ご了承くださいm(__)m

（余談）どういった時に目次を閉じたい？

私が目次を閉じたいと思った記事（只今書き途中）があります。その記事は、「暇なときにでも読み流してもらえれば」と考えている内容です。

その内容とは、私（プログラマ・コーダ）が使用しているショートカットをご紹介しようというものです。内容的に目的を持って探すというより、見ていく中で、「こんなのあるんだ」と何か見つかれば幸いと思っています。そのような気持ちで書いている記事なので、あえて目次で探す必要はないかなと考えています。

ただ、一覧でざっと見るには目次がベストです。ですが、この記事はタイトルが多く、それに伴い目次部分がとても長くなります。そうすると、記事に辿り着くまでに、数スクロールしないといけません。もしくは、目次を閉じていただく必要があります。

スクロールにしても、閉じるにしても、読者の方に手間が掛かります。という理由から、今回の対処法を考えました。

対処法

下記2点でユーザビリティ的には悪くないと思っています。（個人的にですが（汗））

• ページを開いたときは目次を閉じた状態
• 文頭に「一覧で見たい方は目次を開いてご確認ください」と記述

少しでも「読みやすい」と感じていただけるよう日々考えていきたいです。

スポンサーリンク