スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/37-cad310fb

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

カスタマイズ

あると♪さん
この記事を参考にブログ修正してます。
特にサイドバーの所で、おぅ〜〜〜。
cssこうやって見るんだなって、す〜〜し解りました。
  • 2014-11-19 08:44
  • girigiri26さん@管理人
  • 編集

Re: カスタマイズ

> girigiri26さん

ありがとうございます♪(≧∇≦)b

早速、girigiri26さんのブログを見に行ったら
少しずつカスタマイズされてるようでしたので、
今後どのようになるのか楽しみにしてますね♪d(≧∀≦)b
  • 2014-11-19 09:01
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

FC2ブログ公式テンプレート「basic_white」をカスタマイズ FC2ブログ公式テンプレートをカスタマイズしてみる

色々カスタマイズしてるうちに、他のテンプレートはどんな作りになってるのか?と気になったので勉強も兼ねて、テスト用に新しく別のブログを作り、デフォルトで設定されてたFC2ブログの公式テンプレート「basic_white」を色々カスタマイズしてみる事にしました♪
このブログ自体のテンプレートを変更して試しても良かったのですが、これはこれで気に入ってるし、色々変更して初期化するのも面倒だったので... 新しく別のブログを作りました... w

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



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


  1. 1.「basic_white」の特徴
  2. 2.「ブログの説明」の文字サイズ変更
  3. 3.「記事タイトル」の文字サイズ変更
  4. 4.「サイドメニュー」の幅を変更



FC2ブログ公式テンプレート「basic_white」をカスタマイズ

1.「basic_white」の特徴


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

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

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


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

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



ブログ最上部に表示される検索バー

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


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

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

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

① 環境設定をクリック FC2ブログの管理画面
② 検索バーの設定をクリック ブログの設定から検索バーの設定をクリック
③ 利用しないを選択して更新 「利用しない」を選択して更新




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

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とh3をそれぞれ別の指定にしても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」にしました。


ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-12 | 「basic_white」 | コメント(2) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/37-cad310fb

「テンプレート「basic_white」をカスタマイズ」へのトラックバック

- TrackBack -


「テンプレート「basic_white」をカスタマイズ」へのコメント

- Comment -

カスタマイズ

あると♪さん
この記事を参考にブログ修正してます。
特にサイドバーの所で、おぅ〜〜〜。
cssこうやって見るんだなって、す〜〜し解りました。
  • 2014-11-19 08:44
  • girigiri26さん@管理人
  • 編集

Re: カスタマイズ

> girigiri26さん

ありがとうございます♪(≧∇≦)b

早速、girigiri26さんのブログを見に行ったら
少しずつカスタマイズされてるようでしたので、
今後どのようになるのか楽しみにしてますね♪d(≧∀≦)b
  • 2014-11-19 09:01
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。