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


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

今後ともよろしくお願いいたします。
画像が小さくなるときの対処法 ｜字体を変更する ブログトップ

カレンダーを装飾してみよう　[カレンダー]

どこに入れると、どうなるのか　を書いてあります。

【カレンダーの更新した日付部分の画像を変えよう】
【よく出てくるタグの説明】
とあわせて参考にしてください。

.calendar-date {
text-align:center;
} 
 border: 1px solid #FF0000; background:#FF0000;
 Calendar-01.PNG Calendar-02.PNG
 .calendar-date {
text-align:center;
border: 1px solid #FF0000;
}		 .calendar-date {
text-align:center;
background:#FF0000;
}

#calendar table {
margin:3px auto;
text-align:center;
}
 border: 1px solid #FF0000; background:#FF0000;
 Calendar-03.PNG Calendar-04.PNG
 #calendar table {
margin:3px auto;
text-align:center;
border: 1px solid #FF0000;
}		 #calendar table {
margin:3px auto;
text-align:center;
background:#FF0000;
}

#calendar th {
height:21px;
width:21px;
font-weight:normal;
}
 border: 1px solid #FF0000; background:#FF0000;
 Calendar-05.PNG Calendar-06.PNG
 #calendar th {
height:21px;
width:21px;
font-weight:normal;
border: 1px solid #FF0000;
}		 #calendar th {
height:21px;
width:21px;
font-weight:normal;
background:#FF0000;
}

#calendar td{
height:21px;
width:21px;
font-size:10px;
line-height:1;
}
 border: 1px solid #FF0000; background:#FF0000;
 Calendar-07.PNG Calendar-08.PNG
 #calendar td{
height:21px;
width:21px;
font-size:10px;
line-height:1;
border: 1px solid #FF0000;
}		 #calendar td{
height:21px;
width:21px;
font-size:10px;
line-height:1;
background:#FF0000;
}

#calendar td.link {
background:url(/_common/skins/19/images/cal_active.gif) no-repeat center center;
font-weight:bold;
}
 border: 1px solid #FF0000; background:#FF0000;
 Calendar-09.PNG Calendar-10.PNG
 #calendar td.link {
background:url
(/_common/skins/19/images/cal_active.gif)
no-repeat center center;
font-weight:bold;
border: 1px solid #FF0000;
}		#calendar td.link {
background:url
(/_common/skins/19/images/cal_active.gif)
no-repeat center center;
font-weight:bold;
background:#FF0000;
} 
 background-color:#FF0000; 
 Calendar-11.PNG 
 #calendar td.link {
background:url
(/_common/skins/19/images/cal_active.gif)
no-repeat center center;
font-weight:bold;
background-color:#FF0000;
} 		 


 


タグ：ソネット ソネブロ So-net blog カスタマイズ カスタムスキン カレンダー
2008-11-22 23:09  nice!(7)  コメント(4) 
共通テーマ：blog

nice! ありがとう　7

コメント 4

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

おはようございます。
いつもブログ作りの参考にさせていただいてます。
あの～ちょっと質問なんですが、
カレンダーで、例えば記念日とか誕生日の日にちだけ
色をつけたりだとか変更することは出来ないのでしょうか？

ちなみに自分のサイトは『Star★Trip』です。
よろしくお願いします。


by れお (2009-02-15 09:16) 

kuu

★れおさん

指定した日だけ印をつけるのはどうなのでしょうか[ｳｰﾝ]
javascriptなどを使えばできるのかもしれませんけど、私にはわかりません[ｺﾞﾒﾝ]
by kuu (2009-02-17 11:17) 

saki_kokko

こんにちは
カレンダーの文字色は変えれますか？
教えてください[ﾄﾞｳ]
by saki_kokko (2009-05-31 13:42) 

kuu

★saki_kokkoさん

カレンダーの文字色は

#calendar td{
の中に　
color: #000000;
を入れてみてください。
リンクしない部分の色が変わります。

リンク色はこれでいいかな？
#calendar td.link {
の中に　
color: #000000;
を入れてみてください。

違ったらごめんなさいね。



by kuu (2009-06-05 11:13) 

画像が小さくなるときの対処法 ｜字体を変更する ブログトップ

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

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

　

リンクについて

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

カスタムスキンへの道

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