現在パソコン版のマニュアルを表示中
このマニュアルは公式テンプレートの「sample」をベースにしています。
文字の大きさを変更したい場合もCSS（スタイルシート）なら簡単に修正できます。
ここでは例として、「ブログタイトル」の大きさを変更してみましょう。
HTML編集でタイトル部分を記述している部分を探してみましょう。
以下の部分がタイトル部分を記述しているタグです。
ブログタイトルが<h1>という要素で囲われています。
スタイルの設定においても<h1>要素に対してフォントサイズを設定することで
文字の大きさを変更できます。
では実際のテンプレートで、この<h1>要素を指定している箇所を探しましょう。
「font-size : 」の後ろにある数値には、実数値＋単位・％値・キーワードなどを指定します。
実数値＋単位
数値に単位を付けてフォントサイズを指定します。負の値は指定できません。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。
％値
フォントサイズを親要素のフォントサイズに対する割合で指定します。
キーワード
xx-small | x-small | small | medium | large | x-large | xx-large
フォントサイズを7段階に分けたキーワードで指定します。
smaller | larger
親要素のフォントサイズに対して、それぞれ一段階小さい、または、大きい文字サイズを指定します。
ブラウザーの種類や設定によっては、フォントサイズの指定にptやpxなどの単位を使うと
ユーザー側で文字の大きさを変更できなくなる場合があります。
ユーザーから「必要に応じて文字の大きさを変更する」機能を奪ってしまう事になりますので、
フォントサイズの指定を行う場合はできるだけemや％などの相対的な単位を使用し、
必要に応じて文字のサイズを変更できるようにするのが望ましいです。
文字の色を変更したい場合は対象となる要素にcolorプロパティを設定することにより実現できます。
例としてサイト全体の文字色の変更と本文のみの変更を行ってみましょう。
サイト全体の変更を行う場合は最上位要素html（body）に対してスタイルを適用してください。
▼HTML全体（親）
▼<body>内のスタイル設定（子）
これでサイト全体の変更ができたわけですが、本文は黒色、記事のタイトルは赤色で表示したいなど
使い分けるにはどうすればいいでしょうか？
それを解決するにはセレクタを使用します。
セレクタとは、HTMLのどの要素（タグ）にスタイルを適用するのかを指定するものです。
下記セレクタを例に、どのように指定されているか確認してみましょう。
▼セレクタ例
オレンジ色は「セレクタ」、水色は「プロパティ」、青色は「値」を定義しています。
プロパティは「どのスタイルを適用するのか」、値は「適用する具体的内容」を指定するので、
上記のセレクタ例の場合は、
「<h1>タグ」に、「colorプロパティ」の「値#FFFFFF」を指定する、という意味になります。
こちらの指定は、コンマ（，）で区切って複数指定できます。
要素名
指定した要素名の要素に対してスタイルを適用させます。
＊（アスタリスク）
すべての要素に対してスタイルを適用させます。
要素名#名前
その要素の中で指定したid属性の識別子を持つものに対してスタイルを適用させます。
要素名.名前
その要素の中で指定したclass属性の識別子を持つものに対してスタイルを適用させます。
ここでは例として、記事本文の文字色を変更してみましょう。
記事本文が展開される2NTブログの独自タグは<%topentry_body>です。
▼HTML編集
このタグを囲っている親要素は<div class=“entry-body”>ということがわかります。
つまり、記事本文に対してスタイルを適用する場合は画像赤枠内となります。
▼スタイルシート編集変更前
では、本文の文字色を赤色に設定するために下記のスタイルを該当の箇所に入力してみましょう。
―――――――――――――――――――――――――――――――――――
color : #FF0000; /* 記事本文前景色を赤色に設定 */
―――――――――――――――――――――――――――――――――――
▼スタイルシート編集変更後
これで、本文の文字を変更することができました。
このようにセレクタを使用することにより、適用する条件を絞り込むことができます。
リンク色の設定は疑似クラスを使用して設定することができます。
:hover疑似クラスを設定する際には必ず宣言順序（link→visited→hover→active）に注意してください。
誤った順序で宣言すると正しい表示結果が得られない場合があります。
要素名:link
リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します。
要素名:visited
リンクする要素のうち、閲覧済（キャッシュされている）要素に対してスタイルを適用します。
要素名:hover
ユーザーがカーソルをその要素の上に置いているが、まだアクティブ状態にしていない時にスタイルを適用します。
要素名:active
その要素がユーザーによってアクティブ状態にされたときにスタイルを適用します。
背景の色や背景画像の変更もスタイルシートであれば簡単に変更できます。
該当する要素にbackgroundプロパティを適用してください。
全体の変更や部分的な変更は前述のセレクタの説明をご覧になってください。
背景色の設定にはbackground-colorプロパティを使用します。
下画像の赤枠部分の値には、スタイルシートの書式に従った任意の色を指定します。
▼スタイルシート編集
背景画像の設定にはbackground-imageプロパティを使用します。
画像の並べ方や表示位置などはbackground-repeatプロパティおよびbackground-positionで
設定することができます。
repeat
背景画像は縦横タイル状に並べられます。
repeat-x
背景画像は横方向のみに繰り返して並べられます。
repeat-y
背景画像は縦方向のみに繰り返して並べられます。
no-repeat
背景画像は繰り返されずにひとつだけ表示されます。
実数値＋単位
横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。
単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。
％値
横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。
left | center | right
top | center | bottom
横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。
指定する順序は問いません。
fixed
背景画像の位置を固定します。
scroll
背景画像を他の内容とともにスクロールします。
ヘルプをご覧になっても問題が解決されない場合は、サポートへお問い合わせください。
2NTブログに関するお問い合わせはこちら