文字部分に背景色を付ける

1.ブログの記事を書く際に、文字だけでは少し味気ないなと感じる時があります。そこで、文字部分に背景色を付けてみました。こんな感じですがいかがでしょう。

2.上は横幅の調整はしていませんが、幅を指定するとこのようになります。ここでは400pxに指定しています。領域の高さも調整できますが、行数に応じて自動的に高くなりますので、必要ないかもしれませんね。

3.背景の色はbackgroundで指定できます。上は淡紅藤色ですがここはgreenyellowにしてみました。カラーコードを指定することで好きなように変えることができます。

下にそれぞれのソースを書いておきます。
1.のソース
<div style=" background:#ffe9f4; padding: 15px;">1.ブログの記事を書く際に、文字だけでは少し味気ないなと感じる時があります。そこで、文字部分に背景色を付けてみました。こんな感じですがいかがでしょう。</div>
2.のソース
<div style=" background:#e6cde3; padding: 15px;width:450px;">2.上は横幅の調整はしていませんが、幅を指定するとこのようになります。ここでは400pxに指定しています。領域の高さも調整できますが、行数に応じて自動的に高くなりますので、必要ないかもしれませんね。</div>
3.のソース
<div style=" background:#adff2f; padding: 15px;width:450px;">3.背景の色はbackgroundで指定できます。上は淡紅藤色ですがここはgreenyellowにしてみました。カラーコードを指定することで好きなように変えることができます。</div>
※ 赤字の部分が背景色の指定、青字の部分が横幅の指定です。
※ カラーコードは次のサイトが参考になります。 原色大辞典
スポンサーサイト

コメントの投稿

非公開コメント

No title

いつもありがとうございます。
早速メモ帳に貼らせていただきました。
いつか使う機会があったら活用させていただきます。

Re:まりりんごさん

こんにちは
記事にちょっとアクセントをつけたい時には便利だな と思って備忘録に入れておきました。
このままコピーして文を入れ替えるだけなので手間が省けます。
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード