WordPressでリストを作る方法(HTML記述コピペあり)

Programming

今回は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を使用すると以下の様に「・」が番号に変わります。

  1. これが番号リストです
  2. olで番号がつきます

「・」も番号もいらない場合はスタイルシートで以下の様に記述すると消えます。

ul {
  list-style: none;
}
  • これが点無しのリストです
  • 上記のCSS記述

横並びにしたい場合はスタイルシートで以下の様に記述するなります。

li{ 	
    display: inline;
 }
  • 横並びの場合
  • 上記のCSSを記述

他スタイルを付け加えれば様々な形に変える事が出来ます。このリストを応用してよくサイトにあるメニューなどが作られています。


以上がWordPressでリストを作る方法(HTML記述もあり)でした。

リストの場合WordPressのブロックエディタでの作成でも直接HTMLでの記述でも内容は同じなので、基本はブロックエディタからの作成でOKです。ただ特定の記事のみスタイルを付けたい場合はHTMLで直接記述して、そこにスタイルを付けるといったやり方が良いかと思います。

下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
KT LIFE
タイトルとURLをコピーしました