=kuri☆gohan=

お友達の頼まれごとなのです。
文章ばかりでつまんないと思います・・・

ブログの上の方に絵を出す方法！
（やり方は沢山あると思いますが・・・）

※横幅固定（幅１００％って書いてないやつ）でなおかつ2カラムのスタイルシートでの説明です。
　　

１．画像一覧を使って絵を作ってアップロードします。
　　※絵の横幅は７４０ピクセルが良いと思います。
　　　　縦は・・・あまり長いのは好きじゃありません。

２．アップロードした絵を画像一覧で確認して絵のURL（http://img??.slmame.com/~~）を憶えておきます。


３．ブログの設定→テンプレートを選択して使用中のテンプレートをカスタマイズします。
　　（横幅固定で2カラムのテンプレートね）

４．スタイルシートの中の暗号みたいなのをゆっくり眺めます。

５．暗号の中から

#banner,#subbanner{
background
#00D2C5 url(/_img/simple_marine/head.gif) left bottom;
padding:0px 10px 10px 10px; }

　　この部分を探します（がんばーれ）


６．【url(/_img/simple_marine/head.gif)】
　　ここの部分の括弧の中を2番で憶えたURLに変更します。
　　　（例）　url(//img01.tec29.com/usr/naho/t2itleslamame.png)left bottom;

７．ここから計算です。
　　絵を置くところにブログのタイトルと説明の文字が入っています。

　　ブログのタイトルの文字の縦の幅は
　　　　　　　　大きさ　　　　　　　３０ピクセル
　　　　　　　　中のマージン　　　２０ピクセル
　　　　　　　　セパレータ　　　　　　2ピクセル

　　説明の文字の縦の幅は
　　　　　　　　大きさ　　　　　　　１２ピクセル
　　　　　　　　中のマージン　　　４ピクセル
　　　　　　　　セパレータ　　　　　　2ピクセル
　　　　　　　　
　　合計で　７０ピクセル　縦のピクセル数を使ってます。

　　なので、作成した絵の縦の長さ（ピクセル数）から７０ピクセルを引いた値が
　　マージン（正確にはパティング）となります。

　　たとえば、縦　２００ピクセルの絵を書きましたら
　　　　200　－　70　＝　１３０ピクセル　パティングが必要です。

８．　7番で求めた　パティングを暗号の中に入れます。

padding:0px 10px 10px 10px;

　　　5番で見つけました暗号部分の最後です。

　　　４つの数字が並んでいますが　上、右、下、左　の順です。
　　　左右はとりあえず気にしなくていいと思いますので　０にしましょ

　　　上から何ピクセル開けるかと、下は何ピクセル開けるかの設定になります。
　　　たとえば、先ほどパティングが１３０って求まりましたので

padding:130px 0px 0px 0px;

とやりますと、ブログのタイトルと説明が一番下に行きます

padding:0px 0px 130px 0px;

これだと、一番上

padding:65px 0px 65px 0px;

たぶん真ん中ぐらい


９．これで設定終わりです。
　　間違いが無ければブログのタイトルのところに絵が表示されてるはずです。

---

タイトルの文字と説明の文字のカスタマイズ方法

１．スタイルシートという暗号の中からタイトルを設定してる部分をがんばって見つけます。
　　（色の部分）

#banner a {color:#fff;text-decoration:none;}
#banner a:link　{color:#fff;text-decoration:none;}
#banner a:visited　{color:#fff;text-decoration:none;}

　　さっきのすぐ下だからすぐすぐ！


２．【color:#fff;】と書いてあるところ全部　好きな色のコードに変更します。

　　これでブログのタイトルの文字の色が変わります。

３．ブログタイトルの左右の位置変更
　　がんばって、以下の暗号を見つけます。

.blogtitle{
font-size　:30px;
font-weight :bold;
padding　:20px 0px 0px 10px;
text-align　:left;
letter-spacing　:2px;
}

　　padding の部分が位置調整なので左側の余白の数字が最後なので

padding　:20px 0px 0px 100px;

　　と、やりますと　かなり右側に行きます。


４．説明の文字の色変更と位置の変更
　　3番のすぐ下にある

.description{
color:#ff0;
font-size:12px;
padding:4px 0px 0px 35px;
text-align :left;
letter-spacing:2px;
}

　　を探します。


５．【color】に好きな数字、paddingの最後の数字の変更で位置調整が行えます。

　　フォントの大きさも font-sizeで変更できますが、変更した場合、絵を表示するときに求めました
　　パディングの値も変わるので注意が必要です。


・・・・こんな説明でわかるかしら？