ブログの練習

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

  

そら吉さんのブログのバナーが変更されました。
やったあー！！

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

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

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


（今のスタイルシート）

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


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

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

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

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


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

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

そら吉さんからのリクエストで、バナーの変更を練習しました。

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

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

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

変更箇所ですが

/* ヘッダー
================================================== */
ここの中の#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;
}


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


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


  

そら吉さんの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(//img01.tsukuba.ch/usr/rarara/atama.jpg) repeat-x 0 100%;　
　　　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　　　　　　　そら吉さんの　url　にして下さい。
}

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

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

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

そら吉さんは　[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(//img01.tsukuba.ch/usr/siragiku/isiokat1.jpg) repeat-x 0 100%;
}
#banner a:link, #banner a:visited {
color: #FFF;
text-decoration: none;
}


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


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