kuu♪からのお知らせ

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

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

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

カスタムスキンの始め方

カスタムスキンの始め方です。

1.）管理ページのデザイン　→　スキン一覧　→　スキン選択　でお好みのスキンを選びます。
　　（好きなスキンにカーソルを合わせると「スキン選択」というのが出ます。）

　　私のおすすめは「ベーシック」の中のスキンです。（私はたいてい「白」を使います。）

 

2.）スキン選択　をすると下のような画面がでます。
　　自分の作りたいものを選んで「追加」をクリックします。

 

3.）下の画面の「白」というところをクリックすると、カスタムスキンの画面が出ます。

 

4.）この画面で編集作業を行ないます。
　　プレビューで少しずつ確認しながら作業をするといいですよ。
　　そして、こまめに保存もしたほうがいいです。

 

＊「 トップページ」「記事ページ」「月別ページ」「カテゴリー別ページ」を別々に編集すると、各ページごとに違うスキンができます。
　各ページにはタグが入ってないので、とりあえず全部コピーして貼り付けてくださいね。

Ctrl+A〔全部選択〕
Ctrl+Z〔ひとつ戻る〕
Ctrl+X〔切取〕
Ctrl+C〔コピー〕
Ctrl+V〔貼付〕　　
を覚えると編集作業が早いですよ。　

So-net blogの使い方[CSS編集]もあわせてご覧ください。

 

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

タグ：So-netBlog カスタマイズ ソネブロ カスタムスキン ソネットブログ カスタムスキンの始め方

カスタムスキン作成方法・1 [バナー編]

それでは、実際にスキンを作成してみましょう。

・今回は、[ベーシックの白]の[記事幅　標準][サイドバー幅　標準]を使用します。
　もちろん他のタイプでも大丈夫です。
　でも、カスタマイズの途中で自分で変更していけるので、[ベーシックの白]がいいと思います。
・開き方は、【カスタムスキンの始め方】をご覧ください。

＊カスタムスキンを作るにはタブブラウザを使うと作りやすいです。
　私は[Grani]というのをＤＬして使っています。
　いろいろなブラウザを使いましたが、これが一番使いやすいです。

---

【1】バナーを載せよう

[準備.1] 自分の作っているカスタムスキンの横幅を知りましょう。 横幅はここを見るとわかります。 width :770px;　が全体の横幅になります。

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; }

[準備.2]
バナーを作成しましょう。
自分のカスタムスキンの横幅に合わせたバナーを準備します。

＊今回、見本で使用するバナーは　横幅770ｐｘ　高さ200ｐｘです。（クリックで拡大）
　　

[作成]

①バナーを挿入

/*-----Header-----*/ #banner { height:140px; margin-bottom:20px; clear:both; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

■height:140px;　→　height:200px;　（自分の使うバナーの高さに変える）
■画像を挿入
　　＊挿入方法は【背景色の指定と画像の挿入方法】をご覧ください。
　　＊もし画像が小さく入ってしまうときは【画像が小さくなるときの対処法】をご覧ください。

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; margin-bottom:20px; clear:both; }

（クリックで拡大）

②”プレビュー”で確認

③ＯＫなら”保存”

参考：【オリジナルバナーを作ろう】【バナーの位置を変えよう】

---

【2】バナーの文字位置・フォント・文字サイズ・文字色を変えよう

①文字位置・フォント・文字サイズ・文字色の変更

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　 margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 40px 0 8px 0; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

[ブログタイトルの設定]
■文字位置
　　padding: 40px 0 8px 0;　（上、右、下、左）を変更
　　　　　・40pxを変えるとタイトルの上からの位置が変わる
　　　　　・8pxを変えるとタイトルとサブタイトルの間が広がる
　　　　　・0を変えるとタイトルの左からの位置が変わる
　　　　　　　　　　（変える時は必ず　pxを付ける　〔例. 10px〕）
　　　　　・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください。

■フォントの変更
　　font-family: Helvetica,Arial,sans-serif;　を変えると字体が変わります。
　　　　・フォントの変更については【字体を変更する】をご覧ください。

■文字サイズ　　　
　　font-size:large;　を変えると文字のサイズが変わる
　　　　・文字サイズについては【文字サイズを変更する】をご覧ください。

■文字色
　　color:#444444;　を変えると文字色が変わります。
　　　　・文字色については【ブログタイトル＆サブタイトルの字の色を変えよう】をご覧ください。

　　　　　　

[ブログサブタイトルの設定]
■文字位置
　　　padding-left:20px;　を付け加えるとサブタイトルの左からの位置が変わる
　　　　・数字はご自分で変更してください
　　　　・すでにある場合は、数値の変更
　　　　・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください。

