段落（ブロック）全体に背景色をつける

概要：段落（ブロック）全体に背景色をつける方法

色々なブログを見ていると下記のように文章に背景色がついているページを見かけますよね。

注意：適当に外すとパソコンに影響が出ますので、確実にご自身でプログラム内容を把握でき不要と判断したものだけ停止して下さい。

これは段落（ブロック）全体に背景色をつけることによって作ることができます。

一方で
注意：適当に外すとパソコンに影響が出ますので、確実にご自身でプログラム内容を把握でき不要と判断したものだけ停止して下さい。

文章の一部に背景色をつけることもできます。

前者は<div>タグ、後者は<span>タグで簡単に再現できます。
今回は前者の<div>タグを使用して段落全体に背景色をつける方法をご紹介します。

<span>タグについてはコチラをご参照下さい。

⇒　文字に背景色をつける

※私の場合は、注意書きやHTMLソースを紹介するときに前者の方法を使用しています。使用方法は皆さんの自由ですので、前者、後者を適切に使い分けて下さい。

手順：段落（ブロック）全体に背景色をつける

今回はBloggerを使って手順をご紹介します。FC2ブログでもアメブロでも基本は同じです。
※CSSに背景色をつけるソースを記載してHTML編集で記事を書く。

１．CSSの追加

Bloggerにログイン後、[テンプレート]　→　[カスタマイズ]　→　[CSSの追加]にて、CSSの編集画面に進みます。

下記の対象ソースを埋め込みます。

［対象CSSソース］

.fonthaikei{
background-color:#c1c8d5;
}

※「.fonthaikei」の部分はご自身がお好きなようにつけることができます。また既にCSSを編集している方は一番最後に上記ソースを埋め込んで下さい。CSSの優先適用順位はソースの後ろからです。

埋め込みが終了したら、[ブログに適用]します。

２．Bloggerで記事を書く

Bloggerで新規に記事を書くときに、段落に背景色を付けたい場合は、「作成」ボタンから「HTML」ボタンをクリックします（普通は「作成」になっています。これを「HTML」に変更するオペレーションです）。
対象の段落を下記のようにタグで囲みます。

<div class="fonthaikei">XXX</div>

XXXは段落の文章です。これによりXXXの段落全体に背景色つけることができます。

ブログデザインがキレイになるのでお勧めの方法です。
リクエストがあればアメブロやFC2ブログでのやり方も記事にしたいと思いますので、遠慮なくコメント下さい(^-^)

スポンサードリンク