PR

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  
Posted by つくばちゃんねるブログ at
そら吉さんのブログのバナーが変更されました。
やったあー!!

でも、高さが変わっていないなあ、あの高さかっこよかったから、あのままにしたのかな・・・
などと考えていたら、「出来たような出来ないような・・・」というコメントがありました。

あわててスタイルシートを見たら、そら吉さんのがんばりの姿が見えました。
ごめんなさい、説明分りにくかったですよね。

バナーの高さを指定する場所が違っているので、
その位置を変えるだけで、大丈夫ですよ。


(今のスタイルシート)

/* ヘッダー
================================================== */
#banner {
   margin-bottom: 1em;
   padding: 0px 0px 0px 10px;
   background: url(http://img01.tsukuba.ch/usr/studiomove/新バナー.jpg)
}
#banner a:link, #banner a:visited {
   color: #FFF;
   text-decoration: none;
}height:276px


(訂正するところ)青い文字のところが変更箇所です。

/* ヘッダー
================================================== */
#banner {
   margin-bottom: 1em;
   padding: 0px 0px 0px 10px;
   background: url(http://img01.tsukuba.ch/usr/studiomove/新バナー.jpg);
   height:276px;
}
#banner a:link, #banner a:visited {
   color: #FFF;
   text-decoration: none;
}


置き場所を指定したら、最後に「;」を必ず付けてください。
「」(カギカッコ)の 」 (カッコとじ)みたいなものと思ってください。

ですので、backgroundのurlの最後にも ; を付けてくださいね。

background: url(http://img01.tsukuba.ch/usr/studiomove/新バナー.jpg);

分りにくいので、大きくしてみました。最後の ; を確認してくださいね。


訂正箇所をこのまま、コピー&ペーストして
スタイルシートに貼り付けても大丈夫だと思います。

その時は、先の変更前の部分を削除してくださいね。
そうしないと、デザインが崩れてしまいますので。
  

Posted by 白菊 at 17:54Comments(0)バナーの変更
そら吉さんからのリクエストで、バナーの変更を練習しました。

今そら吉さんがご使用のテンプレートは [ts-3-gray]Biz-Gray です。

元々は、高さが110pxの画像をバナーに使っています。
そら吉さんが用意した画像が全部表示されないのは、このためです。

今のままでも十分カッコイイともうのですが
画像を全部表示するには、スタイルシートを少し変更しなくてはなりません。

変更箇所ですが

/* ヘッダー
================================================== */
ここの中の#bannerと.descriptionを変えます。

#banner
(変更前)
#banner {
margin-bottom: 1em; 
              ここは変更します
                  ↓             
padding: .8em 20px 1.8em;              
background: url(そら吉さんのバナーのURL) repeat-x 0 100%;                        
                                  ↑
                             これを取ります            


(変更後) 青い文字のところが変更箇所です。
#banner {
margin-bottom: 1em;
padding: 0px 0px 0px 10px;
background: url(そら吉さんのバナーのURL);
height:276px;
}


.description
(変更前)
.description {
color: #FFF;
width: 35em;
max-width: 700px;
overflow: hidden;
font-size: 93%; /* 12px */
line-height: 1.5;
}


(変更後)青い文字のところが変更箇所です。
.description {
color: #FFF;            
padding:10px 0px 0px 15px;
width: 35em;
max-width: 700px;
overflow: hidden;
font-size: 93%; /* 12px */
line-height: 1.5;
}


これで、元々の大きさのバナーになると思います。


スタイルシートをいじる時は、自己責任でお願いします。


  

Posted by 白菊 at 03:20Comments(2)バナーの変更

2009年05月02日

バナーの変更2

そら吉さんのSOSで、バナーの画像を変えてみました。

原因は、そら吉さんが用意したバナーと、
もともとの(テンプレートの)バナーの大きさの違いにあります。


もともとの(テンプレートの)バナー

/* ヘッダー
================================================== */
#banner {
margin-bottom: 1em;     ここを変える
padding: .8em 20px 1.8em;  ← ↓
background: #6C6C6C url(/_img/biz_gray/bg.jpg) repeat-x 0 100%;
}
#banner a:link, #banner a:visited {
color: #FFF;
text-decoration: none;
}



そら吉さんが用意したバナーを使って
どこを変えるかというと:


/* ヘッダー
================================================== */
#banner {
margin-bottom: 1em;   
padding: .10px 10px 0px; ←変えた
height: 333px; ←加えた
background: url(http://img01.tsukuba.ch/usr/rarara/atama.jpg) repeat-x 0 100%; 
                      ↑
                  そら吉さんの url にして下さい。
}

バナーの画像は、そら吉さんのブログが変更になり次第、変えますので
ご了承下さい。
  

Posted by 白菊 at 16:31Comments(6)バナーの変更

2009年05月02日

4.バナーの変更

そら吉さんからのリクエストをいただきました。

バナーを画像に変更する場合です。

そら吉さんは [ts-3-gray]Biz-Gray というテンプレートを使っていますので、
このテンプレートの変更について説明します。

スタイルシートをカスタマイズしますので、
不安がある場合は、必ずコピーを取っておいてくださいね。

ヘッダーの”banner”の url 部分を変更します。


では、どこを変えるかというと:

/* ヘッダー
================================================== */
#banner {
margin-bottom: 1em;     ここを変える
padding: .8em 20px 1.8em;  
background: #6C6C6C url(/_img/biz_gray/bg.jpg) repeat-x 0 100%;
}
#banner a:link, #banner a:visited {
color: #FFF;
text-decoration: none;
}



(/_img/biz_gray/bg.jpg) の代わりに
白菊のメインブログ(http://siragiku.tsukuba.ch)のバナーを入れてみると

/* ヘッダー
================================================== */
#banner {
margin-bottom: 1em;      これに変えた
padding: .8em 20px 1.8em;      
background: #6C6C6C url(http://img01.tsukuba.ch/usr/siragiku/isiokat1.jpg) repeat-x 0 100%;
}
#banner a:link, #banner a:visited {
color: #FFF;
text-decoration: none;
}


画像のバナーに変えるときは、
1.バナーにしたい画像を画像一覧にアップロードしておいて下さい。
2.アップロードした画像の url をコピーして
3.スタイルシートの/* ヘッダー→#banner→ backgroundに貼り付けて
4.登録を押して、完成です。


もし、上手くいかなくて、カスタマイズ前のテンプレートに戻したいときは、
1.テンプレートからテンプレート一覧を開き
2.テンプレートの再選択をクリックして、
3.以前のテンプレートを選択すると、以前のブログに戻ります。

  

Posted by 白菊 at 00:14Comments(1)バナーの変更