ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
English

ベクトルパスポートを購入して無料で Evergreen をダウンロードしよう

詳しくはこちら
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）では、名古屋版わぷーを制作しました。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

ブロックエディターで

ABテストを


自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

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

PAGE TOP