スポンサーサイト このエントリーを含むはてなブックマーク

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

テンプレート whitenewsのカスタマイズについて このエントリーを含むはてなブックマーク

いつもありがとうございますです。
whitenewsがfc2の共有承認とおりまして、すっかりご利用頂けているようで、嬉しい限りです。

whitenewsはどしてもここをカスタマイズして欲しい!!!っていう場所が一箇所あるんです。


ここなんです。


whitenews.gif

いちばん上の2色。実はwhitenewsは不思議なやつで、ここの色合いをちょっと変えるだけでもうね、ブログ全体の印象がガラっと変わっちゃいます。
ではカスタマイズ方法を。

お好みのデザインにしてみてください。



#topmenu{
font-size:80%;
width:100%;
position:fixed;top:0; left:0;
height:25px;
background:#FF4D4D; /* 上の色の背景色 */
border-bottom:solid 5px #FFC0CB; /* 上の色のボーダー色と太さ */
filter: alpha(opacity=55);
-moz-opacity:0.55;
opacity:0.55;
}

#topmenu a:link, #topmenu a:visited{
color:#fff; /* リンクの色 デフォルト白#FFF */
font-size:80%;
}

#topmenu a:active, #topmenu a:hover{
color:#eee; /* リンクにマウスを重ねたときの色 デフォルトうすい灰色#eee */
text-decoration:none;
}


テンプレートのCSSのこの辺の色を変えて遊んでみてください。

たとえばこんなのとか


whitenews2.gif


#topmenu{
font-size:80%;
width:100%;
position:fixed;top:0; left:0;
height:25px;
background:#9ACD32; /* 上の色の背景色 */
border-bottom:solid 5px #AFEEEE; /* 上の色のボーダー色と太さ */
filter: alpha(opacity=55);
-moz-opacity:0.55;
opacity:0.55;
}

#topmenu a:link, #topmenu a:visited{
color:#fff; /* リンクの色 デフォルト白#FFF */
font-size:80%;
}

#topmenu a:active, #topmenu a:hover{
color:#eee; /* リンクにマウスを重ねたときの色 デフォルトうすい灰色#eee */
text-decoration:none;
}
COMMENT
はじめまして。
シンプルでとてもステキですね。
さっそく使わせて頂きたく思っていますが、
何分、素人なもので、
解らない事があり質問させて下さい。

私は画像を大きく載せたいのですが、
(現在は横700)
①横幅のピクセルは、
最大でどのくらいの大きさまでUPできますか?
700以下の場合、どのようにすれば幅が広がりますか?
②タイトルの背景に写真を表示できますか?
その場合のサイズをお教え下さい。
また、変更は可能ですか?
できれば変更方法も教えて下さい。
(現在は950×250)

よろしくお願い申し上げます。
2011/03/09(水) 09:52:05 |URL|ai #- [EDIT]
①横幅のピクセルは、
最大でどのくらいの大きさまでUPできますか?
700以下の場合、どのようにすれば幅が広がりますか?

>>方法はいくつかあります。
デフォルトでは幅を左650px/右350pxに設定しています。
これを750px / 250pxに変更するのがイチバン簡単です。

以下がデフォルトのwidth(幅)CSSを見てください。
leftがエントリーなどが入る左側の部分。rightがプラグインの入る右側のカラム。

/* left
----------------------------------------------------------- */
#left {
float : left ; width : 65% ;
}

/* right
----------------------------------------------------------- */
#right {
float : right ; width : 35% ;
}

leftのwidthを75%、rightを25%に変更することで、750px/250pxにできます。
ブログ全体の幅は#allクラスのwidthです。デフォルトでは1000px。この1000pxに対して、left/rightを%で指令しています。

もしブログ全体の幅を広げたい場合は、#allの中のwidthを変更してみてください。


②タイトルの背景に写真を表示できますか?
その場合のサイズをお教え下さい。
また、変更は可能ですか?
できれば変更方法も教えて下さい。
(現在は950×250)

>>可能です。タイトルの背景はCSSの#header部分です。

以下デフォルトのCSS。

/* header 上の色はtopmenu
----------------------------------------------------------- */
#header {
width:100%;
height:100px;
padding:50px 0px 0px 0px;
}

width100%=#allでのwidth幅になります。デフォルトでは1000px。
高さは100pxにしています。高さを変更したい場合、heightの数字を変えてください。

背景を加えるには、#headerを以下のように変更します。

/* header 上の色はtopmenu
----------------------------------------------------------- */
#header {
width:100%;
height:100px;
padding:50px 0px 0px 0px;
background-image:url(__ここに使いたい画像のアドレスを入れてください__);
background-repeat:no-repeat;
}

取り急ぎ、以上を回答とさせて頂きます。
また何かあればお気軽にどうぞです
2011/03/09(水) 22:50:21 |URL|管理している人 #mQop/nM. [EDIT]
素人な質問にも関わらず、
ご丁寧な回答を感謝します。
好みにカスタマイズできそうです。
ありがとうございました♪
2011/03/10(木) 14:54:44 |URL|ai #- [EDIT]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2011/04/01(金) 13:19:40 || # [EDIT]
こんにちはー
私の日本語はわるい、だから。。。

I'm using your template and customized it too, so I came to thank you.
2011/04/25(月) 17:46:25 |URL|*rikio #- [EDIT]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2013/02/10(日) 20:12:43 || # [EDIT]
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。