どうも！かぱ吉（@kapa_log)です！
ブログ記事を書くときはずーっと同じような文章スタイルで書いていくと、読んでいる方も疲れちゃったり、飛ばし気味に読まれたりしちゃいます。
途中で画像を入れたり、四角い枠で囲ったりするのはとても大事。
そんな文字装飾の中でもバンバン使ったほうがいいのが箇条書きです。
箇条書きに出来るところは、すべて箇条書きにしてもいいくらいです。
キーボードの中にも「・」がありますし、見た目的にはこれでも最低限箇条書きにはなってます。
ただワードプレスではタグを使うことでより見栄えよく箇条書きを作ることができます。
例えば次のやつがキーボードの「・」を使った箇条書きです。
・箇条書きのポイントは読者にポイントを効率よく見せることです。
・一つの記事の中で文章スタイルを変えることによって文章が読み飛ばされにくくなります。
・タグを使えば、箇条書きの先頭のスタイルの他にも数字付きでリストを作るのも可能です。
ワードプレス上の箇条書き機能を使うとこんな感じ。
- 箇条書きのポイントは読者にポイントを効率よく見せることです。
- 一つの記事の中で文章スタイルを変えることによって文章が読み飛ばされにくくなります。
- 箇条書きの先頭のスタイルの他にも数字付きでリストを作るのも可能です。
列が揃ってて見やすい！
でしょでしょ！なんか一気にオシャレな感じになるよね
箇条書きを使いこなして初心者感のあるブログから脱却しましょう！
Contents
ワードプレスの箇条書きの作り方！
それでは早速ワードプレスの箇条書きの作り方をご紹介します。
とっても簡単ですよ。
なお、今から紹介するのはワードプレスの最新エディターである『gutenberg』エディターを使っている場合です。
一つ前のClassic Editorでの箇条書きは後ほど紹介します。
2018年12月6日以降にワードプレスを立ち上げている場合は、基本的にgutenbergエディターになっているよ！
まず次のようにワードプレスの本文中に箇条書きにしたい文章を改行した状態で書いておきます。
次に箇条書きにしたい文章を選択します。
選択したら、上に出てくるマークをクリックし、その中にある『リスト』を選択。
これで箇条書きが完成です！
（編集画面で箇条書きのようにならなくても、プレビューで記事本文を見るとちゃんと箇条書きになっています。）
また、箇条書き部分を選択したときに出るメニューの中から数字付きリストに変更することも可能です。
ポチポチとクリックしていくだけでリストを作れるのでとっても簡単ですね。
Classic Editorを使っている場合：箇条書きにするにはliとulタグを使う。
次にワードプレスでClassic Editorを使っている場合の箇条書きを紹介します。
Classic Editorを使っている場合、タグを使って箇条書きを作ります。
まず簡単にタグを使う時のルールを紹介します。
タグはかっこ<>で囲むというルールがあります。そして装飾したい文章を<>で囲みます。
このとき、終わりのほうの<>には/を入れます。
このかっこのなかに、今回紹介する『liタグ』や『ulタグ』を入れることになります。
？？？
まぁ、実際に例を見てもらったほうが早いね。
箇条書きを作る時にはまず箇条書きにしたい文章をliタグで囲みます。
編集画面ではこんな感じで書きます。
これで文章にするとこんな感じになります。
- 単純に文章を箇条書きだけするならリストタグだけでもできる
- ただ、リストタグだけだと文章の先頭揃えができない
- 文字間隔もちょっとおかしくなっちゃうことも
ただ、これだけだと長い文章だと先頭揃えにならなかったり、箇条書きの間のスペースがおかしくなったりします。
なので、liをつけた文章をさらにulタグで挟みます。
ちなみにulタグは番号なしリストを作るためのコードです。
編集画面ではこんな感じで書きます。
これで文章にするとこんな感じになります。
- ulタグを使うことで番号ナシリストにすることが可能
- ulタグを使えば列の先頭揃えも自動で行ってくれる
- 文字間隔もいい感じになる
これで先ほど紹介したような箇条書きができましたね。
基本的に普通の箇条書きにしたいときはliタグだけではなく、ulタグもセットでサンドイッチして使うと覚えておきましょう！
番号付きの箇条書きはliとolタグを使う
先ほど番号なしリストの作り方を紹介しました。
当然番号ありリストも作れます。
番号ありリストはolタグでliタグを挟みます。
編集画面ではこんな感じで。
するとこんな感じになります。
- りんご
- ばなな
- みかん
これで数字付きのリストができました。
簡単ですね。
classic editorのリスト系のコードはボタン一つで挿入できるよ
ねーねー、このliとかulで囲むのはわかったけど、いちいち手でこういうやつ打たないといけないの？正直めんどくさい…
わかる(笑)めんどいよね。
大丈夫！これらのタグを一発で出せるように組み込まれてるよ！
そうなんです！
実はclassic editor上でこれらのタグを一回一回入力しなくてもボタン一つでパッと入るようになってます。
投稿画面に入ったらテキスト表示に切り替えます。
そうすると下のほうにliとかulとかolって表示があるのが見えますよね。
これが今紹介したタグです。
図のようにリスト化したい文章をマウスでドラッグして青くしてからliボタンを押すと自動でタグが入ります。
同じようにulタグやolタグもliタグで囲った文章全てをマウスでドラッグして青くしてからボタンを押せば一発でタグが入ります。
ちなみに、liのボタンを押すと編集画面で文章が右にずれたりしますが、実際にはずれないのでご心配なく！
ものすごーーーく簡単ですね♪
まとめ：箇条書きで文章を見やすく！
ワードプレスの箇条書きの作成方法を紹介しました。
箇条書きを使うだけで、文章の見た目が驚くほど変わります。
また、少し専門的なことをいうと、「・」で箇条書きを作るより、タグを使って箇条書きを作ったほうがグーグルのロボットが大事な点、まとまっている点と認識しやすく評価されやすいです。
今日から箇条書きをどんどん取り入れていきましょう！
