SSブログ

目次

【カスタムスキン初心者の方はこちらをどうぞ】
　┣カスタムスキンの始め方
　┣カスタムスキン作成方法・1　[バナー編]new_58.gif
　┣カスタムスキン作成方法・2　[背景編]new_58.gif
　┣カスタムスキン作成方法・3　[文字色編]new_58.gif
　┣カスタムスキン作成方法・4　[Links編]new_58.gif
　┣カスタムスキン作成方法・5　[Articles編.1]new_58.gif　
　┣カスタムスキン作成方法・6　[Articles編.2]new_58.gif
　┣カスタムスキン作成方法・7　[nice・コメント編]new_58.gif


【カスタムスキンのＱ＆Ａ】
　┣カスタムスキンの質問箱
　┣カスタムスキンの質問箱2


【カスタムスキンを作るための基礎知識】
　┣cssの内容
　┣文字色の変え方　
　┣文字リンク色の変え方
　┣文字のサイズの変え方
　┣文字の右寄せ・左寄せ・真ん中寄せ
　┣字体の変え方
　┣線の種類と記述方法
　┣背景色の指定と画像の挿入方法
　┣画像が小さくなるときの対処法
　┣”margin”　と　”padding”の違い


【背景】
　┣背景色を変えよう
　┣背景に画像をのせてみよう
　┣背景画像を固定してみよう
　┣背景を半透明にしよう
　┣記事上下の矢印画像を変えよう
　┗スクロールバーの色を変えよう

【文字色】
　┣ブログ全体の文字色を変えよう
　┣ブログ全体の文字のリンク色を変えよう
　┣文字リンクの下線を変えよう


【ヘッダー・フッダー】
　┣ヘッダーに画像を入れよう（ＯＯさん部分）
　┣ヘッダーに画像を入れよう（ブログトップ部分）
　┗ヘッダーを透過させよう


【バナー】
　┣オリジナルバナーを作ろう
　┣バナーの位置を変えよう
　┣バナーをリンクボタンにしてみよう
　┣ブログタイトル＆サブタイトルの文字色を変えよう
　┣ブログタイトル＆サブタイトルの文字の位置を変えよう

【タブ】
　┣タブをつけてみよう　　　　
　┣プルダウンタブをつけてみよう


【記事】
　┣記事の外線の色と太さと種類を変えよう
　┣記事の外枠を画像で作ろう
　┣記事部分全体に背景色や背景画像をつけよう

　┣記事タイトルの文字色を変えよう
　┣記事タイトルの文字リンク色を変えよう
　┣記事タイトルの幅を変えよう
　┣記事タイトルの背景色を変えよう
　┣記事タイトルの下の線を変えよう
　┣記事タイトルに小さな画像を入れてみよう

　┣記事本文の文字色を変えよう
　┣記事本文の文字リンク色を変えよう
　┣記事本文の文字の位置を変えよう
　┣記事中の広告を透過しよう

　┣記事の一番下の線の色を変えよう
　┣記事の一番下の日付の文字色を変えよう
　┣記事の一番下の日付の位置を変えよう

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


【サイドバー】
　┣サイドバーに外枠をつけよう
　┣サイドバーの外枠を画像で作ろう
　┣サイドバーに背景色をつけよう

　┣サイドバータイトルとバナーの間に空白を作ろう
　┣サイドバータイトルに小さな画像を入れてみよう
　┣サイドバータイトルに背景色をつけよう
　┣サイドバータイトルの文字色を変えよう
　┣サイドバータイトルの文字リンク色を変えよう

　┣サイドバー本文の文字色を変えよう
　┣サイドバー本文の文字リンク色を変えよう
　┣サイドバー本文の文字の位置を変えよう

　┣カスタムペイン内の文字に左右の余白を作ろう

　┣NEWの文字色を変えよう

　┣3ペインのサイドバーの位置を変えよう

　┣プロフィールの中の矢印画像を変えよう
　┣プロフィールの中の矢印画像を消そう
　┣プロフィールに画像を入れる方法
　┣プロフィール内の「nice!」の文字色と外線の色と背景色を変えよう

　┣カレンダーの更新した日付部分の画像を変えよう
　┣カレンダーを装飾してみよう

　┣「読者になる」の画像を変えよう
　┣「読者になる」の背景色を変えよう
　┣「読者になる」の文字リンク色を変えよう

　┣「POWERED BY so-neblog」 と「RSS」 の左右の位置を変えよう
　

【ブログの小技】
　┣記事ＴＯＰにお知らせをつけよう
　┣ブログにひとこと話せる「Twitter」をつけよう！

　┣月別表示を変えよう〔ドロップダウンにする〕
　┣カテゴリーを変えよう〔ドロップダウンにする〕
　┣サイドバーのドロップダウンの枠の幅と文字を小さくする
　┣サイドバーのコメント欄をツリー表示にしよう
　┣「メッセージを送る」の画像を変えよう
　┗「ＲＳＳプレイヤーとRSS2.0（RSSフィード）

