So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。
最初の一歩 ブログトップ
前の5件 | -

カスタムスキンの始め方 [最初の一歩]

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

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

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

カスタムスキン

 

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

カスタムスキン

 

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

カスタムスキン

 

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

カスタムスキン

 

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

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

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

 

ソネットブログ(so-netblog):カスタムスキンへの道【目次】へ


nice!(25)  コメント(12) 
共通テーマ:blog

カスタムスキン作成方法・1 [バナー編] [最初の一歩]

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

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

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



【1】バナーを載せよう

[準備.1]
自分の作っているカスタムスキンの横幅を知りましょう。
横幅はここを見るとわかります。
width :770px; が全体の横幅になります。
/*-----Common-----*/ 
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444444;
}

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

*今回、見本で使用するバナーは 横幅770px 高さ200pxです。(クリックで拡大)
  sakusei-03.PNG

[作成]

①バナーを挿入

/*-----Header-----*/
#banner {
height:140px;
margin-bottom:20px;
clear:both;
}
 
sakusei-01.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

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

②”プレビュー”で確認

③OKなら”保存

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



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

 
 sakusei-04.PNG(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

cross_03.GIF

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

cross_03.GIF

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

cross_03.GIF

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

cross_03.GIF

cross_03.GIF
      

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

cross_03.GIF

■文字色
   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;
}


 sakusei-05.PNG
 (クリックで拡大)
padding: 60px 0 20px 20px;
padding-left:20px;
に変更してみました。


②”プレビュー”で確認

③OKなら”保存

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


nice!(23)  コメント(8) 
共通テーマ:blog

カスタムスキン作成方法・2 [背景編] [最初の一歩]

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

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



【3】背景を変えよう(全体の背景)

#ffffff; を変更します。

/*-----Common-----*/ 
 body {
background: #ffffff;
}
 
sakusei-05.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

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

/*-----Common-----*/ 
 body {
background: #000000;
}
sakusei-06.PNG
(クリックで拡大)

②”プレビュー”で確認

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

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



【4】内側の背景色を変えよう
(しなくてもOKです)

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

/*-----Content-----*/
元々は記述がなく、何も入っていません
sakusei-06.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

/*-----Content-----*/
#content {
background: #FFFFFF;
padding: 20px 10px 0px 10px;
}


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

sakusei-07.PNG
(クリックで拡大)



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

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


sakusei-08.PNG

             ↓   ↓   ↓   ↓   ↓   ↓

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


sakusei-09.PNG
(クリックで拡大)

③”プレビュー”で確認

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



【5】外枠に線を入れよう
(しなくてもOKです)

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

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

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


 

sakusei-09.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

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


 

sakusei-10.PNG
(クリックで拡大)

②”プレビュー”で確認

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

 

 


nice!(8)  コメント(2) 
共通テーマ: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;
}
sakusei-10.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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

/*-----Common-----*/ 
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#0000FF;
border: 1px solid #FF0000;
}
sakusei-11.PNG
(クリックで拡大)

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

③”プレビュー”で確認

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

 



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


sakusei-11.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

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


sakusei-12.PNG
(クリックで拡大)

・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つあります。お好きな方を選んでください。
   A. 個別タグを消す
   B. 個別タグを書き直す

③”プレビュー”で確認

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

 
nice!(3)  コメント(2) 
共通テーマ: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;
}


sakusei-13.PNG
(クリックで拡大)

             ↓   ↓   ↓   ↓   ↓   ↓

sakusei-14.PNG
(クリックで拡大)

soneburo-yajirusi-kuro-hidari.GIF soneburo-yajirusi-kuro-migi.gif soneburo-yajirusi-kuro-ue.GIF に変更しました。

□それぞれの場所に、お好きな画像を入れましょう。
□矢印と文字の隙間は、それぞれ 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;
}


②”プレビュー”で確認

③OKなら”保存

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



【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件の下の線が消えます。
  *これを消して、自分の好きな画像を入れてもいいでしょう。
   sakusei-15.PNG

color:#cccccc; を変更すると、リンクしない部分の文字の色が変わります。
   sakusei-16.PNG
③以下のタグを挿入すればオリジナルなものができます。
  ご自分でアレンジしてみてください。
  □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; }


nice!(4)  コメント(2) 
共通テーマ:blog
前の5件 | - 最初の一歩 ブログトップ

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

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

  

         

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

×

この広告は1年以上新しい記事の更新がないブログに表示されております。