So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

スクロールバーの色を変えよう [背景]

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

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


/*-----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;
}


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

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


 


nice!(11)  コメント(15) 
共通テーマ:blog

記事上下の矢印画像を変えよう [背景]

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

サイズは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)
を変えればOKです。

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


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


 


nice!(3)  コメント(4) 
共通テーマ:blog

背景を半透明にしよう [背景]

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

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 {


posted by kuu at nice!(9)  コメント(10) 
共通テーマ:blog

背景画像を固定する方法 [背景]

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

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

body {
background:#ffffff;
}


①background:#ffffff; を消し、背景画像のURL
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;
}

 




 


nice!(15)  コメント(28) 
共通テーマ:blog

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

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

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


 

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

body {
background:#ffffff;
}

 

background:#ffffff; を消します。

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

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

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

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

   

nice!(23)  コメント(21) 
共通テーマ:blog

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。