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

kuu♪からのお知らせ

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

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

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

カスタムスキン作成方法・7 [nice・コメント編] [最初の一歩]

必要な部分のみ変更してください。 

カスタムスキンの始め方
カスタムスキン作成方法・1 [バナー編] 
カスタムスキン作成方法・2 [背景編]
カスタムスキン作成方法・3 [文字色編]
カスタムスキン作成方法・4 [Links編]
カスタムスキン作成方法・5 [Articles編.1]
カスタムスキン作成方法・6 [Articles編.2]
もご覧ください。



【16】.entry { を変えよう [コメント・nice全体の設定]

*[nice][コメント]部分の背景色と文字色がここで設定されています。 
*背景色・文字色を記事と同じにする場合は、background: #f3f3f3; と color:#444444; を消しましょう

/*-----Entry-----*/
.entry {
margin-top:15px;
background: #f3f3f3;
padding:8px;
color:#444444;
}
 
sakusei-30.PNG
(クリックで拡大)

①背景色を変える

■background: #f3f3f3; → background: #000000;

/*-----Entry-----*/
.entry {
margin-top:15px;
background: #000000;
padding:8px;
color:#444444;
}
 
sakusei-31.PNG
(クリックで拡大)

cross_03.GIF


②文字色を変える

■color: #444444; → color: #FFFFFF; に変えます。

/*-----Entry-----*/
.entry {
margin-top:15px;
background: #f3f3f3;
padding:8px;
color:#FFFFFF;
}
 
sakusei-32.PNG
(クリックで拡大)

cross_03.GIF

④余白を変える

■margin-top:15px; と padding:8px; を消し
 margin:10px 10px 10px 10px; と padding: 10px 10px 10px 10px; を入れる

/*-----Entry-----*/

.entry {
margin-top:15px;
background: #f3f3f3;
padding:8px;
color:#444444;
margin:10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}

 
sakusei-33.PNG
(クリックで拡大)
cross_03.GIF

⑧”プレビュー”で確認

⑨OKなら”保存



【17】#nice h4 { を変えよう
 [niceの設定]

/* nice! */
#nice h4 {
background:url("/_common/skins/19/images/icon-nice.gif") no-repeat left center;
padding-left:20px;
}

①niceのマークを変える

background:url("/_common/skins/19/images/icon-nice.gif") no-repeat left center; を消し、自分でアップロードした画像と差し替える。
■文字との幅を変えるときは、padding-left:20px; の数字を変える。

 【参考】
   *niceの画像を変えよう

②”プレビュー”で確認

③OKなら”保存



【18】コメント欄を変えよう

■下記ページをみて興味のあるものをしてみてください。 

 *【コメント】の前に画像を入れよう
 *【コメントを書く】の前に画像を入れよう
 *コメント記入欄の文字色を変えよう
 *コメント記入欄に画像を入れよう
 *コメント記入欄の縦・横の幅を広げよう
 *コメント記入欄の外枠の線の色と太さを変えよう

 


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

nice! ありがとう 7

コメント 0

コメントの受付は締め切りました

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

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

  

         

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

×

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