テンプレートのHTMLソースに目次のソースを追加する
あああ
- ブログのデザイン設定を表示する
- メニューからテンプレートを選択する
- HTMLの編集ボタンを押下してテンプレートのHTMLソースを表示
- 目次のCSSとHTMLソースを差し込み編集する
- テンプレートを保存ボタンを押下してHTMLソースを保存する
あああ
目次のCSSソース
テンプレートのHTMLソースでCSSが記述されているブロックに以下のCSSを追加する
.index-documents { background-color: #fafefd; border: 1px solid #22a7b1; box-shadow: 0 0 20px rgba(0, 0, 0, .2); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -goog-ms-border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius-topright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -goog-ms-border-top-left-radius: 5px; -goog-ms-border-top-right-radius: 5px; padding: 0px 15px 15px; margin-bottom: 20px; }
目次のHTMLソース
テンプレートのHTMLソースで目次を表示させたい部分に以下のHTMLを追加する
<b:includable id='index-document'> <b:if cond='data:blog.pageType != "item"'> <div class='index-documents' id='blog-contents'> <h2>Index</h2> <div> <ul style='list-style-type: disc; margin: 0px; padding-left: 15px;'> <b:loop values='data:posts' var='post'> <li style='padding: 3px 0px 3px 0px;'><a expr:href='data:post.url'><data:post.title/></a></li> </b:loop> </ul> </div> </div> </b:if> </b:includable>