今回はWordPressで簡単にリストを作成する方法とHTMLの記述の仕方を紹介致します。
【丸々コピペでOK】リストのデザイン集：HTML&CSSだけでおしゃれな見た目ににする方法はこちら
WordPressでリストの作成
WordPressではGutenberg（WordPress5.0以降標準エディタ）を使用すればワンクリックでリストを作成する事ができます。
投稿ページのブロックで『一般ブロック』の『リスト』をクリックで下記の様なリストを作成可能です。
- これがリストです
- 改行するとリストが増えます
改行をするとリストが増えていきます。
またブロック上のタブメニューでリストの「・」を数字にする事も出来ます。
HTMLでのリストの記述
HTMLでの記述はWordPressのブロックエディタと同様です。
HTMLの記述は以下の通り。
<ul>
<li>これがリスト</li>
<li>改行で増える</li>
</ul>ulは順序の無いリストを指し、いわば箇条書きの事です。liは順序を付けるリストです。
通常ulとliはセットで記述していきます。
またulの変わりにolを使用すると以下の様に「・」が番号に変わります。
- これが番号リストです
- olで番号がつきます
「・」も番号もいらない場合はスタイルシートで以下の様に記述すると消えます。
ul {
list-style: none;
}- これが点無しのリストです
- 上記のCSS記述
横並びにしたい場合はスタイルシートで以下の様に記述するなります。
li{
display: inline;
}- 横並びの場合
- 上記のCSSを記述
他スタイルを付け加えれば様々な形に変える事が出来ます。このリストを応用してよくサイトにあるメニューなどが作られています。
以上がWordPressでリストを作る方法（HTML記述もあり）でした。
リストの場合WordPressのブロックエディタでの作成でも直接HTMLでの記述でも内容は同じなので、基本はブロックエディタからの作成でOKです。ただ特定の記事のみスタイルを付けたい場合はHTMLで直接記述して、そこにスタイルを付けるといったやり方が良いかと思います。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
