ブログテンプレ『white blog』『black blog』アクセントカラー変更方法
ありがとうございますm(_ _)m
テンプレート名「12_whiteblog」「13_blackblog」の簡単カスタマイズ(2)!!
「アクセントカラー変更」方法についてご説明します。
投稿日時部分のデザインですが、
共有テンプレートでは「12_whiteblog」がオレンジ、
「13_blackblog」はウッド調になっています。
その他に、イエローグリーン、ライトブルーの差し替え画像をご用意していますので、
お好みのものがありましたら変更してみてくださいね。
■「12_whiteblog」用差し替え画像ファイル名
![]() 12_tag_or.png(初期) |
![]() 12_tag_yg.png | ![]() 12_tag_lb.png | ![]() 12_tag_wood.png |
■「13_blackblog」用差し替え画像ファイル名
![]() 13_tag_wood.png(初期) |
![]() 13_tag_yg.png | ![]() 13_tag_lb.png | ![]() 13_tag_or.png |
変更方法はいたって簡単!
変更はテンプレートのスタイルシート編集になります。
スタイルシートの記述中には */ コメント /* がついています。
/* メインコンテンツ
------------------------------------------------------------ */
の中の以下の部分を探してください。
#main td.kizi_sub {
width: 65px;
vertical-align: top;
background: url(http://blog-imgs-46.fc2.com/u/r/a/uraraka01/12_tag_or.png) no-repeat;
/* ◎投稿日時部分の色変更はココ。オレンジ→12_tag_or.png。イエローグリーン→12_tag_yg.png。ライトブルー→12_tag_lb.png。詳しくはhttp://uraraka01.blog27.fc2.com/にて◎ */
}
赤字の部分を変更したい画像のファイル名に書き換えてくださいね。
どうせなら、CMやTB、カレンダーやリンク文字も
同色のアクセントカラーに変更していただきましょう!
スタイルシートを上からたどっていただくと、
/* ◎~の色変更はココ。オレンジ→#ff7f43。イエローグリーン→#a3ef00。ライトブルー→#00d7f1。詳しくはhttp://uraraka01.blog27.fc2.com/にて◎ */
という記述が何カ所か出てきます。
コメントどおりに、その直前のカラーの記述(#~)を変更してみてください。
ウッド調の場合は、3色からお好きな色をどうぞ。
わたし、うまくご説明できていますでしょうか?
ご不明な点がありましたら、コメントでもメールフォームからでも
お気軽にお問い合わせくださいませ。
- 関連記事
-
- ブログテンプレ『sky』カスタマイズについて
- ブログテンプレ『white blog』『black blog』アクセントカラー変更方法
- ブログテンプレ『white blog』『black blog』アイコン変更方法
No title
テンプレート「12_whiteblog」を利用させてもらっています。
リンク色の変更等はこちらを見てだいぶ変更できるようになりましたが、エントリ本文の文字サイズのほうはどのあたりを変更すれば変えられるのでしょうか?
探してみるとfont size=x-smallという部分があるのでここを変えればいいのかな、と思ったのですが、11pxほどの文字サイズの場合はどのように表記すれば変更可能でしょうか。
初心者的な質問の上にお忙しいとは思いますがよろしくお願いいたします。
テンプレはとても気に入っています。更新や作成頑張ってください^^♪
Re: No title
コメントありがとうございます。
「12_whiteblog」の文字サイズですが、
現在は12pxほどになっています。
が、ユーザビリティの観点から相対サイズで指定しています。
詳しくご説明しますと、
body(全体)にsmallと指定(x-smallはIE5用の指定です)、
エントリー本文にはその90%と指定しています。
smallは標準meduim=16pxの一段階下で、13.333…pxです。
13.333…×0.9でほぼ12pxというわけです。
エントリー本文のみを約11pxにするには
スタイルシートを以下のようにしてみてください。
/* メインコンテンツ
------------------------------------------------------------ */
の下をたどり、
div.entry_body {
font-size: 90%; ←11pxまたは83%に変更
margin: 30px 15px 20px 15px;
line-height: 1.8em;
letter-spacing: 0.1em;
}
ページ全体的に変更する場合は
bodyの基準フォントサイズ自体を替えてしまってもいいかと思います。
私は基準はキーワードでざっくり設定し、個別に%で調整していますがなかなか大変ですものね。
bodyで一段階低いx-smallとすると、その90%で本文は10pxほどになってしまいますので、
パーセントで75%(=12px)と設定し、その90%=10.8pxとしていただくのはいかがでしょうか?
/* 全体
------------------------------------------------------------ */
の下、
body {
background: url(http://blog-imgs-46.fc2.com/u/r/a/uraraka01/12_bg.jpg) repeat-x fixed #ffffff;
color: #666666;
font-family: sans-serif;
font-size: x-small; ←75%に変更
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; ←75%に変更
}
html>body {
font-size: small; ←75%に変更
}
方法はいろいろです。
バグもいろいろあるようですが、
試してみてくださいね!
今後ともよろしくお願いいたします。
No title
なるほどパーセント表記で変更することも可能なのですね。ブログ全体のフォントサイズを変更するのもプレビューを見た限りでは問題なさそうだったので、今回は全体を変更してみました。
無事に目的のサイズに変更できたようです。感謝しますm(._.*)m
クリスマスレイアウトのテンプレ公開予定とのことで、楽しみにしております!
それでは^^♪
No title
「12_whiteblog 」を利用させていただいているイトコトと申します
素敵なテンプレートに出会えて 感謝しています!
カスタマイズについて質問させてください
「12_whiteblog 」を月別・カテゴリ別アーカイブのドロップダウンリスト化は可能でしょうか?
FC2のヘルプを見て 試みましたが 上手くいきませんでした。
お忙しい所、恐縮ですが よろしくお願いいたします
Re: No title
お返事が大変遅れて申し訳ありません。
ご利用ありがとうございます。
リンクからブログ拝見しました。
とても素敵ですね。
ご質問については、申し訳ありませんが、個別のカスタマイズにあたりますのでお許し下さい。
どうしても線引きしないとやっていけないのでご了承下さいね。
ヒントとしては、サイドはプラグインに対応していますので、
環境設定/プラグインの設定 から個別にHTMLを編集していくことなります。
ご存知かと思いますが、リストの代わりに<select>タグ<option>タグを使うとプルダウンにできるはずですよ。
よろしくお願いいたします。
No title
ご多忙の所 お返事いただきまして
ありがとうございます
手さぐりではありますが
少しづつ ブログを進めていこうと思います
ありがとうございました!