kuu♪からのお知らせ

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

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

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

カスタムスキン作成方法・5 [Articles編.1]

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

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

---

【12】.articles {　を変えよう　[記事部分全体が変わります]

/* Articles */

.articles { width:540px; padding-bottom:20px; margin-bottom:20px; background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom; overflow:hidden; }

　　　　　　　　　　

①記事の一番下のラインを消す
■background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom;　を消せばＯＫ
　　　（クリックで拡大）

②まわりを枠で囲む
■線で囲む場合は、border: 1px solid #FF35CD;　を入れます。
　　　 （クリックで拡大）
　　【詳しくは、下記記事をご覧ください】
　　　＊記事の外線の色と太さと種類を変えよう
　　　＊記事の外枠を画像で作ろう
　　　＊線の種類と記述方法

③背景に色や画像を載せる
■色を載せる場合は、background: #FF35CD;　を入れます。
　　　 （クリックで拡大）
　　【詳しくは、下記記事をご覧ください】
　　　＊記事部分全体に背景色や背景画像をつけよう
　　　＊背景色の指定と画像の挿入方法

④文字色を変える
■color:#000000;　を入れます。
　　　（クリックで拡大）
　　【参考】
　　　＊文字色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方　　

⑤余白を変える
　　　padding-bottom:20px;
　　　margin-bottom:20px;
　　　を変えると、記事部分の下の幅が変わります。

■文字がラインの左右にくっついて見にくいのですが、これはここで変更せず下記を参考にして変えてください
　　　　＊記事タイトルの幅を変えよう
　　　　＊記事本文の文字の位置を変えよう
　　　　＊”margin”　と　”padding”の違い

⑥”プレビュー”で確認

⑦ＯＫなら”保存”

---

【13】.articles-title {　を変えよう　[記事タイトル部分が変わります]

/* Articles */

.articles-title { margin:0; margin-bottom:15px; padding-left:5px; border-left:4px solid #70a000; font-size:small; line-height:1.2; }

①タイトルの前のラインを消す
　　　
■border-left:4px solid #70a000;　を消します。
■変わりに小さな画像を入れることができます。
　　　　＊記事タイトルに小さな画像を入れてみよう
　　　　＊背景色の指定と画像の挿入方法

②余白を変える
■padding-left:5px;　で左からの幅を調整します。
　　　　□上下左右の幅を広げるには　padding:5px 10px;　を入れます
　　　　【参考】＊”margin”　と　”padding”の違い

③背景に色を載せる
■色を載せる場合は、background: #FF35CD;　を入れます。
　　　（クリックで拡大）
　　【詳しくは、下記記事をご覧ください】
　　　＊記事タイトルの背景色を変えよう
　　　＊背景色の指定と画像の挿入方法

④下線をひく
■border-bottom:1px solid #FF35CD;　を入れます。
　　　（クリックで拡大）
　　【詳しくは、下記記事をご覧ください】
　　　＊記事タイトルの下の線を変えよう
　　　＊線の種類と記述方法

⑤背景全体に画像を載せる
■記事の幅に合わせた画像を作り載せる

⑥文字色を変える
■color:#0099FF;　を入れます。
　　　
　　【参考】
　　　＊記事タイトルの文字色を変えよう
　　　＊文字色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

⑦文字リンク色を変える
■下記タグを入れます。

.articles-title a:link { color:#009900; } .articles-title a:visited { color:#009900; } .articles-title a:active { color:#009900; } .articles-title a:hover { color:#009900; }

　　　
　　【参考】
　　　＊記事タイトルの文字リンク色を変えよう
　　　＊文字リンク色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

⑧”プレビュー”で確認

⑨ＯＫなら”保存”

 

タグ：ソネット ソネブロ ソネットブログ So-net blog カスタムスキン カスタマイズ .articles .articles-title

カスタムスキン作成方法・6 [Articles編.2]

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

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

---

【14】.articles-body {　を変えよう　[記事本文が変わります]

/* Articles */

.articles-body { line-height:1.6; margin-bottom:20px; }

①余白を変える
Ａ.　上下左右の幅を広げるには　padding:5px 10px;　を入れます
　　　　【参考】＊”margin”　と　”padding”の違い

　　　

Ｂ.　margin-bottom:20px;　を変えると記事の一番下の幅が変わります。

②背景を変える
■全体に色を載せる・画像を載せる場合は、【12】.articles {の④　で変えましょう。
　ここで変えると余白部分などに色が入らない場合があります。
■ワンポイント画像などは載せてもＯＫだと思います。
　　【参考】
　　　＊背景色の指定と画像の挿入方法

③文字色を変える
■color:#FF0000;　を入れます。
　　　
　　【参考】
　　　＊記事本文の文字色を変えよう
　　　＊文字色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

④文字リンク色を変える
■下記タグが入っているので、お好きな色に変えます。

.articles-body a:link   { text-decoration: none; color:#70A000; } .articles-body a:visited  { text-decoration: none; color:#70A000; } .articles-body a:active  { text-decoration: none; color:#70A000; } .articles-body a:hover   { text-decoration: underline; color:#70A000; }

　　　
　　【参考】
　　　＊記事本文の文字リンク色を変えよう
　　　＊文字リンク色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

⑤記事中の広告を透過しよう。
■背景に色や画像が入っている場合、広告の透過を設定しておくと便利です
　　　＊記事中の広告を透過しよう

⑧”プレビュー”で確認

⑨ＯＫなら”保存”

---

【15】.posted{　を変えよう　[記事本文の下部分が変わります]

/* Articles */

.posted{ padding-top: 10px; font-size:x-small; color:#999999; }

①余白を変える

　　　

Ａ.　padding-top: 10px;　を変えると上からの幅が変わります。
　
　　　　＊padding-left: 10px;　を付け加えると左からの幅が変わります。
         ＊padding-bottom: 10px;　を付け加えると下からの幅が変わります。


　　【参考】
　　　＊記事の一番下の日付の位置を変えよう
　　　＊”margin”　と　”padding”の違い

③文字色を変える

■color:#999999;　→　color:#000000;　に変えます。

　　　
　　【参考】
　　　＊記事の一番下の日付の文字色を変えよう
　　　＊文字色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

④文字リンク色を変える
■下記タグを挿入し、お好きな色に変えます。

.posted a:link { color:#0000FF; } .posted a:visited { color:#0000FF; } .posted a:active { color:#0000FF; } .posted a:hover { color:#0000FF; }

　　　
　　【参考】
　　　＊文字リンク色の変え方　
　　　＊文字のサイズの変え方
　　　＊文字の右寄せ・左寄せ・真ん中寄せ
　　　＊字体の変え方

⑤記事の一番下に線を入れる
■線を入れてもいいし、画像を入れてもいいでしょう。
　　　＊記事の一番下の線の色を変えよう

⑧”プレビュー”で確認

⑨ＯＫなら”保存”

 

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ .articles-body

カスタムスキン作成方法・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; }

（クリックで拡大）

①背景色を変える

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

/*-----Entry-----*/ .entry { margin-top:15px; background: #000000; padding:8px; color:#444444; }

（クリックで拡大）

②文字色を変える

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

/*-----Entry-----*/ .entry { margin-top:15px; background: #f3f3f3; padding:8px; color:#FFFFFF; }

（クリックで拡大）

④余白を変える

■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; }

（クリックで拡大）

⑧”プレビュー”で確認

⑨ＯＫなら”保存”

---

【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の画像を変えよう

②”プレビュー”で確認

③ＯＫなら”保存”

---

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

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

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

 

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ .entry { #nice h4 {

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

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