ツール

ワードプレスのブログで列が揃った箇条書きの文章を作成する方法

箇条書きのやり方

ブログ記事を書くときはずーっと同じような文章スタイルで書いていくと、読んでいる方も疲れちゃったり、飛ばし気味に読まれたりしちゃいます。
途中で画像を入れたり、四角い枠で囲ったりするのはとても大事。

そんな文字装飾の中でもバンバン使ったほうがいいのが箇条書きです。
箇条書きに出来るところは、すべて箇条書きにしてもいいくらいです。

キーボードの中にも「・」がありますし、見た目的にはこれでも最低限箇条書きにはなってます。
ただワードプレスではタグを使うことでより見栄えよく箇条書きを作ることができます。

文章の先頭行を揃える箇条書きもタグを使って実現可能です!

ポチ丸
ポチ丸
コード?何それ?いきなり難しそうな単語出てきた!
ハルイチ
ハルイチ
大丈夫!見たままやればできるように解説していくよ!

箇条書きを使いこなして初心者感のあるブログから脱却しましょう!

  

あなたの箇条書きはこう変わる!

この記事を読むことであなたの箇条書きはこんな風にレベルアップします。

これが

・箇条書きのポイントは読者にポイントを効率よく見せることです。
・一つの記事の中で文章スタイルを変えることによって文章が読み飛ばされにくくなります。
・タグを使えば、箇条書きの先頭のスタイルの他にも数字付きでリストを作るのも可能です。

こうなります。

  • 箇条書きのポイントは読者にポイントを効率よく見せることです。
  • 一つの記事の中で文章スタイルを変えることによって文章が読み飛ばされにくくなります。
  • タグを使えば、箇条書きの先頭のスタイルの他にも数字付きでリストを作るのも可能です。

キーボードの「・」でも箇条書きになりますが、タグを使ったほうが文章と文章の間が適度に空いたり、文字の先頭列が揃ってたりと、もっと見やすくなりますよね。
「ちゃんとしてる感」もでます。

箇条書きにするにはliとulタグを使う。

まず簡単にタグを使う時のルールを紹介します。
タグはかっこ<>で囲むというルールがあります。そして装飾したい文章を<>で囲みます。
このとき、終わりのほうの<>には/を入れます。
このかっこのなかに、今回紹介するliタグやulタグを入れることになります。

ポチ丸
ポチ丸
うん、わからない!
ハルイチ
ハルイチ
まぁ、実際に例を見てもらったほうが早いね。

箇条書きを作る時にはまず箇条書きにしたい文章をliタグで囲みます。

編集画面ではこんな感じで書きます。

これで文章にするとこんな感じになります。

  • 単純に文章を箇条書きだけするならリストタグだけでもできる
  • ただ、リストタグだけだと文章の先頭揃えができない
  • 文字間隔もちょっとおかしくなっちゃうことも

  • ただ、これだけだと長い文章だと先頭揃えにならなかったり、箇条書きの間のスペースがおかしくなったりします。
    なので、liをつけた文章をさらにulタグで挟みます。

    ちなみにulタグは番号なしリストを作るためのコードです。
    編集画面ではこんな感じで書きます。

    これで文章にするとこんな感じになります。

    • ulタグを使うことで番号ナシリストにすることが可能
    • ulタグを使えば列の先頭揃えも自動で行ってくれる
    • 文字間隔もいい感じになる

    これで先ほど紹介したような箇条書きができましたね。

    基本的に普通の箇条書きにしたいときはliタグだけではなく、ulタグもセットでサンドイッチして使うと覚えておきましょう!

    番号付きの箇条書きはliとolタグを使う

    先ほど番号なしリストの作り方を紹介しました。
    当然番号ありリストも作れます。

    番号ありリストはolタグでliタグを挟みます。
    編集画面ではこんな感じで。

    するとこんな感じになります。

    1. りんご
    2. ばなな
    3. みかん

    これで数字付きのリストができました。
    簡単ですね。

    リスト系のコードは最初から組み込まれているぞ!

    ポチ丸
    ポチ丸
    ねーねー、このliとかulで囲むのはわかったけど、いちいち手でこういうやつ打たないといけないの?正直めんどくさい…
    ハルイチ
    ハルイチ
    わかる(笑)めんどいよね。
    大丈夫!ワードプレスには最初からこれらのタグを一発で出せるように組み込まれてるよ!

    そうなんです!
    実はこれらのタグは一回一回入力しなくてもボタン一つでパッと入るようになってます。

    投稿画面に入ったらテキスト表示に切り替えます。
    そうすると下のほうにliとかulとかolって表示があるのが見えますよね。
    これが今紹介したタグです。

    図のようにリスト化したい文章をマウスでドラッグして青くしてからliボタンを押すと自動でタグが入ります。

    同じようにulタグやolタグもliタグで囲った文章全てをマウスでドラッグして青くしてからボタンを押せば一発でタグが入ります。

    ちなみに、liのボタンを押すと編集画面で文章が右にずれたりしますが、実際にはずれないのでご心配なく!

    ものすごーーーく簡単ですね♪

    まとめ:箇条書きで文章を見やすく!

    色々解説しましたが、覚えておくのはたったこれだけ!

    1. 箇条書きで使うのはli、ul、olの3つのタグ
    2. 文章はliで囲む。liで囲んだ文章をさらにulとolで大きく囲む。
    3. 文章を選択してテキストモードにあるliなどのボタンを押すだけで自動で挿入できる!

    箇条書きを使うだけで、文章の見た目が驚くほど変わります。
    また、少し専門的なことをいうと、「・」で箇条書きを作るより、タグを使って箇条書きを作ったほうがグーグルのロボットが大事な点、まとまっている点と認識しやすく評価されやすいです。

    今日から箇条書きをどんどん取り入れていきましょう!

    メルマガ登録はこちら

    お名前(HN可):

    メールアドレス:

    COMMENT

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です