スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連カテゴリー
スポンサー広告 Trackback(-) | Comments(-) | [編集] | 投稿者 kyaro ri
リストを使って段落表示を見やすくする方法
段落表示するときはリストタグを使ったほうが、SEO的にもいいそうなので、箇条書きする時などに使ってみてください(*´∀`*)

検索エンジンは、文章ではなく、HTLMを読むので、出来るだけタグなどを使ってすっきりさせたほうがいいんだそうです。


●段落表示するときは
●リストタグを使うと
●いいですよ
●(*´∀`*)


これをタグを使って書くと、このようになります。

<ul>
<li>段落表示するときは</li>
<li>リストタグを使うと</li>
<li>いいですよ</li>
<li>(*´∀`*)</li>
</ul>




黒丸を数字の番号に変えたいとき

<ol>
<li>段落表示するときは</li>
<li>リストタグを使うと</li>
<li>いいですよ</li>
<li>(*´∀`*)</li>
</ol>




黒丸を画像に変えたいとき

<ul STYLE="list-style-image: url(img src="http://blog-imgs-24.fc2.com/k/y/a/kyarori/aicon_138.gif);">
<li>段落表示するときは</li>
<li>リストタグを使うと</li>
<li>いいですよ</li>
<li>(*´∀`*)</li>
</ul>




これで、黒丸の変わりに、画像が入ります。
UP←この画像は、↓このようなタグなんですが、この赤いところを入れてください。

<img src="http://blog-imgs-24.fc2.com/k/y/a/kyarori/aicon_138.gif" alt="UP" border="0" width="23" height="15" />






わたしの使っている画像リストは、スタイルシートに設定してあるので、通常の黒丸になる<ul> <li> </li> </ul>を使用するだけで画像になります。

画像を常に使いたい、とゆうかたは、スタイルシートに下記を入れましょう!

ul{ list-style-image: url(http:~~~);}




わたしが使っているテンプレートは最初からリストタグが画像になるように設定されていました。

リストタグの文字の色を変えたい場合は、

li {color: #777777;}




#777777のところに好きな色を入れてみてください♪

以上です(*´∀`*)
意外と簡単なので使ってみてください♪

関連記事


関連カテゴリー
タグのお勉強 Trackback:(0) | Comments:(4) | [編集] | 投稿者 kyaro ri
コメント
このコメントは管理人のみ閲覧できます
2009-09-22 火  16:08:47 |  URL |  # [編集]
「タグのお勉強」参考になります。

黒丸や数字以外に画像が使えるなんて初めて知りました。
2009-09-22 火  16:46:27 |  URL | ふらんぼう☆ #- [編集]
ふらんぼうさんこんばんは(ノ´▽`)ノ♪
これ以外にもいろいろ出来るみたいですよ!
お勉強奥が深いですぅ~
2009-09-22 火  20:10:12 |  URL | きゃろり #8Eq7AU5U [編集]
このコメントは管理人のみ閲覧できます
2010-03-27 土  22:28:15 |  URL |  # [編集]
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)



Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。