ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 水平線に色をつけるには? 基礎編

水平線に色をつけるには? 基礎編

水平線の見本

水平線って何かわかりますよね。

これです。使ったことありませんか?

ちなみにいまいちわからない人の為に、説明すると、
水平線
新しい記事を作る時に、ここのボタンを押すと作る事ができます。

それで色をつけるとどうなるとのかいうと、

この様になります。これは個別に色を変える事もできるし、スタイルシートを編集する事によって全ての水平線に一括で色をつける事もできます。

個別に色・太さ・長さを変える方法

普通に水平線のボタンを押すと<hr size="1">この様に記入されますよね。つまり水平線はhrのタグで作るんです。

そして色をつけるのはこのhrの後ろにSTYLE="color: #色の値; background-color: #色の値; border: 0;"を付け加えてsize="1"を削除してしまいます。

つまり上と同じ水色の水平線をつくりたいなら、
<hr STYLE="color: #66CCFF; background-color: #66CCFF; border: 0;">
と記入します。

二つの同じ色のcolorを指定するのは、環境によって色がついて見えない人を減らすためです。具体的にはcolor:はIE(Internet Explorer)・background-color:とborder: 0;はNN(Netscape Navigator)の人の為に設定します。(詳しく知りたい人は”他の人はどう見えてるのかな?”を参照)

色をつけるだけでなく、他にも色々な事ができます。
表にしてタグを紹介したいと思います。

タグの名前 タグの説明 効果を決める数値
color: 色をつける(IE用) 色の名前・#色の値
background-color:
border: 0
色をつける(NN用) 色の名前・#色の値
width: 長さを変える 数値+単位(px、%など)
height: 太さを変える 数値+単位(px、%など)
text-align: 位置を指定する(IE用) left;(左側)
center;(中央)
right;(右側)
margin- 位置を指定する(NN用) left: 0;(左側)
right: 0;(右側)
(色と位置を変える時は、必ずIE用とNN用の2つとも指定して下さい)

使い方は先ほど紹介した<hr STYLE="~~~">の"~~~"の間に使いたいタグを組み合わせて入れるだけです。
具体的な例をだして紹介したいと思います。


<hr STYLE="width: 70%; color: #66CCFF; background-color: #66CCFF; border: 0;">    (水平線の長さを変える)


<hr STYLE="height: 10px; color: #66CCFF; background-color: #66CCFF; border: 0;">   (水平線の太さを変える)


<hr STYLE="width: 40%; height: 5px; text-align: center; color: #66CCFF; background-color: #66CCFF; border: 0;">  (水平線を真ん中に指定する)
 

<hr STYLE="width: 35%; height: 8px; text-align: right; margin-right: 0; color: #66CCFF; background-color: #66CCFF; border: 0;">   (水平線を右寄せに指定する)

一括で全ての水平線を変える方法

個別の設定で自分が使いたい水平線にする事が出来たら、"~~~"の中のタグを覚えておいて下さい。
まずテンプレートの設定からスタイルシートの編集を開きます。

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけてhr { "~~~"の中のタグをここに記入する}

例えば上の例の一番下の(水平線を右寄せに指定する)を例にすると
hr{
width: 35%;
height: 8px;
text-align: right; margin-right: 0;
color: #66CCFF; background-color: #66CCFF; border: 0;
}


と記入します。

これで後は記事を作る時に、水平線のボタンをおして記入される<hr size="1">だけで、全て指定した水平線になっています。

色々な水平線を簡単に使い分ける方法

1種類だけでなくて自分の気にいった水平線を、時々で使い分けたい場合には名前をつけてスタイルシートに登録します。
まずテンプレートの設定からスタイルシートの編集を開きます。

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて、hr.好きな名前{ "~~~"の中のタグをここに記入する}

例えば、名前を「suiheisen」にしたら、
hr.suiheisen{
width: 35%;
height: 8px;
text-align: right; margin-right: 0;
color: #66CCFF; background-color: #66CCFF; border: 0;
}

の様にします。
.」をつけるのを忘れないで下さい。

実際に記事を書く時に、やることは、
<hr class="suiheisen">とhr class="~"の中にさっきつけた名前を入れてあげるだけです。

複数違う名前で登録しておけば、記事を作る時に名前を変えるだけで、いろいろな水平線を使えるようになります。

普通の水平線だとただの細い線なので使いづらいかも知れませんが、自分好みに変えてあげると、記事の内容の変わり目などにちょっと使ってもいいのではないでしょうか?


関連ページ)
・水平線に色をつけるには? 基礎編
水平線に色をつけるには?応用編
水平線に画像を使うには?


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/126-724b6e1e   

Template Designed by DW99