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

kuu♪からのお知らせ

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

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

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

プロフィール内の「nice!」の文字色と外線の色と背景色を変えよう [プロフィール]

【プロフィール内の「nice!」の文字色と外線の色と背景色を変えよう】

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


 

/*--Profile--*/

.nice {
margin:0;
padding:0 2px;
background:#ffd900;
border:1px solid #0090ff;
color:#0090ff;
}

① background:#ffd900; を変えると〔nice!〕の字の背景色が変わります。
   他の背景と同色にするのなら消してしまいましょう。

② border:1px solid #0090ff; が周りの線の部分です。
    ・線を消すのなら 1pxを 0pxにすればOK

    ・solidは線の種類です。solidを↓↓の種類に変えることもできます。
      solid(普通の線)
      double(二重の線)
      groove(谷型の線)
      ridge(山型の線)
      inset(凹型)
      outset(凸型)
      dotted(点線) 一部の古いブラウザでは未対応
      dashed(大きい点線) 一部の古いブラウザでは未対応
      none(線なし)

    ・#0090ffの部分が色の指定です。好きな色に変えましょう。
      色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。

③ color:#0090ff; が〔nice!〕の字の色です。
   〔記事〕と同じ色にするのなら消してしまいましょう。

/*--Profile--*/

.nice {
margin:0;
padding:0 2px;
border:0px solid #0090ff;
}

これで上の見本の写真のようになります。


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

プロフィールに画像を入れる方法 [プロフィール]

【プロフィールに画像を入れる方法】

2パターンあります。

■1つ目

 画像として
    を用意して入れました。

/*--Profile--*/

dt.profile-img {
float:left;
}

dd.profile-status{
margin-left:85px;
line-height:180%;
}

.profileLink {
padding-left:12px;
background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;

}

.nice {
margin:0;
padding:0 2px;
background:#ffd900;
border:1px solid #0090ff;
}

① .profileLink の中を消します。
  padding-left:12px;
  background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;

② dd.profile-statusに
   background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif)no-repeat left  center;
   padding-left:20px;(画像の大きさによって20を調節してください)
  
を足します。

  

/*--Profile--*/

dt.profile-img {
float:left;
}

dd.profile-status{
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif)no-repeat left  center;
padding-left:20px;

margin-left:85px;
line-height:180%;
}

.profileLink {
}

.nice {
margin:0;
padding:0 2px;
border:0px solid #0090ff;
}


 

■2つ目

今回は1つめに更に  を足してみます。(もちろんどちらかだけでもOKです。)

 

/*--Profile--*/

dt.profile-img {
float:left;
}

dd.profile-status{
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif)no-repeat left  center;
padding-left:20px;

margin-left:85px;
line-height:180%;
}

.profileLink {
}

.nice {
margin:0;
padding:0 2px;
border:0px solid #0090ff;
}

#profile{
margin-bottom:10px;
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat right bottom;
}

を足します。
right bottom の部分は好みで変えてOKです。

/*--Profile--*/
#profile{
margin-bottom:10px;
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat right bottom;
}

dt.profile-img {
float:left;
}

dd.profile-status{
background:url(/blog/_images/blog/_▲▲▲/******/1234567.gif)no-repeat left  center;
padding-left:20px;

margin-left:85px;
line-height:180%;
}

.profileLink {
}

.nice {
margin:0;
padding:0 2px;
border:0px solid #0090ff;
}

 

 


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

プロフィールの中の矢印画像を消そう [プロフィール]

【プロフィールの中の矢印画像を消そう】


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


 

/*--Profile--*/ とあります。その中の

.profileLink {
padding-left:12px;
background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;
}


padding-left:12px;
background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;

を消します。


 


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

プロフィールの中の矢印画像を変えよう [プロフィール]

【プロフィールの中の矢印画像を変えよう】

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


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


 

/*--Profile--*/ とあります。その中の

.profileLink {
padding-left:12px;
background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;
}

 background:url(/blog/_skin/system/images/arrowR_small_gray.gif) no-repeat left center;
ここに自分の入れたい画像を載せます。

② ①をして一回保存してみます。
  画像と文字が重なっていなければする必要はないですが、もし重なっている場合は
  padding-left:12px;を付け加え12pxを変えましょう。

.profileLink {
padding-left:12px;
background:url(/blog/_images/blog/_▲▲▲/*****/0123456.gif) no-repeat left center;
padding-left:12px;
}


上下が切れてしまう場合は、
padding-top:12px;
padding-bottom:12px;
を付け加えるといいかもしれません。


nice!(1)  コメント(0) 
共通テーマ:blog
プロフィール ブログトップ

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

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

  

         

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

×

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