天馬くんと一緒♪♪

  

ブログカスタマイズ（その２～タイトル画像を変えるの巻～）

ブログカスタマイズ１
ブログカスタマイズ２

よく皆様のブログを見ているとテンプレートとは異なったタイトル画像に変わっているのを見かけます。
どうやっているのー

自分のブログも変えてみたいー

というわけでやってみました。

まずはタイトルに使いたい画像をアップします。
画像の幅は先の
ブログカスタマイズ１
で設定した幅のものかそれ以上の方がよろしいかと。
高さはそうですねお好みで
（200～300pixぐらいが調度良いのかな？）

で、後はスタイルシートを変更するだけ．．．
しかーし
何を変えればいいのさ

なんて事を考えつつ色々調査とプレビューで確認して．．．

まず、スタイルシートの中の
#banner,#subbanner
というのを探します。

#banner,#subbanner{
background:#fff url("画像のURL") left;
padding:0px 0px 0px 0px;
height: 220px;
}

となっています。
この"画像のURL"を
アップロードした画像のURLに変更します。

/usr/ナチュルムID/ファイル名
となります。
IDがhoge
ファイル名がhoge.jpg
なら
/usr/hoge/hoge.jpg
となります。

次にナチュラムロゴの位置をずらします。
既にブログカスタマイズ１で
100pix幅を広げているのでロゴの位置を100pix動かします。

.logo{
padding-left:605px;
}

この605pixを705pixに変更。

これでタイトル部が自分好みの画像に変更できました。
めでたしめでたし



にほんブログ村　　←『ポチッ』とお願いします。

  

ブログカスタマイズ（その１～幅を広げるの巻～）

ブログカスタマイズ１
ブログカスタマイズ２

ナチュルムブログのカスタマイズはググば色々出てくるのでしょうけど．．．
自分自身の覚書みたいなものです。

なんか色々ブログを見ていると（読み逃げ？）
ブログの幅って意外とみなさん広げて（カスタマイズ？）いたりしますよね。
なわけで、ちょっとやってみようかと。
（だって狭くて窮屈なんですもの）

カスタマイズするにはスタイルシートを編集する事になります。
「ブログの設定」→「テンプレート」→「編集・カスタマイズ」を選択します。

いざ．．．スタイルシートの変更
注意！変更する前に必ずスタイルシートのバックアップを取っておいた方がよいです。

記事の部分の幅を広げるためにはブログ全体を広げる必要がありますのですが
どのくらい広げればよいのやら．．．
とりあえず50か100pix単位で調整してよさそうな幅に？

はじめにブログ全体を広げてみましょう
デフォルトは760pixなのでとりあえず100pixほど広げてみます。

#container{font-size:12px;

width:760px;　← ここの数値を変更
background-color:#ffffff;
margin:0px auto;
border-top-width: 1px;

これだけでブログ全体が広がります。

これだけだと、全体が広がっただけなので、
次に記事の部分を広げます。
それぞれ差分を加えていきます。

#content{
width:400px;　← ここの数値を変更
float:right;
background-color:#ffffff;
padding:20px 10px 20px 5px;
margin:0px;
}

次に
.blog{
width:400px;　← ここの数値を変更
margin:0px 0px 0px 0px;
}

これでブログ全体の幅と記事の部分の幅が100pix広くなりました。
しかいながら記事の内部は狭いまま．．．
タイトル部のバックの画像が左に寄った状態のまま．．．
まだまだカスタマイズが必要ですなぁ
それにスタイルによっては変更する項目も違うみたいやし．．．



にほんブログ村　←ポチッとお願いします。