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

TOP > タグのお勉強 > title - 文字の背景色を変えるには?基礎編

文字の背景色を変えるには?基礎編

文字の背景色(ボックス)を変える

文字の色を変える事によってその文字を目立たせる事は、最初から便利なツールがついているので簡単にできますよね。ここでは文字ではなく、その背景の色を変えて目立たせるやり方を紹介します。


具体的にどんな風になるのかというと、
文字の背景を変える
この様になります。

では、どうやってやるのかというと
<font style="background-color: #色の値;">ここに文字を書く</font>
この様にするだけです。すごく簡単ですよね。

文字の一部の背景色を変える

文字の背景を変える

この様に文章の一部だけを変えたいなら、
<font style="background-color: #色の値;">文字の背景</font>を変える
変えたい部分だけを<font>~~~</font>で囲めばいいだけです。

背背景の色を濃くしてしまうと
文字が読みづらくなってしまうから
中の文字の色自体も変えてあげると
読みやすくなります。


この様に段落や文字の色自体も変えたいなら、段落はいつもの様に文章を書く時に段落をつけるだけで段落はできるし、文字の色もいつもの様にツールを使って色をつけてあげれば色がつきます。

でもこれだとでこぼこしていて、少しかっこ悪いですよね。

文字の全体の背景色を変える

背背景の色を濃くしてしまうと
文字が読みづらくなってしまうから
中の文字の色自体も変えてあげると
読みやすくなります。

この様に全体の背景色を変えてあげれば、でこぼこしなくて安心です。
これは1番最初の<font style="background-color: #色の値;"><div style="background-color: #色の値;">に変えて、最後の</font></div>に変えると全体の背景色に変わります。

1列全部を変える

<div style="background-color:#色の値;">1列全部を変える</DIV>つまりこの様にします。

文字の背景を画像に変える

画像も使うことができます。
画像を使えば文字を
目立たせるだけでなく
タイトルなどにも使える
と思います。

文字の背景色を画像にするには、先ほど使った全体を変えるタグの1番最初の<div style="background-color: #色の値;"><div style="background-image:url(http://blog~~~.gif);">に変えるとできるようになります。

具体的には上の例で説明すると、

<div style="background-image:url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/maru.gif);">
画像も使うことができます。
画像を使えば文字を
目立たせるだけでなく
タイトルなどにも使える
と思います。
</div>

この様に使います。

少し手を加えるだけで、記事の見た目が見やすくなると思うので是非やってみて下さい。

背景色の大きさや位置、中の文字の位置の指定など細かい指定もできるのでつづきで紹介します。   <つづく>


関連ページ)
・文字の背景色を変えるには?基礎編
文字の背景色を変えるには? 応用編
文字の背景色を変えるには? 枠線編
文字の背景色を変えるには? 一括編


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

http://rgrg.blog61.fc2.com/tb.php/116-bffaf302   

Template Designed by DW99