DIV.PROFILE
今回はプロフィール編

右の赤い枠部分です♪

f0017329_12524942.jpg


DIV.PROFILE {
WIDTH : 190PX;  
BACKGROUND : #FFF;背景色、ここでは、白
BORDER-LEFT : 1PX #F5F5F4 SOLID; 画像の左の縁取り線
BORDER-RIGHT : 1PX #BAB7AD SOLID; 画像の右の縁取り線
BORDER-BOTTOM : 1PX #BAB7AD SOLID; 画像の下の縁取り線
LINE-HEIGHT : 140%; 線の高さ
MARGIN-BOTTOM : 20PX; 下の余白
PADDING-BOTTOM : 6PX; 下の枠線からの余白
}

ちょこっと、変更してみた

f0017329_13251269.jpg


こんな感じ

ソースは

DIV.PROFILE {
WIDTH : 250PX; 190 →250
BACKGROUND : pink; 白からpinkに、変更
BORDER-LEFT : 2PX red SOLID; 太さ、色、変更
BORDER-RIGHT : 2PX blue SOLID;       太さ、色、変更
BORDER-BOTTOM : 2PX green SOLID;    太さ、色、変更
LINE-HEIGHT : 140%;                変えても、変更なし
MARGIN-BOTTOM : 20PX;             変えても、変更なし
PADDING-BOTTOM : 20PX;            6px→20px
}

上の、変更後の画像ってよくみると、上部分にセロテープの画像、貼ってあるでしょ?
それは、
cssにあるんだけど、

DIV.PROFILE_HEAD

って部分がそうなの。
ここで、セロテープぺったんの、画像貼ってあるから

WIDTH : 190PX;

これは、変えないほうが、いいね!

それか、いっそのこと、

DIV.PROFILE_HEAD
~~~

の部分を、削除で、消しちゃったら WIDTH : 190PX; を、いくら変えてもいいけどねー
[PR]
# by momo_nya | 2006-01-01 13:32 | みぎメニュー
DIV.TOPLINE
CSS編集で、少しずついろんな事やってみよう編

今回は、ここ。
赤で囲ってある場所♪


f0017329_128682.jpg


DIV.TOPLINE {
HEIGHT : 7PX;  線の太さ
BACKGROUND : #DCB3D0; 線の色
BORDER-TOP : 1PX #FFBEC0 SOLID;線の上の色
FONT-SIZE : 1PX;  文字の大きさ
}

ちょこっと、変えてみた

f0017329_12212677.jpg


DIV.TOPLINE {
HEIGHT : 20PX;                  7→20
BACKGROUND : BLUE ;            #DCB3D0→BLUE
BORDER-TOP : 2PX RED SOLID;     1PX #FFBC0 →2PX RED
FONT-SIZE : 1PX;               後で説明します。。。
}

どれも、わかりやすいように、変えたつもり。
ん?
ということは。。。。

BACKGROUND を、BACKGROUND -IMAGEに変えることもできる?
試しに、やってみたら・・・・

f0017329_1234518.jpg


できたw

ソースは。。。。

