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件 | 次の5件

文字のリンク色を変えよう　[文字]

【文字のリンク色を変えよう】

使うスキンによって変わる場所が違います。

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

 

/*-----Common-----*/　とあります。（いちばん上です。）　

a:link { text-decoration:none; color:#FFFFFF; }
a:visited { text-decoration:none; color:#FFFFFF; }
a:active { text-decoration:none; color:#FFFFFF; }
a:hover { text-decoration:underline; color:#FFFFFF; }


color:#FFFFFFの#FFFFFFを変えましょう。

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

・a:link　は　ページ全体のリンク（まだ開いてない部分の色）
・a:visited　は　ページ全体のリンク（一度開いたことがある部分の色）
・a:active　は　ページ全体のリンク（その部分を選択しているときの色）
・a:hover　は　ページ全体のリンク（マウスを乗せているときの色）


・a:link { text-decoration:none; color:#FFFFFF; }　・・・　noneは下線なし
・a:hover { text-decoration:underline; color:#FFFFFF; } ・・・　underlineは下線あり



 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ 文字のリンク色を変える
2008-10-07 13:50  nice!(7)  コメント(0) 
共通テーマ：blog

サイドバー本文の文字色を変えよう　[文字]

【サイドバー本文の文字色を変えよう】

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

/* Articles */　

.sidebar-body {
margin:0;
padding:0 10px;
}

の中に

color:#ffffff;があれば#ffffffを変えましょう。

なけでば　color:#ffffff;　を書き加えましょう　

.sidebar-body {
margin:0;
padding:0 10px;
color:#ffffff;
}

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

 

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ サイドバー本文の文字色を変える
2008-10-07 13:52  nice!(3)  コメント(1) 
共通テーマ：blog

サイドバータイトルの文字色を変えよう　[文字]

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

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

 .sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#003366;
font-size:x-small;
color:#ffffff;
}

color:#ffffffの#ffffffを変えましょう。

その中に、color:#ffffff　がなければ、書き加えてください。

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

 


タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ サイドバータイトルの文字色を変える
2008-10-07 13:52  nice!(3)  コメント(2) 
共通テーマ：blog

コメント欄の文字色を変えよう　[文字]

【コメント欄の文字色を変えよう！】　　　　　　　　　　　　

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

 

〔シンプルワイドのタグを例に解説しますが、どのスキンでもできるはずです。〕

/* Comment Write */　

#comment-write textarea {
height:150px;
}


①color:#ffffff;　を書き加えます。

　color:#ffffff;の　#ffffff　はお好きな色に変えてください。

#comment-write textarea {
height:150px;
color:#ffffff;
}


 

 

 

 


タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ コメント欄の文字色を変えよう
2008-10-07 13:53  nice!(2)  コメント(0) 
共通テーマ：blog

記事本文の文字色を変えよう　[文字]

【記事本文の文字色を変えよう】

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

/* Articles */　

.articles-body {
line-height:160%;
padding:5px 20px;
}

の中に

color:#ffffff;があれば#ffffffを変えましょう。

なけでば　color:#ffffff;　を書き加えましょう　

.articles-body {
line-height:160%;
padding:5px 20px;
color:#ffffff;
}

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


 

タグ：So-netBlog ソネットブログ カスタムスキン ソネブロ カスタマイズ 記事本文の文字色を変える
2008-10-07 13:53  nice!(2)  コメント(0) 
共通テーマ：blog
前の5件 | 次の5件 文字 ブログトップ

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

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

　

リンクについて

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

カスタムスキンへの道

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