ブログの練習

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

  

すみません、書き忘れました。

バックを画像に変えるときは、
width（横幅）を740pxに変更してください。
  

のらねこさんから、バックを画像に変更したいとのリクエストを受けました。

のらねこさんが使っているテンプレートは【シンプル極】ですので、
テンプレート【シンプル極】をお使い方は参考にしてください。


元のスタイルシートはこうなっていたと思います。
　　↓　　　　↓　　　　↓
/* コンテナ
================================================== */
#container {
margin: 0 auto;
width: 740px;
text-align: left;
background: #ffffdd;　←ここを
}


それをこう変えます。
　　↓　　　　↓　　　　↓
/* コンテナ
================================================== */
#container {
margin: 0 auto;
width: 740px;
text-align: left;
background: url(//img01.tsukuba.ch/usr/rarara/image.jpg);　←こう変える
}
  

そら吉さんの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に貼り付けて
４．登録を押して、完成です。


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

  

テンプレート【シンプル極】の場合です。

★タイトルのリンクの文字色を変えるには

例：　始めの色　#C03　を　希望の色　#d5d2ec　に変更


/* ヘッダー
================================================== */
#banner {
margin: 10px 0 20px;
border-left: 5px solid #CCC;
}
#banner a:link, #banner a:visited {
color: #cafb82;
text-decoration: none;
}
#banner a:active, #banner a:hover {
color: #d5d2ec;　←ここ
}