文字の変更・背景の変更

FC2ブログマニュアル

現在パソコン版のマニュアルを表示中

このマニュアルは公式テンプレートの「sample」をベースにしています。

文字の大きさを変更　↓
文字の色を変更　↓
∟基本となるセレクタ　↓
∟例：記事本文の文字色変更　↓
リンク色の変更　↓
背景の変更　↓
∟背景色の変更　↓
∟背景画像の変更　↓

文字の大きさを変更

文字の大きさを変更したい場合もCSS（スタイルシート）なら簡単に修正できます。
ここでは例として、「ブログタイトル」の大きさを変更してみましょう。

HTML編集でタイトル部分を記述している部分を探してみましょう。
以下の部分がタイトル部分を記述しているタグです。

ブログタイトルが<h1>という要素で囲われています。
スタイルの設定においても<h1>要素に対してフォントサイズを設定することで
文字の大きさを変更できます。

では実際のテンプレートで、この<h1>要素を指定している箇所を探しましょう。

「font-size : 」の後ろにある数値には、実数値＋単位・％値・キーワードなどを指定します。

実数値＋単位
数値に単位を付けてフォントサイズを指定します。負の値は指定できません。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。

％値
フォントサイズを親要素のフォントサイズに対する割合で指定します。

ブラウザーの種類や設定によっては、フォントサイズの指定にptやpxなどの単位を使うと
ユーザー側で文字の大きさを変更できなくなる場合があります。
ユーザーから「必要に応じて文字の大きさを変更する」機能を奪ってしまう事になりますので、
フォントサイズの指定を行う場合はできるだけemや％などの相対的な単位を使用し、
必要に応じて文字のサイズを変更できるようにするのが望ましいです。

文字の色を変更

文字の色を変更したい場合は対象となる要素にcolorプロパティを設定することにより実現できます。
例としてサイト全体の文字色の変更と本文のみの変更を行ってみましょう。

サイト全体の変更を行う場合は最上位要素html（body）に対してスタイルを適用してください。

HTMLの要素と親子関係

▼HTML全体（親）

▼<body>内のスタイル設定（子）

これでサイト全体の変更ができたわけですが、本文は黒色、記事のタイトルは赤色で表示したいなど
使い分けるにはどうすればいいでしょうか？

それを解決するにはセレクタを使用します。

基本となるセレクタ

セレクタとは？

セレクタとは、HTMLのどの要素（タグ）にスタイルを適用するのかを指定するものです。
下記セレクタを例に、どのように指定されているか確認してみましょう。

▼セレクタ例

オレンジ色は「セレクタ」、水色は「プロパティ」、青色は「値」を定義しています。

プロパティは「どのスタイルを適用するのか」、値は「適用する具体的内容」を指定するので、
上記のセレクタ例の場合は、

「<h1>タグ」に、「colorプロパティ」の「値#FFFFFF」を指定する、という意味になります。

こちらの指定は、コンマ（，）で区切って複数指定できます。

要素名

指定した要素名の要素に対してスタイルを適用させます。

＊（アスタリスク）

すべての要素に対してスタイルを適用させます。

要素名#名前

その要素の中で指定したid属性の識別子を持つものに対してスタイルを適用させます。

要素名.名前

その要素の中で指定したclass属性の識別子を持つものに対してスタイルを適用させます。

ここでは例として、記事本文の文字色を変更してみましょう。

記事本文の文字色変更

記事本文が展開されるFC2ブログの独自タグは<%topentry_body>です。

▼HTML編集

このタグを囲っている親要素は<div class=“entry-body”>ということがわかります。
つまり、記事本文に対してスタイルを適用する場合は画像赤枠内となります。

▼スタイルシート編集変更前

では、本文の文字色を赤色に設定するために下記のスタイルを該当の箇所に入力してみましょう。

―――――――――――――――――――――――――――――――――――

color : #FF0000; /* 記事本文前景色を赤色に設定 */

―――――――――――――――――――――――――――――――――――

▼スタイルシート編集変更後

これで、本文の文字を変更することができました。
このようにセレクタを使用することにより、適用する条件を絞り込むことができます。

リンク色の変更

リンク色の設定は疑似クラスを使用して設定することができます。
:hover疑似クラスを設定する際には必ず宣言順序（link→visited→hover→active）に注意してください。
誤った順序で宣言すると正しい表示結果が得られない場合があります。

要素名:link
リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します。

要素名:visited
リンクする要素のうち、閲覧済（キャッシュされている）要素に対してスタイルを適用します。

要素名:hover
ユーザーがカーソルをその要素の上に置いているが、まだアクティブ状態にしていない時にスタイルを適用します。

要素名:active
その要素がユーザーによってアクティブ状態にされたときにスタイルを適用します。

ページ全体のリンクを設定する場合

a:link {
color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
a:visited {
color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
a:hover {
color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
a:active {
color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

特定のクラスが指定されているリンクを設定する場合

a.MyClass:link {
color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
a.MyClass:visited {
color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
a.MyClass:hover {
color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
a.MyClass:active {
color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

特定のクラスが指定された要素に含まれるリンクを設定する場合

.MyClass a:link {
color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
.MyClass a:visited {
color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
.MyClass a:hover {
color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
.MyClass a:active {
color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

背景を変更

背景色を変更

背景の色や背景画像の変更もスタイルシートであれば簡単に変更できます。
該当する要素にbackgroundプロパティを適用してください。
全体の変更や部分的な変更は前述のセレクタの説明をご覧になってください。

背景色の設定にはbackground-colorプロパティを使用します。
下画像の赤枠部分の値には、スタイルシートの書式に従った任意の色を指定します。

▼スタイルシート編集

背景画像を変更

背景画像の設定にはbackground-imageプロパティを使用します。
画像の並べ方や表示位置などはbackground-repeatプロパティおよびbackground-positionで
設定することができます。

body {
background-image : url(“画像のパス”); /* 背景画像の設定 */
background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */
background-position : left top; /* 開始位置を画面左上に設定 */
background-attachment : fixed; /* 背景画像の位置を固定 */
}

画像の並べ方

repeat
背景画像は縦横タイル状に並べられます。

repeat-x
背景画像は横方向のみに繰り返して並べられます。

repeat-y
背景画像は縦方向のみに繰り返して並べられます。

no-repeat
背景画像は繰り返されずにひとつだけ表示されます。

画像の表示位置

実数値＋単位
横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。

％値
横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。

left | center | right
top | center | bottom
横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。
指定する順序は問いません。

画像の固定配置

fixed
背景画像の位置を固定します。

scroll
背景画像を他の内容とともにスクロールします。

マニュアル一覧を見る »

お問い合わせ

ヘルプをご覧になっても問題が解決されない場合は、サポートへお問い合わせください。

FC2ブログに関するお問い合わせはこちら

パソコン版
スマートフォン版

マニュアル一覧を見る »

FC2ブログ マニュアル