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

kuu♪からのお知らせ

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

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

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

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

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

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



【14】.articles-body { を変えよう
 [記事本文が変わります]

/* Articles */
.articles-body {
line-height:1.6;
margin-bottom:20px;
}


①余白を変える
A. 上下左右の幅を広げるには padding:5px 10px; を入れます
    【参考】*”margin” と ”padding”の違い

   sakusei-26.PNG

B. margin-bottom:20px; を変えると記事の一番下の幅が変わります。

cross_03.GIF


②背景を変える
■全体に色を載せる・画像を載せる場合は、【12】.articles {の④ で変えましょう。
 ここで変えると余白部分などに色が入らない場合があります。
■ワンポイント画像などは載せてもOKだと思います。
  【参考】
   *背景色の指定と画像の挿入方法

cross_03.GIF


③文字色を変える
color:#FF0000; を入れます。
   sakusei-27.PNG
  【参考】
   *記事本文の文字色を変えよう
   *文字色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せ
   *字体の変え方

cross_03.GIF

④文字リンク色を変える
■下記タグが入っているので、お好きな色に変えます。

.articles-body a:link   { text-decoration: none; color:#70A000; }
.articles-body a:visited  { text-decoration: none; color:#70A000; }
.articles-body a:active  { text-decoration: none; color:#70A000; }
.articles-body a:hover   { text-decoration: underline; color:#70A000; }
   
  【参考】
   *記事本文の文字リンク色を変えよう
   *文字リンク色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せ
   *字体の変え方

cross_03.GIF

⑤記事中の広告を透過しよう。
■背景に色や画像が入っている場合、広告の透過を設定しておくと便利です
   *記事中の広告を透過しよう

cross_03.GIF

⑧”プレビュー”で確認

⑨OKなら”保存



【15】.posted{ を変えよう [記事本文の下部分が変わります]

/* Articles */
.posted{
padding-top: 10px;
font-size:x-small;
color:#999999;
}


①余白を変える

   sakusei-28.PNG

A. padding-top: 10px; を変えると上からの幅が変わります。
 
    *padding-left: 10px; を付け加えると左からの幅が変わります。
         padding-bottom: 10px; 
を付け加えると下からの幅が変わります。


  【参考】
   *記事の一番下の日付の位置を変えよう
   *”margin” と ”padding”の違い

cross_03.GIF


③文字色を変える

■color:#999999; → color:#000000; に変えます。

   sakusei-29.PNG
  【参考】
   *記事の一番下の日付の文字色を変えよう
   *文字色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せ
   *字体の変え方

cross_03.GIF

④文字リンク色を変える
■下記タグを挿入し、お好きな色に変えます。

.posted a:link { color:#0000FF; }
.posted a:visited { color:#0000FF; }
.posted a:active { color:#0000FF; }
.posted a:hover { color:#0000FF; }
   
  【参考】
   *文字リンク色の変え方 
   *文字のサイズの変え方
   *文字の右寄せ・左寄せ・真ん中寄せ
   *字体の変え方

cross_03.GIF

⑤記事の一番下に線を入れる
■線を入れてもいいし、画像を入れてもいいでしょう。
   *記事の一番下の線の色を変えよう

cross_03.GIF

⑧”プレビュー”で確認

⑨OKなら”保存

 


nice!(6)  コメント(4) 
共通テーマ:blog

nice! ありがとう 6

コメント 4

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

100記事、おめでとうございます。

言語がよくわからない私でも、丁寧な説明に感謝しております。
楽しみながら基礎知識から読み始めています。

また時間をつくり寄りたいと思います。
by gutsism (2008-12-23 22:05) 

kuu♪

★gutsismさん

ありがとうございます。
100記事も、よく書いたものですね(笑)

カスタムスキンのご参考になれば幸いです。

by kuu♪ (2008-12-24 13:43) 

La_vbl_kok

いつも有難うございます☆
こちらの記事を発見しトライしています(;^_^A
widthを500~485にしたら少し余白が出来ました[ニコッ]
又色々やってみます。
by La_vbl_kok (2009-07-18 16:42) 

kuu♪

★La_vbl_kokさん

がんばってくださいね~♪
by kuu♪ (2009-07-29 10:54) 

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

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

  

         

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

×

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