INTEREST

↓テンプレート「basic_white」のカスタマイズ用に作ったブログです。（そのまんまのタイトル...ｗ）
「 FC2ブログのテンプレート「basic_white」をカスタマイズ 」

---

【「basic_white」のカスタマイズ】

1. 1.「basic_white」の特徴
   • 1-1.検索バーを表示しない設定方法
2. 2.「ブログの説明」の文字サイズ変更
3. 3.「記事タイトル」の文字サイズ変更
   • 3-1.「記事タイトル」の文字色を変更
4. 4.「サイドメニュー」の幅を変更

---

1.「basic_white」の特徴

まず最初に見た目等を確認する為に、ブログの説明文やプロフィールの紹介文、そして画像付きの簡単な記事と親子カテゴリをいくつか作り、ブログ最上部に表示される検索バーは「利用しない」に設定しました。
※個人的に検索バーは邪魔なので...ｗ （設定方法は下記参照）

このテンプレートの特徴としては「basic_white」と言うだけあって、白を基調にしたとてもシンプルで見易いデザイン。そして何と言ってもブログ上部の右側にあるボタンをクリックする事で、閲覧者側で記事の表示を「グリッド表示」もしくは「リスト表示」に切り替えが可能。（設定次第で切替不可にも出来る）

※記事の本文内に画像を入れてる場合、「グリッド表示」または「リスト表示」の際に自動的にサムネイルとして表示される仕様。（サイズはCSSで設定可能で、大きい画像の場合は縮小表示されます）

また、よく見ないと分かり辛いかもですが、ページを読み込んだ時に記事部分はフェードインして表示されるようにもなってます。（ちょっとした演出だけど、個人的にこう言うの結構好きだったりｗ）

その他にも、あると便利なページトップへスムーズに移動するボタンが最初から画面右下に設置されてたり、サイドメニューの幅も少し広めに作られてるので画像やバナーを入れ易い構造になってます

---

1-1.検索バーを表示しない設定方法

テンプレートに関係無く、FC2ブログを作った初期状態だと、右の画像のようにブログ最上部に検索バーが表示されてます。
この検索バーがあると、テキスト広告とか表示されるし、スクロールしてもずっと画面最上部に表示されたままなので、正直ちょっと邪魔...

なので、私はすぐ非表示にしちゃいます♪ｗ
※非表示にしたからと言って、ペナルティ的な物は一切ありません。

検索バーを非表示にするには、FC2ブログ「管理画面」→「環境設定」→「ブログの設定」→「検索バーの設定」へ進み「利用しない」を選んで更新すればOKです （反映に少し時間が掛かる場合もあります）

---

2.「ブログの説明」の文字サイズ変更

さて、ここからがカスタマイズした内容です。
まず最初に「ブログの説明」の文字サイズが少し大きく感じたので、
文字サイズを小さくしてみました。

変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。
※「Ctrl」+「F」で「 ブログ紹介文 」を検索すればOK

/* =================================================
	Font Size
================================================= */
#header p /* ブログ紹介文 */ { font-size: 158%; /* 21px */ }
#headermenu /* 「記事一覧」の文字 */ { font-size: 139%; /* 18px */ }
#main_contents /* 記事本文等 */ { font-size:124%; /* 16px */ }
#main_contents .entry_date /* 記事日付 */ ,

/* =================================================
	Font Size
================================================= */
#header p /* ブログ紹介文 */ { font-size: 124%; /* 16px */ }
#headermenu /* 「記事一覧」の文字 */ { font-size: 139%; /* 18px */ }
#main_contents /* 記事本文等 */ { font-size:124%; /* 16px */ }
#main_contents .entry_date /* 記事日付 */

※「#header p」の「font-size」の％を下げるか、数字で “16px” などと直接指定すると文字サイズは小さくなります。また、文字サイズを大きくする場合は、数字を上げればOKです。

---

3.「記事タイトル」の文字サイズ変更

次に、各記事のタイトルが分かり易いようにと「記事タイトル」の文字サイズを大きくし、さらに色はページ内のリンクと同じ色にしました。

まずは、記事タイトルの文字サイズを変更する方法
変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。
※「Ctrl」+「F」で「 Headline 」を検索すればOK

/* =================================================
	Headline
================================================= */
h1{font-size:276%; font-weight: normal;}		/* 36px */
h2,
h3{font-size:124%; font-weight: normal;}		/* 16px */
h4{font-size:108%; font-weight: normal;}		/* 14px */
h5,
h6{font-size:100%; font-weight: normal;}		/* 13px */

/* =================================================
	Headline
================================================= */
h1{font-size:276%; font-weight: normal;}		/* 36px ブログのタイトル */
h2{font-size:154%; font-weight: normal;}		/* 20px 記事のタイトル */
h3{font-size:124%; font-weight: normal;}		/* 16px */
h4{font-size:108%; font-weight: normal;}		/* 14px */
h5,
h6{font-size:100%; font-weight: normal;}		/* 13px */

※初期状態の変更前はh2とh3が同じフォントサイズに設定されてるので、その数字部分を変更してフォントサイズを調整してもOKですし、上記の変更後のようにh2とｈ3をそれぞれ別の指定にしてもOKです。

---

3-1.「記事タイトル」の文字色を変更

記事タイトルの文字色は、初期状態だと「記事一覧」のリンクや「続きを読む」のリンクと同じ括りで「color: #333333;」に設定されてます。（ちょっとだけ明るい黒って感じです）

変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。 ※「Ctrl」+「F」で「 Font Color 」を検索すればOK

/* =================================================
	Font Color
================================================= */
body { color: #444444; }

#header h1 a /* ブログタイトル */ { color: #333333; }

#headermenu .archives a /* 「記事一覧」のリンク */ ,
#main_contents h2 a /* 記事タイトル */ ,
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333333; }

/* =================================================
	Font Color
================================================= */
body { color: #444444; }

#header h1 a /* ブログタイトル */ { color: #333333; }

#main_contents h2 a /* 記事タイトル */ {}

#headermenu .archives a /* 「記事一覧」のリンク */ ,
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333333; }

※記事タイトルの文字色を個別で指定出来るようにしました。（でも、とりあえず上記のように{}の中身は空で何も指定して無い状態にしてるので、色はページ内のテキストリンクと同じ色になります。）

---

4.「サイドメニュー」の幅を変更

全体的に横幅が大きいので、ちょっと削る為にサイドメニューの幅を少しだけ狭めてみました。

変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。
※「Ctrl」+「F」で「 サイドメニューの幅 」を検索すればOK

#main_contents {
	margin: -36px 340px 0 0;
/* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
	padding-top: 35px;
}

#sidemenu {
	float: right;
	position:relative;
	overflow: hidden;
	width: 320px; /* サイドメニューの幅 */
	padding-top: 35px;
}

#main_contents {
	margin: -36px 320px 0 0;
/* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
	padding-top: 35px;
}

#sidemenu {
	float: right;
	position:relative;
	overflow: hidden;
	width: 300px; /* サイドメニューの幅 */
	padding-top: 35px;
}

※2行目と11行目の数字を変更して、サイドメニューの幅を「320px」から「300px」にしました。