シリウスでも簡単に作れる！閉じれる(開閉式）目次 コピペで使えるサンプル付き

 こんにちは　管理人のtakeyama　です。

 

昔は、どのアフィリエイトサイトをみても

 

目次が付いている記事はほとんどなかったです。

 

しかし、

 

ワードプレスの

　

table of contents Plus　というプラグインが広まってから

 

アフィリエイトサイトにも

 

目次が付くのが当たり前みたいになってきました。

 

しかし、

 

アフィリエイターがつかう

 

サイト作成ツール　シリウスには目次のプラグインが　ありません。

（2017/09/19 現在）

 

シリウスで

 

目次を作るやり方を調べたら　

 

それっぽいのがありましたが

 

サンプルサイトがなく　キャプチャーのみでわかりずらかったり

キャプチャー引用：
Table of Contents Plus – 記事の目次を自動生成できるWordPressプラグイン | ネタワン 

目次を　表示させたり　非表示にさせたりできる　開閉式　のサンプルページ

上記のようなものがなかったので　

シリウスでも導入できる目次の作り方を公開します。

 

まず　導入するには　

 

HTML

 

CSS

 

JS（ jQuery（ジェイクエリー））

 

の設定をする必要があります。

 

そんな面倒臭い説明いらない　今すぐ教えてくれ！

 

ていう人が多いと思うので

 

コピペだけできるようにサンプルを公開します。

【レスポンシブ対応】シリウスに組み込める目次

jsファイルとscriptの読み込み

</body>の上にコピペ。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script> $(function() { $(".accordion dd").css("display","none"); $(".accordion dt").click(function(){ $(this).toggleClass("open").next().slideToggle("fast"); }); }); </script>

Demo

▼サンプル1

▼目次を開く▼

• リスト1
• リスト1
• リスト1
• リスト1

htmlソース

目次を入れたい箇所にコピペしてください。

<dl class="accordion" id="sample1"> <dt>▼目次を開く▼</dt> <dd> <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> </ul> </dd> </dl>

CSS

/*Reset*/ p,span,ul,li{ padding:0; margin:0;} ul li{ list-style-type:none;} /*common*/ .accordion { width:100%;margin:0 auto 30px;position:rerative; clear:both;box-sizing: border-box; border:1px solid #000000;} .accordion { background-color:#fff;}/*背景色*/ .accordion a { color:#000;opacity: 1;transition: 0.5s; display:block;text-decoration:none;padding:10px;} .accordion a:hover { opacity: 0.6;transition: 0.5s;} .accordion dt {display:block;cursor:pointer;} .accordion dd{ padding:0; margin:0;} .accordion ul,.accordion ul li{ list-style-image:none; list-style-type:none;} .accordion dt { font-size:100%;}/*目次タイトルのフォントサイズ*/ .accordion ul { font-size:100%;}/*リストのフォントサイズ*/ /*サンプル1*/ ul#sample1 ul {padding:0!important;border-top:1px solid #000000;} #sample1 dt {padding:10px;} #sample1 dt::before {content: '';position: relative;float: right;border: 8px solid transparent;border-top-color: #000;width: 0;height: 0;top: 5px; right: 0px;} #sample1 dt.open::before {content: '';position: relative;float: right;border: 8px solid transparent;border-bottom-color: #000;width: 0;height: 0;top: -5px;right: 0px;}

▼サンプル2

▼目次を開く▼

• リスト1
• リスト1
• リスト1
• リスト1

htmlソース

目次を入れたい箇所にコピペしてください。

<dl class="accordion" id="sample2"> <dt>▼目次を開く▼</dt> <dd> <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> <li><a href="#">リスト1</a></li> </ul> </dd> </dl>

CSS

/*Reset*/ p,span,ul,li{ padding:0; margin:0;} ul li{ list-style-type:none;} /*common*/ .accordion { width:100%;margin:0 auto 30px;position:rerative; clear:both;box-sizing: border-box; border:1px solid #000000;} .accordion { background-color:#fff;}/*背景色*/ .accordion a { color:#000;opacity: 1;transition: 0.5s; display:block;text-decoration:none;padding:10px;} .accordion a:hover { opacity: 0.6;transition: 0.5s;} .accordion dt {display:block;cursor:pointer;} .accordion dd{ padding:0; margin:0;} .accordion ul,.accordion ul li{ list-style-image:none; list-style-type:none;} .accordion dt { font-size:100%;}/*目次タイトルのフォントサイズ*/ .accordion ul { font-size:100%;}/*リストのフォントサイズ*/ /*サンプル2*/ #sample2 ul li{border-bottom:1px dashed #000000;} #sample2 ul li:last-child{border-bottom:none;} #sample2 dt {padding:10px; background-color:#000; color:#fff;} #sample2 dt::before {content: '';position: relative;float: right;border: 8px solid transparent;border-top-color: #fff;width: 0;height: 0;top: 5px; right: 0px;} #sample2 dt.open::before {content: '';position: relative;float: right;border: 8px solid transparent;border-bottom-color: #fff;width: 0;height: 0;top: -5px;right: 0px;}

注意

ソースを張り付けるときは
改行なしに設定してください！

シリウスに実際に入れ込んだサンプルはこうなります

シリウスに実際に入れ込んだサンプル