kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

スクロールバーの色を変えよう

【サイドのスクロールバーの色を変えよう】

ここで設定をすると、ブログ内のすべてのスクロールバーの色が変わります。
部分的に変えたい場合は、その部分それぞれで設定をする必要があります。

---

/*-----Header-----*/　とあります。（上の方です。）　
その中にスクロールバーのタグを入れましょう。私が入れたのは、このタグです。

html, body { scrollbar-arrow-color: #006690; scrollbar-face-color: #ffffff; scrollbar-3dlight-color: #c0f0f0; scrollbar-darkshadow-color: #c0f0f0; scrollbar-highlight-color: #a0c0f0; scrollbar-shadow-color: #a0c0f0; }

ご自分でスクロールバーを作りたい方は【スクロールバーの色を変える方法】をご覧ください。

無料の素材サイトさんでもスクロールバーの配布をしています。
借りる時は、素材サイトさんの指示にしたがって表示してくださいね。

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ スクロールバーの色を変える

記事上下の矢印画像を変えよう

今回は【記事上下の矢印画像を変えよう】です。

サイズは11×11くらいが良いです。
もう少し大きくても入るとは思いますよ。

変える部分を赤　で書いています。

---

 

/* Links */　とあります。(上の方）　その中の

.previousLink{
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2L_small_black.gif) no-repeat left center;
}

.nextLink{
padding-right:10px;
background:url(/blog/_skin/system/images/arrow2R_small_black.gif) no-repeat right center;
}

.archive-links{
float:right;
padding-left:10px;
background:url(/blog/_skin/system/images/arrow2T_small_black.gif) no-repeat left center;
}

を変えます。
.previousLinkが　「一つ前の記事」
.nextLinkが　「ひとつ後の記事」
.archive-links　「ブログトップへ」
です。

その中の
background:url(/blog/_skin/system/images/arrow2L_small_black.gif)
background:url(/blog/_skin/system/images/arrow2R_small_black.gif)
background:url(/blog/_skin/system/images/arrow2T_small_black.gif)
を変えればＯＫです。

もし画像が切れるようであれば
padding-left:15px;(左のすきま）
padding-top:1px;（上のすきま）
padding-bottom:1px;（下のすきま）
を付け加えてみてください。
（数字は自分で調整してみてくださいね。）

☆カスタムスキンのためのミニミニ素材を配布しています。
よろしければお使いください。
もちろんご自分の好きな絵でもＯＫです。

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事上下の矢印画像を変えよう

背景を半透明にしよう

背景を半透明にするには、所定の場所に以下のタグを入れます。

background:#ffffff; filter:alpha(opacity=85); -moz-opacity:0.85;

background:#ffffff;　　　　　　・・・自分で変えたい部分の背景の色を入れます。

filter:alpha(opacity=85);　 
-moz-opacity:0.85;　　　　　　
・・・filter:alpha() は、IE 用。-moz-opacity は、Mozilla 用のプロパティなのでそれぞれに数字を入れます。
数字を変えると透過率が変わります。
ただし、全体が薄くなるので注意が必要です。

---

挿入場所は

■全体的な設定は　#container {　の中に

■個別設定は、自分が変えたい場所に入れてください。以下を参考にしてください。
　　　□記事全体なら　.articles {
　　　□記事タイトルなら　.articles-title {
　　　□記事本文なら　.articles-body {
　　　□コメント欄なら　#comment-write textarea {
　　　□サイドバー全体なら　.sidebar {
　　　□サイドバータイトルなら　.sidebar-title {
　　　□サイドバー本文なら　.sidebar-body {

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 背景を半透明にする

背景画像を固定する方法

【背景画像を固定する方法】

 /*-----Common-----*/

body { background:#ffffff; }

①background:#ffffff;　を消し、背景画像のＵＲＬ
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif);
を入れます。

②固定するためのタグ
background-attachment : fixed;　を付け加えます。
　　

body { background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif); background-attachment : fixed; }

 

【おまけ】

★右下に固定したい場合は　no-repeat right bottom;　を足します。
　〔例〕background:url("/_images/blog/_▲▲▲/******/1234567.gif") no-repeat right bottom;

　right＝右
　left＝左
　top＝上
　bottom＝下

body { background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif) no-repeat right bottom; background-attachment : fixed; }

 

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

 

タグ：ソネットブログ カスタムスキン 背景画像を固定する方法 ソネブロ So-netBlog カスタマイズ

背景に画像をのせてみよう

今回は　【背景色】　→　【背景画像】　の変更です。
（基本の背景色を変えた方はこれをする必要はありません）

変える部分を赤で書いています。

---

 

/*-----Common-----*/　とあります。（上の方です。）　その中の

body { background:#ffffff; }

 

①background:#ffffff;　を消します。

②使いたい壁紙をアップロードします。
（壁紙は、検索で「ホームページ素材」と入れるとたくさんのフリー素材がでてくるので好きなものを選ぶといいです。）

③上で消した場所にマウスポインタを置いておき、アップロードした画像をクリックすると
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat;
こういうのが自動ででます。

④今回は、繰り返し画像を表示したいので、 no-repeat　は消してしまいます。
　　下のようになればＯＫです。

body { background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif); }

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

   

タグ：背景画像を変える カスタマイズ カスタムスキン So-netBlog ソネブロ ソネットブログ

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。