ブログで簡単に箇条書き(リスト)を作る方法

2012年02月13日


ども、ピアノ教室管理人です。


今日はブログで「箇条書き」を作る簡単な方法をご紹介します。





箇条書き、
HTML的には「リスト」ともいいます。


ブログサービスによっては「リスト用ボタン」が用意されているとこもありますが、
(JUGEMなど)

アメブロや、ここのSeesaaブログには用意されてませんよね。


リスト(=箇条書き)が使いたいなぁ〜なんて思う方も多いことでしょう。




ではさっそく。


箇条書きリスト


先頭に「・」がつく、いたってノーマルな箇条書きです。


  • 項目その1

  • 項目その2

  • 項目その3

  • 項目その4

  • 項目その5


↑これは
↓こういう風にHTMLタグを書きます。



<ul>
<li>項目その1</li>
<li>項目その2</li>
<li>項目その3</li>
<li>項目その4</li>
<li>項目その5</li>
</ul>


※コピーして使っていいですよ。

項目はそれぞれ書き換えてくださいね。





番号付きリスト


先頭に番号を表す数字がつくリストです。

数字は自動的につきますから、あとで項目を増やしても大丈夫なんです。


  1. 項目その1

  2. 項目その2

  3. 項目その3

  4. 項目その4

  5. 項目その5


↑これは
↓こういう風にHTMLタグを書けばいいんです。



<ol>
<li>項目その1</li>
<li>項目その2</li>
<li>項目その3</li>
<li>項目その4</li>
<li>項目その5</li>
</ol>


※コピーして使っていいですよ。

項目はそれぞれ書き換えてくださいね。






いかがですか?

<ul>が「・」付きの箇条書きリストで、
<ol>が数字付きのリストになります。


それぞれの項目は<li></li>で囲んであげればOKです。


他にもいろんなリストの種類があるんですが、
まずは基本のこの2つだけおぼえてくださいね。




リストの行間が広いと感じたら?


もし箇条書きした項目同士の行間が広すぎると感じたら、


<ul><li>項目その1</li><li>項目その2</li><li>項目その3</li><li>項目その4</li><li>項目その5</li></ul>



という風につなげて書くか、
あるいは



<ul><!--
--><li>項目その1</li><!--
--><li>項目その2</li><!--
--><li>項目その3</li><!--
--><li>項目その4</li><!--
--><li>項目その5</li><!--
--></ul>



<!-- -->(コメントアウト)すると行間が縮まります。


こんな感じに↓

  • 項目その1
  • 項目その2
  • 項目その3
  • 項目その4
  • 項目その5


  1. 項目その1
  2. 項目その2
  3. 項目その3
  4. 項目その4
  5. 項目その5





リストのいいところは、
長い文字列の項目でも、折り返しがキレイなところ。


こんな感じです。

  • こんなに文字数が多くて長〜い文字列の箇条書き項目でも、ちゃんと折り返しがキレイに揃って表示されますからレイアウトが崩れません。

  • 途中で改行しても、
    ほら、ちゃんと先頭が揃います。

  • ね、なかなか便利なんです、リストって。SEO(検索エンジン対策)にもよく使われているので、一度使うと病みつきになりますから、ぜひお試しくださいね。

↑文字の折り返し位置がちゃんと揃ってますよね。





実際の使用例です。(どちらもうちのブログ ^^)


■箇条書きリストの例

ピアノ教室 横浜市 緑区 青葉区 - 明るく楽しい♪福田音楽教室のご案内


■番号付きリスト例

書いていますか?引越しする生徒さんの次のステップのために♪





是非、お試しください。


でわ ^^)/~



ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。