■文字色
　　　color:#FFFFFF;　を付け加えるとサブタイトルの文字色が変わる
　　　　・#FFFFFF;はご自分の好きな色に変更してください
　　　　・文字色については【ブログタイトル＆サブタイトルの字の色を変えよう】をご覧ください。

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat;　 margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 60px 0 20px 20px; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; padding-left:20px; color:#FFFFFF; }    （クリックで拡大） padding: 60px 0 20px 20px; padding-left:20px; に変更してみました。

②”プレビュー”で確認

③ＯＫなら”保存”

〔参考〕
　＊文字色の変え方
　＊ 文字のサイズの変え方
　＊ 文字の右寄せ・左寄せ・真ん中寄せ
　＊ 字体の変え方
　＊ "margin"と"padding"の違い

タグ：ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ 作成方法 バナーの変更 バナーの文字位置・フォント・文字サイズ・文字色

カスタムスキン作成方法・2 [背景編]

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

□カスタムスキンの始め方
□カスタムスキン作成方法・1　[バナー編]　
もご覧ください。

---

【3】背景を変えよう（全体の背景）

#ffffff;　を変更します。

/*-----Common-----*/   body { background: #ffffff; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

　　　☆色の指定
　　　　　#ffffff　というのは色の指定です。好きな色の色番号に変えましょう。
　　　　　　その時、「#FF0000」というふうに、＃を必ず入れましょう。
　　　　　　私は色を選ぶのは『HTML　色一覧』もしくは『HTMLCOLOR』をＤＬして使っています。
　　　　　　『HTMLCOLOR』はパソコン上にある好きな色番号を教えてくれるのでスキン作成にはかかせません。

[見本]
①#000000;（黒）　を入れてみます。（お好きな色を入れてみてくださいね）

/*-----Common-----*/   body { background: #000000; }

（クリックで拡大）

②”プレビュー”で確認

③気に入った色が決まったら”保存”

　【参考】
　　＊ 背景色を変えよう
　　＊ 背景に画像をのせてみよう

---

【4】内側の背景色を変えよう（しなくてもＯＫです）

①バナーの下（記事、サイドバー、記事・サイドバーの周り）部分の色を変え、余白を作る。

/*-----Content-----*/ 元々は記述がなく、何も入っていません

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

/*-----Content-----*/　内に背景色を指定します。元々何も記述がないので下記タグをすべてコピーして貼り付けます。

/*-----Content-----*/ #content { background: #FFFFFF; padding: 20px 10px 0px 10px; } ■#FFFFFF　はお好きな色に変えてください ■padding: 20px 10px 0px 10px;　 の数字は、〔上、右、下、左〕の余白が変わります。 ご自分で調整してください。

（クリックで拡大）

②バナーと①で色をつけた部分の間を詰める

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; margin-bottom:20px; clear:both; }

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

margin-bottom:20px;　→　margin-bottom:0px;

/*-----Header-----*/ #banner { height:200px; background:url("/_images/blog/_aaa/bbb/ccccc.PNG") no-repeat; margin-bottom:0px; clear:both; } （クリックで拡大）

③”プレビュー”で確認

④気に入った色が決まったら”保存”

---

【5】外枠に線を入れよう（しなくてもＯＫです）

＊これをする場合は、【4】内側の背景を変えよう　をしてください。
　その時に、背景色の指定はしなくてもいいです。

①赤い境界線を入れてみます

/*-----Common-----*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

border: 1px solid #FF0000;　を付け加えます
＊線の太さ、種類、色は【線の種類と記述方法】を参考にご自分で変えてください。
＊必要な部分のみ線を入れてもＯＫです。

/*-----Common-----*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; border: 1px solid #FF0000; }

（クリックで拡大）

②”プレビュー”で確認

③気に入った色が決まったら”保存”

 

 

タグ：ソネット ソネブロ ソネットブログ So-net blog カスタムスキン カスタマイズ 作成方法 背景色 内側背景色 外枠の線

カスタムスキン作成方法・3 [文字色編]

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

□カスタムスキンの始め方
□カスタムスキン作成方法・1　[バナー編]　
□カスタムスキン作成方法・2　[背景編]

もご覧ください。

---

 
【6】文字色を変えよう（リンクしない部分）

①全体の文字色を変える

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; border: 1px solid #FF0000; }

（クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

color:#444444;　→　color:#0000FF;（青）　に変更してみます。

/*-----Common-----*/  #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#0000FF; border: 1px solid #FF0000; }

（クリックで拡大）

②個別設定の文字色を変える
■スキンによっては最初の設定で、全体の文字色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は2つあります。お好きな方を選んでください。
　　　Ａ.　個別タグを消す
　　　Ｂ.　個別タグを書き直す

③”プレビュー”で確認

④気に入った色が決まったら”保存”

 

---

【7】文字色を変えよう（リンクする部分）

①全体の文字リンク色を変える

/*-----Common-----*/  a:link   { text-decoration:none; color:　#777777; } a:visited  { text-decoration:none; color:　#777777; } a:active  { text-decoration:none; color:　#777777; } a:hover   { text-decoration:underline; color:　#70a000; } （クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

■color:#777777;　→　color: #FF0000;（赤）に変更してみます。

/*-----Common-----*/  a:link   { text-decoration:none; color:　color: #FF0000; } a:visited  { text-decoration:none; color: #FF0000; } a:active  { text-decoration:none; color: #FF0000; } a:hover   { text-decoration:underline; color:　#70a000; } （クリックで拡大）

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

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

②個別設定の文字リンク色を変える
■スキンによっては最初の設定で、全体の文字リンク色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は2つあります。お好きな方を選んでください。
　　　Ａ.　個別タグを消す
　　　Ｂ.　個別タグを書き直す

③”プレビュー”で確認

④気に入った色が決まったら”保存”

 

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ 作成方法 文字色 リンク文字色

カスタムスキン作成方法・4 [Links編]

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

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

---

 
【8】記事上下の矢印を変えよう

①上下の画像を好きなものに変えます

/* Links */  .previousLink{ padding-left:10px; background:url(/_common/skins/19/images/arrowL_small.gif) no-repeat left center; } .nextLink{ padding-right:10px; background:url(/_common/skins/19/images/arrowR_small.gif) no-repeat right center; } .archive-links{ float:right; padding-left:9px; background:url(/_common/skins/19/images/arrowT_small.gif) no-repeat left center; font-size:x-small; } （クリックで拡大）

　　　　　　　　　　　　　↓　　　↓　　　↓　　　↓　　　↓　　　↓

（クリックで拡大）

　　　に変更しました。

□それぞれの場所に、お好きな画像を入れましょう。
□矢印と文字の隙間は、それぞれ　padding　で調整してください。
□私の使った矢印画像は【カスタムスキンのためのミニミニ素材】に置いてあります。

[ひとつ前]
.previousLink{
padding-left:10px;
background:url(/_common/skins/19/images/arrowL_small.gif) no-repeat left center;
}

[ひとつ後ろ]　
.nextLink{
padding-right:10px;
background:url(/_common/skins/19/images/arrowR_small.gif) no-repeat right center;
}

[ブログトップ]
.archive-links{
float:right;
padding-left:9px;
background:url(/_common/skins/19/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
}


②”プレビュー”で確認

③ＯＫなら”保存”

【参考】
＊記事上下の矢印画像を変えよう

---

【9】記事の上部分を変えよう

/* Links */

.archive-title{ padding-bottom:5px; margin-bottom:12px; background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom; color:#cccccc; }

①background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom;
　を削除すると、前の1件の下の線が消えます。
　　＊これを消して、自分の好きな画像を入れてもいいでしょう。
　　　

②color:#cccccc;　を変更すると、リンクしない部分の文字の色が変わります。
　　　
③以下のタグを挿入すればオリジナルなものができます。
　　ご自分でアレンジしてみてください。
　　□border:1px solid #FF0000;
　　□border-bottom: #FF0000 solid 1px;
　　□background: #FF0000;

④数字を変えることによって余白が変わります。
　　　padding-bottom:5px;
　　　margin-bottom:12px;

---

【10】記事の下部分を変えよう

/* Links */

.archive-bottom{ color:#cccccc; }

【9】を参考に自分でアレンジしてみてください。

---

【11】[ひとつ前・ひとつ後・ブログトップ]の文字リンク色を変えよう

下記タグを挿入すると文字リンク色が変わります。

[ひとつ前]

/* Links */

.previousLink a:link   { text-decoration:none; color:#FFA4A4; } .previousLink a:visited  { text-decoration:none; color:#FFA4A4; } .previousLink a:active  { text-decoration:none; color:#FFA4A4; } .previousLink a:hover   { text-decoration:underline; color:#70a000; }

 

[ひとつ後ろ]

/* Links */

.nextLink a:link   { text-decoration:none; color:#FFA4A4; } .nextLink a:visited  { text-decoration:none; color:#FFA4A4; } .nextLink a:active  { text-decoration:none; color:#FFA4A4; } .nextLink a:hover   { text-decoration:underline; color:#70a000; }

 

[ブログトップ]

/* Links */

.archive-links a:link   { text-decoration:none; color:#FFA4A4; } .archive-links a:visited  { text-decoration:none; color:#FFA4A4; } .archive-links a:active  { text-decoration:none; color:#FFA4A4; } .archive-links a:hover   { text-decoration:underline; color:#70a000; }

タグ：ソネブロ ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ links 記事上下の矢印

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

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