閉じる
閉じる

あまめも

目次のテンプレートっぽいものを作ろうとローテクで頑張ってみた

こんにちは! あますた(@amaguristar)です。

先日、ブログに目次必要かな?と思ったのでローテクでサクッと作りましたが、「実際に使わないと意味ないよな・・・」と思いいつでも使えるようにテンプレートを作成してみました。

 

サクッと使えるように作成

とりあえず見た目から作成。

目次

こんな感じ。デザインは下記サイトが分かりやすいので好みで変更してください。

目次リストは上記サイトを参考に下記cssを作成してます。

dl.ctk-index {
    background: #fcfcfc;
    padding: 0.5em 0.5em 0.5em 2em;
    border: solid 3px gray;
}
dl.ctk-index li {
    line-height: 1.5;
    padding: 0.5em 0;
    list-style-type: none!important;
}

実際に使う時は、

<dl class=”ctk-index”>
<dt>目次</dt><dd><ul>
<li><a href=”#”>1.内容1</a></li>
<li><a href=”#”>2.内容2</a></li>
<li><a href=”#”>3.内容3</a></li>
<li><a href=”#”>・・・</a></li>
<li><a href=”#”>まとめ</a></li>
</ul></dd></dl>

をスニペットに登録。あとはidを設定して完了。せっかく目次テンプレート作ったし、順次気づいたところから目次追加していこう!

関連記事

  1. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  2. リストテンプレートも作っておいた方がいいかな?と思ったので作成!…

  3. take067-thumbnail

    【WaznFilm更新】新感覚陣取りゲーム「Potlatch K…

  4. 特殊文字

    特殊記号を数字参照(コード直打ち)して文字化けを回避する方法

  5. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

  6. コロナ対策

    簡単!飲食店オーナーの「連絡先の把握に努める」というコロナ対策の…

こんなメモもありますよ♪

  1. むささんじん 看板

Twitter

ページ上部へ戻る