　┣画像タグの謎を解く
　┣リッチテキストエディタでテーブルを組む【基本】
　┣リッチテキストエディタでテーブルを組む【テーブルのプロパティ】
　┗リッチテキストエディタでテーブルを組む【セルのプロパティ】


【おまけ】
　┣カスタムスキンのためのミニミニ素材
　┣kuuの作ったカスタムスキンのパーツ倉庫new_58.gif

　┣マウスカーソルをハーボット（harbot）にしよう！
　┣コメントにハーボット絵文字
　┣ピグミーの絵文字
　┗ハーボットのアクセスカウンターとオンラインカウンター

　★kuuのカスタムスキンの軌跡

ｶｽﾀﾑｽｷﾝを作るための注意事項

■今回の記述は「シンプルワイド」のタグを元にしています。（部分的にスタンダード１と2も使用）
　他のタイプのスキンでは設定変更がうまくいかないものもあるかもしれません。（特にタイトル＆サブタイトル部分）

■今回私が記述する内容は、私のやり方であって他にもいろんなやり方があると思います。　
　記述に間違いがあれば教えてください。　
　でも、苦情は受け付けません。（荒らしと思われるコメントは私の判断で消させていただきます）

■今回のカスタムスキンを作るのは自己責任で行ってください。
　問題が発生しても責任は持てません。
　表示等がうまくいかない時は、その作ってるスキンを消して最初からやり直せばうまくいくかもしれません。

■使っているブラウザによっては反応しないカスタマイズもあります。

ｱｸｾｽ解析


kuu♪からのお知らせ

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

ss.png


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

今後ともよろしくお願いいたします。
記事 ブログトップ
前の5件 | -

nice・コメントを書くの字の位置を変えよう　[記事]

【nice・コメントを書くの字の位置を変えよう】

 

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


/*-----Entry-----*/　とあります　〔真ん中よりちょっと上）

.entry {
padding-left:12px;
margin-top:20px;
}

赤の部分を付け加えます。

padding-left:12px;　の12pxの部分を変えると左端からの幅が変わります

色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。


タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ nice・コメントを書くの字の位置を変えよう
2008-10-07 13:05  nice!(2)  コメント(4) 
共通テーマ：blog

「nice　コメント　コメントを書く」　の下の線の色を変えよう　[記事]

【nice　コメント　コメントを書く　の下の線の色を変えよう】

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

/*-----Entry-----*/　とあります

.entry h4 {
margin:0 0 10px 0;
padding:3px 0;
border-bottom:1px solid #888888;　
font-size:small;
}

線の色と太さと種類を変えるには、
border-bottom:1px solid #888888;　を変えます。

・border-bottom:1pxの数字を変えると線の太さが変わります。

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

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


タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン 「nice　コメント　コメントを書く」　の下の線の色を変えよう
2008-10-07 13:07  nice!(4)  コメント(2) 
共通テーマ：blog

記事の一番下の日付の位置を変えよう　[記事]

【記事の一番下の日付の位置を変えよう】

 

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

　/* Articles */　とあります。（上から1/3くらいのところです。）　

.posted{
margin:0 20px 10px 20px;
padding-top:5px;
border-top:1px dotted #888888;
}

padding-left:12px;　を付け加えます。
12pxの数字を変えると左端からの幅が変わります

.posted{
margin:0 20px 10px 20px;
padding-top:5px;
padding-left:12px;
border-top:1px dotted #888888;
}

色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。


タグ：ソネブロ ソネットブログ カスタムスキン カスタマイズ 記事の一番下の日付の位置を変えよう
2008-10-07 13:09  nice!(2)  コメント(8) 
共通テーマ：blog

記事の一番下の日付の色を変えよう　[記事]

【記事の一番下の日付の色を変えよう】

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


/* Articles */　とあります。（上から1/3くらいのところです。）　

.posted{
margin:0 20px 10px 20px;
padding-top:5px;
border-top:1px dotted #888888;
font-size:x-small;
color:#888888;
}


赤い部分　#888888　を変えましょう。


色の載せ方は、 、【基本の背景色を変えよう】に記述してあります。


 


タグ：カスタマイズ カスタムスキン So-netBlog ソネットブログ ソネブロ 記事の一番下の日付の色を変えよう
2008-10-07 13:11  nice!(4)  コメント(0) 
共通テーマ：blog

記事の一番下の線の色を変えよう　[記事]

【記事の一番下の線の色を変えよう】

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


/* Articles */　とあります。（上から1/3くらいのところです。）　

.posted{
margin:0 20px 10px 20px;
padding-top:5px;
border-top:1px dotted #888888;
font-size:x-small;
color:#888888;
}

 

 

線の色と太さと種類を変えるには、
border-top:1px dotted #888888;
　を変えます。

・border-top:1pxの数字を変えると線の太さが変わります。

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

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


タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 記事の一番下の線の色を変えよう
2008-10-07 13:13  nice!(1)  コメント(0) 
共通テーマ：blog
前の5件 | - 記事 ブログトップ

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

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

　

リンクについて

もしリンクを貼っていただけるのであれば
こちらのバナーをお使いください。

カスタムスキンへの道

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