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

TOP > タグのお勉強 > title - 水平線に画像を使うには?

水平線に画像を使うには?

画像の水平線の見本

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

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

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

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

この様になります。水平線を太くしてその中に画像を入れるんです。これは個別に画像を使う事もできるし、スタイルシートを編集する事によって全ての水平線に一括で画像を使う事もできます。

個別に画像を使う方法

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

そして画像を使うにはこのhrの後ろにSTYLE="height: 数値px; background-image: url(http://blog~~~.gif);"を付け加えてsize="1"を削除してしまいます。

つまり上と同じ水平線をつくりたいなら、
<hr STYLE="height: 14px; background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/hare.gif);">
と記入します。

ただ単純に水平線を太くして、画像を入れるだけでなく細かい指定もできます。
表にしてタグを紹介したいと思います。

タグの名前 タグの説明 効果を決める数値
width: 長さを変える 数値+単位(px、%など)
height: 太さを変える 数値+単位(px、%など)
background-image: url 使う画像を
指定する
(http://blog~~~.gif)
background-color: 背景色を決める 色の名前・#色の値
background-repeat: 画像の並び方
の指定
repeat-x;(横1列に並べる)
repeat-y;(縦1列に並べる)
no-repeat;
(1つだけ表示する)
repeat;
(繰り返し表示して敷き詰める)
background-position: 画像の表示位置 left(左)・center(中央)
right(右)

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


<hr STYLE="width: 250px; height: 14px; background-color:#FFEFD5; background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/20060510034437.gif);">   (長さを短くして、背景色に薄いピンク)


<hr STYLE="width: 100%; height: 15px; background-repeat:no-repeat; background-position:center; background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/20060510
045327.gif);">    (画像を1回だけ表示して、中央に表示する)

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

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

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

例えば上の例の一番下の(画像を1回だけ表示して、中央に表示する)を例にすると
hr{
width: 100%;
height: 15px;
background-repeat:no-repeat;
background-position:center;
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/20060510045327.gif);"
}


と記入します。

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

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

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

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

例えば、名前を「suiheisen」にしたら、
hr.suiheisen{
width: 450px;
height: 15px;
background-repeat:no-repeat;
background-position:center;
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/20060510045327.gif);"
}

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

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

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

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


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


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

すみません<m(__)m>意味がわからなくて…

桃ワンコさんへ
水平線に使う画像はどんな画像でもいいですよ!決まりはありません。
フリー素材が一番手っ取り早いので、オススメです。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/128-f320985b   

Template Designed by DW99