この記事について
この記事は、ブロックエディタ対応の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. 2桁の数値
- 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;
}
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
2桁の数値
カスタム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;
}
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
- リストのリストマーカーの種類
この記事を書いた人
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。