2010年12月18日

デザイン変えてみた



ブログのデザインを変えてみました。
変えてから、すごく日が経っているのは仕様です

最初は用意されているテンプレートをそのまま使っていたのですが
こんな感じで、3列だったのです。

これだとどうにも本文の横幅が狭くて\(^o^)/
前回、ソースコードを張るのに苦労たのです・・・

こんな風に

本文はまだ、改行で調節してたのですが
ソースコードになってくると難しくなってきました。


単なるレイアウトの問題で
設定するだけで2列に変えられると思いきや
別にそんなことはありませんでした\(^o^)/

なので直接タグを書き変えちゃいました。

やったこと
・leftでwidthを指定しているところを変えてみる
・真ん中っぽい部分を、減らした分だけ増やす

#content{
    float:right;
    width:360px;
    text-align:left;
}
#contentin{}
#left{
    float:left;
    width:203px;
}
#right{
    float:right;
    width:203px;
}
こんな感じになっていたのを
#content{
    float:right;
    width:560px;
    text-align:left;
}
#contentin{}
#left{
    float:left;
    width:3px;
}
#right{
    float:right;
    width:203px;
}

と変更。
これでひとまず幅は変わりました(*'-')

後、ブログパーツで左側に表示されていたものは
右側に移しました。

こうなりました

で、今度は記事タイトルで、日付だけ背景が青くなってました。
調べてみたら、画像で実現していたらしく
タイトル用の画像を加工して、今の幅の仕様にしました。

折角なので、タイトルにも画像入れちゃいました。
最初はタイトル画像そのものを作ろうとしましたが
透過が面倒だったので今の形式に変更。
各ページ部分の、タイトル表示のあたりのタグを変えて
画像を表示するものにしましたとさ。

タイトル画像は、トップページのタグを編集して
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a>

となっている部分を
<h1 class="blogtitle"><a href="<$BlogUrl$>"><img src="タイトル用画像"></a>

みたいに変更。

で、このままだとこんな風に画像がはみ出ます。



またスタイルシートで調整。
タイトルの、上の空白を減らします。
#banner h1.blogtitle{
    padding:115px 5px 5px 155px;
    font-size:20px;
    width:330px;
}


#banner h1.blogtitle{
    padding:15px 5px 5px 155px;
    font-size:20px;
    width:330px;
}

にして見栄えを確認。

後は、タイトルを画像に変えた作業を
トップ以外にも個別記事ページ・カテゴリアーカイブ・月別アーカイブと
それぞれ同じように変更。

で、現在の見栄えに至ります。



デザインを変更することはないと思っていましたが
やってみると楽しいものですねー('-'*)
bタグはデフォルトで赤文字とかもやろうかな。




ちなみに撮影作業のために、一回レイアウトを元に戻して
また変えてたのは秘密です。



nanodayo at 09:33コメント(0)トラックバック(0) 
ブログについて 

トラックバックURL

コメントする

名前
 
  絵文字