閉じる
閉じる

あまめも

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

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

先日、「目次テンプレート」を作成。実際に使用しはじめたら思ったよりいい感じ。「これはついでに”リストのテンプレート”も作成しておこうかな?」って流れです。

 

目次

リストテンプレート

通常リストを使う時はこんな感じ、

  • list1
  • list2
  • list3
  • ・・・・
  • まとめ

これでもいいのですが、目次を使い始めたらちょっと・・・・。なんて言うか目次は頑張った感があるのに対して手抜き感が半端ない。

今回も下記サイトにお世話になります!

参考にしてこのページ用に調整をかけたのが、

  • list1
  • list2
  • list3
  • ・・・・
  • まとめ
  1. list1
  2. list2
  3. list3
  4. ・・・・
  5. まとめ

やっぱり文字の感覚は統一した方が良いですね。あとは「・」や「数字」の文字位置は枠から少し離れた方がゆったりしてるので好みです。実際のcssは、

ul.ctk-list, ol.ctk-list {
    background: #fcfcfc;
    border-radius :5px;
    box-shadow :0px 0px 3px silver;
    padding: 0.5em 0.5em 0.5em 2.5em;
}
ul.ctk-list li, ol.ctk-list li {
    line-height: 1.5;
    padding: 0.5em 0;
}

です。今後のリストはこちらを使用。今までの記事も順次変えていこう!

関連記事

  1. HTML

    【HTML】でタグや特殊記号を表示する方法【一覧】

  2. WordPressでMarkdownを使用し始めたのですが、マー…

  3. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  4. WordPressで『Twitter Cards』を設定するプラ…

  5. HTML

    <ol>タグの表示を変更する際のtype一覧リスト

  6. 【Mac】MAMPのMySQLを使ってコマンド入力する為のパスの…

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

  1. take092-thumbnail
  2. まぐろ人 店舗外観
  3. 提灯

Twitter

ページ上部へ戻る