カテゴリ:投稿欄( 2 )
投稿記事欄に画像を入れよう!
投稿記事欄改造計画第2弾は、(おぉ、漢字ばかりだ!!)

ここの、記事欄のお飾りです。

さてさて、

ここを、変えるのは、

1、バックの色指定。
2、画像を入れる。
  イラストを入れるか、壁紙を入れるか。

だいたいそんなとこだと思います。

さて、行きます!

CSS編集から、

DIV.POST{
         MARGIN-BOTTOM : 50pix;
        }

というところを探します。

これは、投稿記事らんを指してますので、
そこに、
色を、入れたいなら、

DIV.POST{
        MARGIN-BOTTOM : 50pix;
        background-color : #ffffcc;
         }
というふうに赤いとこを、挿入すればいいです。

壁紙を貼りたいなら、

貼りたい画像を、素材やさんからDLしてきて、マイイメージアカウントに登録。

DIV.POST{
        MARGIN-BOTTOM : 50pix;
         background-image:url
(マイイメージに登録した希望の素材のURL);

        }
f0017329_23134581.gif試しにこんなの貼ってみました!


f0017329_23142533.jpgそしたら・・・・
こんな感じになりました!



ワンポイント画像を、指定位置に張るなら

貼りたい画像を、素材やさんからDLしてきて、マイイメージアカウントに登録。

DIV.POST{
         MARGIN-BOTTOM : 50pix;
         background-image:url
(マイイメージに登録した希望素材のurl);
        background-position: right bottom;
        background-repeat : no-repeat;

}

ちなみに、DIV.POST_BODYってのもあって、
これの違いは、範囲が違います。
DIV.POSTは、タイトル部分から、今日のところ全部です。
DIV.POST_BODYは、今日の記事のみです。
試しに、DIV.POST_BODYのところに、
さっきのいちごの壁紙を、貼ってみましょう
すると、
f0017329_2336271.jpgこんな感じ。
違いがわかるかな?
(画像小さくてごめんね)


→のサルちゃんは、DIV.POST_BODYに貼り付けてます♪

できるかな?
[PR]
by momo_nya | 2005-12-19 23:26 | 投稿欄
記事のタイトルバックを、変えてみよう♪
さて、今日からは、記事のところを、いじってみる?

まず、タイトルから行ってみようか!?


じゃあ、編集画面出して、
CSSから

DIV.POST_HEAD {
BORDER : 1PX SOLID #D0D0CC;
PADDING : 3PX 10PX 2PX;
MARGIN-BOTTOM : 15PX;
FONT-FAMILY : VERDANA;
FONT-WEIGHT : BOLD;
COLOR : #54516C;
}

これ、探し出してね!

これの意味は。。。。
DIV.POST_HEAD {
BORDER : 1PX SOLID #D0D0CC;タイトルを、囲ってある線の太さと色
PADDING : 3PX 10PX 2PX;枠の中での文字の位置指定
MARGIN-BOTTOM : 15PX;
FONT-FAMILY : VERDANA;フォントの種類を指定
FONT-WEIGHT : BOLD; フォントの太さ
COLOR : #54516C; タイトル文字の色
}

MARGIN-BOTTOM : 15PX;←文章での説明が難しいので、今回は、このまま置いときます。


さて、ここから、いろいろ遊んでみましょう♪
まずは、これ。
BORDER : 1PX SOLID #D0D0CC;タイトルのを、囲ってある線の太さと色

線の太さは、そのまま、1PX,2PX,3PX,・・・・・と変更してみて、そのたびプレビューで
見てみるといいです。

SOLD これは、線の種類。
SOLD 1本線        DOUBLE  2本線    GROOVE 凹線
DASHED ダッシュ線   DOTTED 点線

線の色、これは色見本で、好みの色に変えてもよいでしょう

FONT-FAMILY : VERDANA;フォントの種類を指定  これは、前記事で、説明したとおりです。
FONT-WEIGHT : BOLD; フォントの太さ タイトルは、太いほうがいいよね?だから、このままで。
COLOR : #54516C; ちょっと、これは、変えられないみたい。また今度、調べておくね。


ももは。。。。。

DIV.POST_HEAD {
BACKGROUND-COLOR:#FFCCCC;バックの色指定
BACKGROUND-IMAGE:URL(http:/マイイメージアカウントに登録したハートのURL/);
BACKGROUND-POSITION:LEFT CENTER;ハートの画像の位置指定
BACKGROUND-REPEAT:NO-REPEAT;ハートの画像くりかえしなし
PADDING : 3PX 25PX 2PX;タイトル文字の位置調節
MARGIN-BOTTOM : 15PX;
FONT-FAMILY : VERDANA;
FONT-WEIGHT : BOLD;
COLOR : #54516C;
}
(*枠のボーダー線は消しました)
に、変更してみたよ。
そしたら。。。。

f0017329_082927.jpg


       変更前


  

f0017329_012946.jpg
     
 
       変更後







                  

                    
[PR]
by momo_nya | 2005-12-15 23:26 | 投稿欄