カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

Jimdoウェブデザイン
リスト行頭の点や数字を変更する

Jimdoで番号なしリストを設定したときの点(・)、番号付きリストを設定したときの数字(1、2、3)の種類は変更することができます。

ただ、既存のメニューからは変更できないので、ヘッダーでCSSコードを記述します。

番号なしリストの点(・)を変更する方法

  1. コンテンツ「文書」から「番号なしリスト」を設定します。
  2. Jimdo「文書」から「番号なしリスト」を選択する
  3. 管理メニューから「基本設定」→「ヘッダー編集」を選択します。
  4. 下記コードをコピーして、ヘッダー編集画面にペーストします。
  5. <style type="text/css">

    ul {
      list-style: circle;
    }

    </style>
    ヘッダーにCSS(ulセレクタ)を記述する
  6. 保存して完成です。
  7. 番号なしリストの点(・)の種類を白丸に変更

これで、番号なしリストの点(・)の種類を白丸に変更できました。

ulは、"unordered list"の略で、番号なしリストを表すCSSセレクタです。続く{・・・}の中に、どのようなデザイン上の調整を行うかを記述します。

list-styleでは、リストのデザインを一括指定することができます。種類を変更するだけなら、list-style-typeでも構いません。

circleは、白丸になります。circleは、適宜次のように変更してみてください。

  • 黒丸:disc(デフォルト)
  • 白丸:circle
  • 四角:square
  • なし:none

番号付きリストの番号(1、2、3)を変更する方法

  1. コンテンツ「文書」から「番号付きリスト」を設定します。
  2. Jimdo「文書」から「番号付きリスト」を選択する
  3. 管理メニューから「基本設定」→「ヘッダー編集」を選択します。
  4. 下記コードをコピーして、ヘッダー編集画面にペーストします。
  5. <style type="text/css">

    ol {
      list-style: lower-latin;
    }

    </style>
    ヘッダーにCSS(ulセレクタ)を記述する
  6. 保存して完成です。
  7. 番号付きリストの番号をアルファベット小文字に変更

これで、番号付きリストの「1、2、3」が「a. b. c.」に変更できました。

olは、"ordered list"の略で、番号付きリストを表すCSSセレクタです。続く{・・・}の中に、どのようなデザイン上の調整を行うかを記述します。

list-styleは同様に、リストのデザインを一括指定することができます。

lower-latinは、小文字アルファベットです。lower-latinは、次のように適宜変更してみてください。

  1. 数字:decimal(デフォルト)
  2. 0付き数字:decimal-leading-zero
  3. アルファベット小文字:lower-latin
  4. アルファベット大文字:upper-latin
  5. 漢数字:cjk-ideographic
  6. ひらがな:hiragana
  7. カタカナ:katakana
  8. いろは:hiragana-iroha
  9. イロハ:katakana-iroha
  10. ローマ数字小文字:lower-roman
  11. ローマ数字大文字:upper-roman
オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter

教習所の口コミ投稿サイトレビュープラスを立ち上げました。ぜひ経験談や感想をお寄せください!