English
English

リストマーカーの種類(list-style-type)

久納 美幸

  1. HOME
  2. Staff Blog
  3. WordPress
  4. リストマーカーの種類(list-style-type)

この記事について

この記事は、ブロックエディタ対応のWordPressサイトに簡単にコピペして使えるコアのリストブロックを使ったブロックパターン集です。
WordPressコア側のリストブロックを使い、VK Blocks Pro版の「カスタムCSS」機能で追加のCSSカスタマイズをしたブロックパターンです。
ペースト先のウェブサイトには、サブスクライセンスのVektorPassportのご購入でご利用になれる VK Blocks Proプラグインが必要になります。

リストマーカーは、リストマーカーの種類を指定するCSSのlist-style-typeというプロパティで変更できます。
このプロパティを使うことで、リスト項目のマーカーの種類を指定することができます。
VK Blocks プラグインを使用すると、コアのリストブロックのスタイルが拡張され装飾がつきますが、そうではなくlist-style-typeプロパティだけで変更したい場合もあると思います。

この記事では、CSSの list-style-typeプロパティでリストマーカーを変えるブロックパターンを紹介しています。

目次

四角

カスタムCSS

selector {
 list-style-type:square;
}
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類

四角

白丸

カスタムCSS

selector {
 list-style-type:circle;
}
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類
  • リストのリストマーカーの種類

アルファベット大文字

カスタムCSS

selector {
 list-style-type:upper-alpha;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

アルファベット小文字

カスタムCSS

selector {
 list-style-type:lower-alpha;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

ローマ数字大文字

カスタムCSS

selector {
 list-style-type:upper-roman;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

ローマ数字小文字

カスタムCSS

selector {
 list-style-type:lower-roman;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

ギリシャ文字

カスタムCSS

selector {
 list-style-type:lower-greek;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

２桁の数値

カスタムCSS

selector {
 list-style-type:decimal-leading-zero;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

アルメニア数字

カスタムCSS

selector {
 list-style-type:armenian;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

グルジア数字

カスタムCSS

selector {
 list-style-type:georgian;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

漢数字

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type:cjk-ideographic;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

十二支

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type:cjk-earthly-branch;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類

ひらがな

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type:hiragana;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

カタカナ

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type:katakana;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

いろは表示

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type:hiragana-iroha;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

イロハ表示

カスタムCSS

selector {
 padding-left: 2em;
 list-style-type: katakana-iroha;
}
  1. リストのリストマーカーの種類
  2. リストのリストマーカーの種類
  3. リストのリストマーカーの種類
  4. リストのリストマーカーの種類
  5. リストのリストマーカーの種類
  6. リストのリストマーカーの種類
  7. リストのリストマーカーの種類
  8. リストのリストマーカーの種類
  9. リストのリストマーカーの種類
  10. リストのリストマーカーの種類

この記事を書いた人

久納 美幸
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。

ご好評につきキャンペーン期間延長！
Vektor Passport

を買って

Evergreen を
無料でダウンロードしよう

Lightningで使えるおしゃれなデザインスキン / コンテンツデータを試せるチャンス！

キャンペーンを詳しく見る
PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。