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

kuu♪からのお知らせ

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

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

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

カスタムスキン作成方法・5 [Articles編.1] [最初の一歩]

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

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



【12】.articles { を変えよう [記事部分全体が変わります]

/* Articles */

.articles {
width:540px;
padding-bottom:20px;
margin-bottom:20px;
background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom;
overflow:hidden;
}

          

①記事の一番下のラインを消す
background:url(/_common/skins/19/images/dotline.gif) repeat-x left bottom; を消せばOK
   sakusei-17.PNGクリックで拡大)



②まわりを枠で囲む
■線で囲む場合は、border: 1px solid #FF35CD; を入れます。
    sakusei-18.PNG(クリックで拡大)
  【詳しくは、下記記事をご覧ください】
   *記事の外線の色と太さと種類を変えよう
   *記事の外枠を画像で作ろう
   *線の種類と記述方法



③背景に色や画像を載せる
■色を載せる場合は、background: #FF35CD; を入れます。
    sakusei-19.PNG(クリックで拡大)
  【詳しくは、下記記事をご覧ください】
   *記事部分全体に背景色や背景画像をつけよう
   *背景色の指定と画像の挿入方法



④文字色を変える
color:#000000; を入れます。
   sakusei-21.PNG(クリックで拡大)
  【参考】
   *文字色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せnew_58.gif
   *字体の変え方  



⑤余白を変える
   padding-bottom:20px;
   margin-bottom:20px;
   を変えると、記事部分の下の幅が変わります。

■文字がラインの左右にくっついて見にくいのですが、これはここで変更せず下記を参考にして変えてください
    *記事タイトルの幅を変えよう
    *記事本文の文字の位置を変えよう
    *”margin” と ”padding”の違い

cross_03.GIF


⑥”プレビュー”で確認

⑦OKなら”保存



【13】.articles-title { を変えよう
 [記事タイトル部分が変わります]

/* Articles */
.articles-title {
margin:0;
margin-bottom:15px;
padding-left:5px;
border-left:4px solid #70a000;
font-size:small;
line-height:1.2;
}

①タイトルの前のラインを消す
   sakusei-20.PNG
border-left:4px solid #70a000; を消します。
■変わりに小さな画像を入れることができます。
    *記事タイトルに小さな画像を入れてみよう
    *背景色の指定と画像の挿入方法

cross_03.GIF

②余白を変える
padding-left:5px; で左からの幅を調整します。
    □上下左右の幅を広げるには padding:5px 10px; を入れます
    【参考】*”margin” と ”padding”の違い

cross_03.GIF


③背景に色を載せる

■色を載せる場合は、background: #FF35CD; を入れます。
   sakusei-22.PNG(クリックで拡大)
  【詳しくは、下記記事をご覧ください】
   *記事タイトルの背景色を変えよう
   *背景色の指定と画像の挿入方法

cross_03.GIF

④下線をひく
■border-bottom:1px solid #FF35CD; を入れます。
   sakusei-23.PNG(クリックで拡大)
  【詳しくは、下記記事をご覧ください】
   *記事タイトルの下の線を変えよう
   *線の種類と記述方法

cross_03.GIF

⑤背景全体に画像を載せる
■記事の幅に合わせた画像を作り載せる

cross_03.GIF


⑥文字色を変える
color:#0099FF; を入れます。
   sakusei-24.PNG
  【参考】
   記事タイトルの文字色を変えよう
   *文字色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せnew_58.gif
   *字体の変え方

cross_03.GIF

⑦文字リンク色を変える
■下記タグを入れます。

.articles-title a:link { color:#009900; }
.articles-title a:visited { color:#009900; }
.articles-title a:active { color:#009900; }
.articles-title a:hover { color:#009900; }
   sakusei-25.PNG
  【参考】
   *記事タイトルの文字リンク色を変えよう
   *文字リンク色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せnew_58.gif
   *字体の変え方

cross_03.GIF

⑧”プレビュー”で確認

⑨OKなら”保存

 


nice!(8)  コメント(0) 

nice! ありがとう 8

コメント 0

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

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

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

  

         

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

×

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