DIV.TOPLINE {
HEIGHT : 20PX;   ←太さ、好みで変更可
BACKGROUND-IMAGE : URL(http//~~イメージアカウントに登録した画像のURL);
BORDER-TOP : 1PX #FFBEC0 SOLID;  ←これ、いらなければ、削除してもよい。
FONT-SIZE : 1PT;
}


FONT-SIZE。。。なぜ、こんなとこに?
と思うでしょ?

それはね、この、ラインの中に文字を入れることができるの。
HTML編集で<DIV CLASS=TOPLINE>っていうのがあって、
<DIV CLASS=TOPLINE>ここに、文字を打つと、表示されます。
もし、入れてみたかったら、試してみて。
でも、1pxだと、小さくてみえないかも。。。
流れる文字とか入れるといいかもね。
でも、あまり動きを入れると、見てる人は、見づらいので、気をつけてね。
[PR]
# by momo_nya | 2006-01-01 12:39 | トップタイトル
いろいろタグ
リンク   <a href="★" target="_blank">ここに指定先の名前</a>
画像    <img src="★">

バナーリンク <a href="★" target="_blank"><img src="★"alt="画像の名前"></a>

文字色   <font style="color:★;">ここに文字を入れる</font>

★は必ず、抜くこと!
詳しい説明は
それぞれの
記事を参照のこと。
それぞれ辞書登録しておくと便利。
この記事は、コピペで使えます。
[PR]
# by momo_nya | 2005-12-29 01:30 | その他
画像の使い方。バナーリンクなど。。。
素材やさんや、バナーなど、使いたい画像をみつけたら。。。。

その画像の上で、右クリック
名前を付けて保存
スキン編集のマイイメージアカウントに、登録。

ここまでは、わかった?

今回は、バナーリンクのはりかた。

↓の記事で、文字で、リンクはってるよね。
これ、テキストリンク(っていうらしい)

この、文字の部分を、画像(バナー)で、やろう、って話。

ここの、ブログのメモ帳に


や、


っていうのあるでしょ?

これ、バナーって言うのね。

で、そこクリックすると、そのHPにとぶでしょ?
(↑これは、とばないよ)

それが、バナーリンク。

バナーリンクのはり方は

取り込んだバナーの画像を、スキン編集のマイイメージアカウントに、イメージ登録しておく。

画像のはりかたは、

<img src="★">

の、<、>を、半角にして★の部分に、イメージ登録したURLを、入れるだけ。
入れたら、★は、消してね。

で、
<a href="★" target="_blank"><img src="★"></a>

これ、意味わかるかな?

<a href="★" target="_blank">ここに、リンク先の画像を、はる</a>

って言う意味だよ。

もちろん、<、>は、半角だからね。

ちなみに、ももは<img src="★">
で、辞書登録してるから、
がぞう
ってうって、変換すると、<img src="★">
が、変換されます♪


追記:
貼り付けた画像に青い縁取りが?
ってときは、
border="0"
っていうのを入れると消えます。


<a href="★" target="_blank"><img"★" border="0"alt="★"></a>

target="_blank"について。
別窓で、開きますって言うこと。
なくてもかまわないけど、ないと、見てるページがそのまま
リンク先に飛ぶだけ。
target="_blank"を、入れることで、
みてるページは、そのままで新しい窓が開いて、指定のページに行きます。

alt="★"について
何の画像か、簡単に書いておくことで、何らかの事情で、画像が表示されないとき、
★の部分の文字が表示されます。
きちんと、画像が表示できてるときは、
カーソルを合わせると、何の画像か、文字が出ます。
試しに、右のりンクバナーに、カーソル合わせてみて。
(↓の、画像にカーソル合わせてみてもみえるよ。)


おさらい

+だいすきなもの+

とべた?
[PR]
# by momo_nya | 2005-12-29 01:08 | その他
BBS設置
以前BBSを、付けたいと思った。
そのときに、色々探した。

ももが、設置してるのは
EZBBS.NET
ほかには、チィママのとこの
BBS KING
あとは、
ロケットBBS
お絵かきBBS.COM

無料BBS って、Googleに入れるといっぱい出てくるよ!

設置方法は、いたって簡単。
希望のとこに行って登録してから
自分のブログ(あるいはHP)にリンクをはるだけ。
リンクのはり方は

<a href="★" target="_blank"></a>

で、<、>、の4つを、半角にして
★のことに、URLをいれて、
たとえば、

<a href="http://momo0710.exblog.jp/" target="_blank">だいすきなもの</a>

と、すると。。。。。
<、>半角にしたものが

だいすきなもの

と、なるわけ。
それを、希望のとこに入れる。
っと。

もものBBSは、
メモ帳に入れてます。

あと、ももは辞書登録してます。
りんく
ってうって
変換すると
<a href="★" target="_blank"></a>
ってなります。
もちろん、<、>は、半角でね♪
[PR]
# by momo_nya | 2005-12-29 00:38 | BBS設置
そうだ!素材を探そう!~その2~
スキン頑張ったんだけど、大変な作業だよね。
良いのなかなか見つからないし、どうしても素材屋さんからパターンを見つける事がいまだに出来ないし(-_-;)
素材見つける方法を詳しく教えて下さい<ももっち

以上、チィママroomコメント欄抜粋

確かにスキン編集、なかなか、大変だよね。
ももも、わからないこと多いし。。。。

で、さてさて、
素材は、Googleで検索して探すのが1番だと思うんだけど、
(↓の記事参照ね。)
パターンって、どんなのを、言うのかなぁ。。。?

かわいい素材ランキング
こんなとこもあるから、いろいろみてみるといいね♪

後、結構お勧めなのは、
自分の、気に入った素材を提供してるサイトの
リンク、ってとこ見てみると、結構良いのあったりするよ。
自分で探すより、よっぽど、お手軽だしね。
へ~、こんなんあったんだ、って感じ。

。。。。こんなもんなんだけど、答えになってる?
ちぃと不安。。。
[PR]
# by momo_nya | 2005-12-29 00:10 | 素材
そうだ!素材を探そう!
タイトルの画像も変えれるようになったし、
壁紙も変えれるようになったら
次は。。。。

素材、素材。。。
どこかにいいのがないかなぁ。。。。

そんなこと、思うよね。

ももも、いつも、素材探しのたびに出てるよ。

ももは、Googleで、検索して探すよ。
 
壁紙 ハートって入れて、検索。


そしたら、

ほら!

f0017329_0142111.jpg


いっぱい出てきたでしょ?(画像、ちいさくてごめん><)

そこから、探せば、いいって訳。

でね、検索の言葉って

左から、優先順位があるんだって。

だから、それを、考えて検索の言葉入れるといいかもね。

探したいもののキーワードを、スペース空けて入れてくと、より、スポット当てて
さがせるよ。

素材 アイコン 星
とかいうふうにね♪

f0017329_0555272.gif

ところで、Googleっておもしろいよね。

もものあそびば

って、入れて検索してみたら。。。。。

なかなか、楽しめた♪


素材はお借りしたらリンクしなきゃとか、色々お約束あるから、
お約束を、よく読んでね♪
[PR]
# by momo_nya | 2005-12-28 00:20 | 素材
素材を取り込もう!
ここで、
初歩的な話になります!

さて、
壁紙張り替えたり、
画像をはったり・・・・

でも、

「壁紙って、どこでどうしてもらうの???」

そう思ったことないかな?

アイコン、画像、壁紙
すべて素材やさんにあります!

ももがいつも使用してるのは、
+ほっとみるく+さん
らぶらぼさん

です。

ここから、好きな画像を、選んでそれを、自分のパソコンにDLします。
DLの仕方は、
好きな画像の上で右クリックをします。(右クリック、わかる?
ももは、わからなくて、電話で、恥かきました(^-^;)
で、
『名前を付けて背景を保存』
っていうのを、クリック。
保存先はとりあえず、
ディスクトップにでもしといて?
あとで、ファイルでも作って整理するといいよ。
それで、DLは、完了!

それを、どうやって使うかは、
取り込んだ画像を、
スキン編集のマイイメージアカウントに、イメージ登録
して、使います。

イメージ登録の仕方は、次回に。。。。
今回、画像ないなぁ。。。。
[PR]
# by momo_nya | 2005-12-20 23:51 | 素材
鍵コメント
さて、緊急リクエストにつき
いそいで、UPします!

といっても日にち過ぎてますが。。。。(汗


f0017329_2345785.jpgこれ、これ、
この鍵マーク、小さくて、非公開なのに、
お返事を、おおぴらにやっちゃうんだよねー。


内容や、名前を知られたくなくて、非公開コメントにしてるのに、
おもいっきり返事しちゃったり。。。

そこで、このマークを、大きくしちゃおう!ってことですよ。

はじめ、ももは、鍵マークのみ、青か何かで色囲みをしようとしたのですが、
できなかった。。。。。


そこで、

CSS編集画面に

DIV.COMMENT_TAIL IMG{
            height:○px;
            width:○px;
            }

っていうのを、入れるだけなの。

どこに入れようか?

わかりやすく、

DIV.COMMENT_TAIL

の下に入れます。
f0017329_03716.jpgこんなふうにね。



f0017329_23531271.jpg
これは、○のところを、30で、してみました。

おおきい??w


f0017329_23543288.jpg
これは、20pixです。

こんなもんかなー。


ただ、これ、鍵コメだけでないんだよね。
大きくなるのが。
[PR]
# by momo_nya | 2005-12-19 23:57 | コメント欄
投稿記事欄に画像を入れよう!
投稿記事欄改造計画第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 | 投稿欄