この記事について
この記事は、ブロックエディタ対応のWordPressサイトに簡単にコピペして使えるコアのリストブロックを使ったブロックパターン集です。
WordPressコア側のリストブロックを使い、VK Blocks Pro版の「カスタムCSS」機能で追加のCSSカスタマイズをしたブロックパターンです。
ペースト先のウェブサイトには、サブスクライセンスのVektorPassportのご購入でご利用になれる VK Blocks Proプラグインが必要になります。
リストマーカーは、リストマーカーの種類を指定するCSSのlist-style-typeというプロパティで変更できます。
このプロパティを使うことで、リスト項目のマーカーの種類を指定することができます。
VK Blocks プラグインを使用すると、コアのリストブロックのスタイルが拡張され装飾がつきますが、そうではなくlist-style-typeプロパティだけで変更したい場合もあると思います。
この記事では、CSSの list-style-typeプロパティでリストマーカーを変えるブロックパターンを紹介しています。
目次
- 0.1. 四角
- 0.1.1. カスタムCSS
- 0.2. 四角
- 0.3. 白丸
- 0.3.1. カスタムCSS
- 0.4. アルファベット大文字
- 0.4.1. カスタムCSS
- 0.5. アルファベット小文字
- 0.5.1. カスタムCSS
- 0.6. ローマ数字大文字
- 0.6.1. カスタムCSS
- 0.7. ローマ数字小文字
- 0.7.1. カスタムCSS
- 0.8. ギリシャ文字
- 0.8.1. カスタムCSS
- 0.9. ２桁の数値
- 0.9.1. カスタムCSS
- 0.10. アルメニア数字
- 0.10.1. カスタムCSS
- 0.11. グルジア数字
- 0.11.1. カスタムCSS
- 0.12. 漢数字
- 0.12.1. カスタムCSS
- 0.13. 十二支
- 0.13.1. カスタムCSS
- 0.14. ひらがな
- 0.14.1. カスタムCSS
- 0.15. カタカナ
- 0.15.1. カスタムCSS
- 0.16. いろは表示
- 0.16.1. カスタムCSS
- 0.17. イロハ表示
- 0.17.1. カスタムCSS
四角
カスタムCSS
selector {
list-style-type:square;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
四角
白丸
カスタムCSS
selector {
list-style-type:circle;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
アルファベット大文字
カスタムCSS
selector {
list-style-type:upper-alpha;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
アルファベット小文字
カスタムCSS
selector {
list-style-type:lower-alpha;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
ローマ数字大文字
カスタムCSS
selector {
list-style-type:upper-roman;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
ローマ数字小文字
カスタムCSS
selector {
list-style-type:lower-roman;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
ギリシャ文字
カスタムCSS
selector {
list-style-type:lower-greek;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
２桁の数値
カスタムCSS
selector {
list-style-type:decimal-leading-zero;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
アルメニア数字
カスタムCSS
selector {
list-style-type:armenian;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
グルジア数字
カスタムCSS
selector {
list-style-type:georgian;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
漢数字
カスタムCSS
selector {
padding-left: 2em;
list-style-type:cjk-ideographic;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
十二支
カスタムCSS
selector {
padding-left: 2em;
list-style-type:cjk-earthly-branch;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
ひらがな
カスタムCSS
selector {
padding-left: 2em;
list-style-type:hiragana;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
カタカナ
カスタムCSS
selector {
padding-left: 2em;
list-style-type:katakana;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
いろは表示
カスタムCSS
selector {
padding-left: 2em;
list-style-type:hiragana-iroha;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
イロハ表示
カスタムCSS
selector {
padding-left: 2em;
list-style-type: katakana-iroha;
}- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
この記事を書いた人
-
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。
WordFes Nagoya（2013-2017）では、名古屋版わぷーを制作しました。
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。