習慣e気持ち！本日発売２

▲TOP

先週も無事終わりました。良かった良かった。
今週はどんな幸せ見つかるかな。

卵が先か鶏が先か？欲張って二つバナーつけちゃった。

6/19 Ocean's eleven VCD　で見れた
6/20 6月限定の会席料理食べてきました
6/21 中華料理食べてきました　美味しかった
6/22 たまってた洗濯ができた
6/23 お掃除できて床もピカピカ
6/24 今日はまた中華食べました
6/25 時間がかかったけど会議がまとまってよかった




e気持ち！

Comment (0) | Trackback () | ▲TOP

Doblog miniのGoldはちょっと失敗でした。
というのも会社のPCで見たらびっくり。
家で見たのと違って、かなり目にきつい色でした。
したがって早速別の色に変更します。

背景色はCornflowerblueです。

Cool な色で　e気持ち！

せっかく空けた右側の大きなスペースを
どうやって使おうかな？　楽しみ！

Comment (0) | Trackback () | ▲TOP

気分転換様に色違い版作りました。
背景色はGoldです。

だんだん暑くなるな　e気持ち！

Comment (0) | Trackback () | ▲TOP

iPod　miniのデザインに刺激されて、Doblog miniを作ってみました。（笑）

過去記事は改行位置がずれていてちょっと読みずらくてすみません。色違いも作ったら楽しいかも。

e気持ち！

Comment (0) | Trackback () | ▲TOP

寝る前にPAINTで遊んでました。
こんな感じかな?
e気持ち！

Comment (0) | Trackback () | ▲TOP

これまでシンプルのスタイルシートを基本にいじってましたが
ネタが尽きてきたwので、その他のスタイルシートをいじって見ます。

シンプル以外の人はどうすればいいんだっと思っていた方、
長らくお待たせしました。

こんどはそれ以外のテンプレいじっちゃいます。

Finnding 1 happay a dayの企画に参加し2週目に突入。
猫が可愛かったので、思わず徹夜で猫ブログにしてしまいました。

眠いけど　e気持ち！

記事ごとに、ねこ画像入れたんだけど、ＩＥでしか見れないぞ。
Firefoxやネットスケープで確認したら見えなかった。残念！
初心者ゆえ知識ここまで。他のブラウザで表示させられないw。すいません。


画像いれかえてみました。

Comment (0) | Trackback () | ▲TOP

朝なのに今日のアクセスが100を越えました。
一日で100越えることは無かったのでうれしいですね。
夜中に見に来てくれた沢山の皆様、ありがとうございます。
今週はこねこでいっちゃいましょう。

写真のねこのようにお昼ねできたら　e気持ち！

Comment (0) | Trackback () | ▲TOP

前回作成した花火編に関して。これまで、CSSの変更について書いたので
今回はちょっと視点を変えイメージについて書いてみます。

今回のテーマは夏の夜の花火（そのまんまｗ）でしたが、真っ暗な
夜空に色とりどりの花火が開いては消え、光の色が変化する様子を
表現したかったのです。

そこで背景は黒に決定。文字は黒に映える白としました。
後は背景用の花火を借りて使用します。

白以外の配色は、借りた花火の画像で使用されている、赤や黄色を
使用します。これで、画像の中で使用するカラーを数色に限定し
不必要に色数を増やさないようにします。

リンク部分を、白からマウスがのったら黄色に変えることで花火の色が
赤や黄色など変化する様子を表現したつもりです。（誰もそこまで
気にしてないってかｗ）　

一応、文字と背景色、画像の中の色などは見やすいかどうか気にして選んでます。
また目が疲れないように、色数もある程度の数に絞り込んでいます。

イメージに合う画像が見つかるまで、フリーの画像素材を探して、気に入ったものは
マイドキュメントに保存しておきます。

その他、気に入ったものがあれば次回スタイルシート作成用に取り込んでおき、
一緒に使えそうなものがあれば、それも、コピーしておいて保存しておきます。

花火編はとり合えずイメージしたものが、ほぼ自分イメージどおりにできて
e気持ち！

また見てくれたひとからもコメント頂きまして嬉しかったです。励みになります。

自分も背景を変えてみたいというコメントを頂くたびに、おそらくDoblogユーザーの
多くの方が既存のスタイルシートには飽きている。他人と同じでつまらないと
感じているのではないかと思います。

色や幅や文字の位置など、少し変えている人のBlogを発見するたびに
やってるな～ｗって　ニヤツイています。

Comment (0) | Trackback () | ▲TOP

デザインカスタマイズ　リゾート　花編はこれでおしまい。

e気持ち！

Comment (0) | Trackback () | ▲TOP

記事もいじっちゃいます。

記事のBlogと書いてある部分の下も赤い線にします。
.blog-header の中のbordeer-bottom: で2pxの実線(solid)　赤色指定します。

border-bottom : 2px solid red ;

それぞれの記事のタイトルにハート大を表示させます。
下書きに保存したファイル名を指定します。

.blog-title-titleの中で

border-bottom : 2px solid red ;
backgroundcolor: white;
background-image: url("/img/uxxxxxx/FIxxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;

上と同じで赤い下線指定。ハートの画像指定。画像のリピートなしとします。

ハートが沢山。　かわいくなって　e気持ち！

/*---------------------------------------------*/
/* 記事 */
/*---------------------------------------------*/

.blog-header {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : ;
line-height : 150% ;
font-weight : bold ;
color: #333333 ;
padding : 0px 0px 0px 0px ;
margin : 0px 10px 0px 0px ;
border-bottom : 2px solid red ;
voice-family : ""}"";
voice-family : inherit;
}


.blog-title-title {
font-weight: bold;
color: #333333 ;
font-size : ;
padding : 0px 0px 2px 30px ;
margin : 0px 0px 5px 0px ;
border-bottom : 2px solid red ;
backgroundcolor: white;
background-image: url("/img/uxxxxxx/FIxxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;

}

Comment (0) | Trackback () | ▲TOP

カレンダーもいじっちゃおう。
カレンダーのなかで、記事を登録した日に下線がつきますね。
これはカレンダー.calender-focus{の状態なので、この時に
背景に小さなハートを表示させます。
background-image : url("/img/uxxxxx/FIxxxxxxx_xE.gif");
background-position: center;
background-repeat: no-repeat;
前回下書き記事で登録したときに控えた数字をxxxxxに記入してください。


/*---------------------------------------------*/
/* カレンダー */
/*---------------------------------------------*/
.calender {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : ;
line-height : 150% ;
}

.calender-focus {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : ;
font-weight : normal ;
line-height : 150% ;
color : #0066cc ;
background-image : url("/img/uxxxxx/FIxxxxxxx_xE.gif");
background-position: center;
background-repeat: no-repeat;

}

かわいくなって　e気持ち！

Comment (0) | Trackback () | ▲TOP

とても素敵な企画発見しました。
e気持ち！

6/5 ずっと見たかった世界の中心で愛を叫ぶVCD見れました。
6/6 スターウォーズ6作全て見終え、謎は全て解けた。
6/7 スタイルシートデザイン変更しちゃった。
6/8 マチルダがアミダラになった！綺麗だな。
6/9 お昼に食べたビビンバ丼美味しかった！
6/10 久しぶりに会社の人たちと飲みに行きました。
6/11 今日は一日家でまったりできる。

Comment (0) | Trackback () | ▲TOP

メニューもいじっちゃえ。
メニューを右側に変えたければ、
.menu {
width : 180px ;
float : left ;
background-color : ;
}
でfloat: right ;にしてみて。

メニュー項目の下に線を引くのは.menu-headerの中で
border-bottom:のところを

2px solid red;として　2pxの太さの実線（solid)　赤色を指定します。

前回下書き登録したハート大を表示させてみます。

同じく、.menu-header の中で
background-color: white;
background-image: url("/img/uxxxxx/FIxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;

background-image:url(" ");でハート大のファイル名を指定します。
ハートが一つ表示されるようbackground-repeat:をno-repeatに指定します。

このままだとメニュー項目の表示がハートに重なってしまいます。
そこで
.menu-header のなかのpaddingをもとの10pxから30pxに変更して右にずらします。

padding : 0px 0px 0px 30px ;

paddingは上、右、下、左の順に指定できますので右に文字をずらす場合、
左側のｐｘ数を多めに指定します。つまりもとの10pxから
20px文左に文字を移動させます。

ちなみに間違って一行下のマージンを

margin : 0px 0px 0px 30px ;
にしてしまうと、メニューの文字だけでなく、ハートや下線まで
全て一緒に右にずれてしまいます。

paddingとかmarginってなんだ？て思いますが、これは、また今度
説明します。

メニューかわいくなって　e気持ち！

/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
width : 180px ;
float : left ;
background-color : ;
}

.menu-header {
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-size : ;
font-weight : bold ;
line-height : 125% ;
color : #333333;
padding : 0px 0px 0px 30px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px solid red ;
background-color: white;
background-image: url("/img/uxxxxx/FIxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;
voice-family : ""}"";
voice-family : inherit;
}

.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 150% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 20px 10px ;
word-break : break-all ;
}

.menu-contents p {
margin : 0px 0px 3px 0px ;
}

.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}

.menu input {
width : ;
}

.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}

Comment (0) | Trackback () | ▲TOP

ページタイトルの部分も全体にあわせて色かえましょう。
ブログの名前が中央に表示されるよう
.mydoblog-header {
text-align: center ;
　background-color : lightpink ;

text-alineでcenterを指定。背景色をlightpinkとしました。（お好みで変えてください）

.mydoblog-header-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size: 180% ;
font-weight : bold ;
line-height : ;
color : white ;

ブログの名前が目立つよう文字サイズを180%設定。（数字が大きいと字が大きくなる）
目立つようにBold文字にしました。文字の色はピンクの中に白抜きとなるよう
color: white ;とします。（お好みで変えてください）



/*---------------------------------------------*/
/* ページタイトル */
/*---------------------------------------------*/
.mydoblog-header {
text-align: center ;
background-color : lightpink ;
width : ;
height : ;
padding : 25px 10px 0px 10px ;
margin : 0px 0px 25px 0px ;
border-bottom : 2px dotted #999999 ;
voice-family : ""}"";
voice-family : inherit;
}

.mydoblog-header-text {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size: 180% ;
font-weight : bold ;
line-height : ;
color : white ;
}

.mydoblog-header img {
vartical-align : text-bottom ;
margin : 0px 0px 0px 0px ;
}

Comment (0) | Trackback () | ▲TOP

一番上の灰色の部分を変更します。
Doblogヘッダーの中に以下の行を追加します。

.mydoblog-position table {
background-image :none ;
}

灰色が無くなりました。メニューのような文字の部分を

.mydoblog-position A.portalbar:

link
active
visited

それぞれcolor : lightpink ;にします。
マウスが乗ったとき

hoverの部分で
Color: red ;で赤くします。ついでに背景が変な色にならによう
Background-color: white ;指定しておきましょう。

イメチェンできて　e気持ち！

/*---------------------------------------------*/
/* Doblogヘッダー */
/*---------------------------------------------*/
.mydoblog-position form table {
color : ;
width : 760px ;
padding : ;
border : ;
background-image : url ;
/*("/image/mypage/mypage_bg_header.gif") ;*/
/* background-position : right ;*/
}
.mydoblog-position table {
background-image :none ;
}

.mydoblog-position form td {
padding-left : 10px ;
text-align : left ;
}

.mydoblog-position A.portalbar:link {
color : lightpink ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:active {
color : lightpink ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:visited {
color : lightpink ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:hover {
　background-color:white;
color: red ;
ｔext-decoration : none ;
}

Comment (0) | Trackback () | ▲TOP

リンク部にマウスのせた時に赤色に変化するように設定しました。
CSSファイルでリンクの部分を探して

a:hover {
color : red ;
}

のように、hoverの所をred ; にするだけです。
好きな色に設定して下さい。（赤いお花に合わせてみました。）


/*---------------------------------------------*/
/* リンク */
/*---------------------------------------------*/
a:link {
color : #003366 ;
}
a:active {
color : #003366 ;
}
a:visited {
color : #003366 ;
}
a:hover {
color : red ;
}

.blog-scene img {
border : solid 1px #FF0000 ;
}

色が変って e気持ち！

Comment (0) | Trackback () | ▲TOP

画像の上にマウスをのせてみましょう。

ブラウザの下のほうに、
('http://www.doblog.com/img/uxxxxx/FIxxxxxxx_0E.jpg');
みたいなのでてきますね。

後で使うのでこれをメモしておいてください。
3つの画像を使用するので、

('http://www.doblog.com/img/uxxxxx/FIxxxxxxx_0E.jpg');
('http://www.doblog.com/img/uxxxxx/FIxxxxxxx_1E.gif');
('http://www.doblog.com/img/uxxxxx/FIxxxxxxx_2E.gif');

ですね。
（xxxxxxの部分は数字が入っています。）

上手くいくか、どきどきして　e気持ち！

Comment (0) | Trackback () | ▲TOP

今回のイメージはリゾート地で見るお花です。（まんまじゃないか）

Doblog記事作成の画面で、テキスト入力の右側のイメージのところでBrowseをクリックします。

マイピクチャからお目当ての画像を指定します。イメージが取り込まれましたね。

次に同じ画面で使用する小さな画像を取り込みます。

上のほうでシーン１の隣にある追加をクリックします。

シーン２が開いたらテキストのところに

ハート　ピンク　大

などと書いておきます。大きい方のハートの画像を取り込みます。

更にシーン３を開き

ハート　ピンク　小

などと書いて小さいほうのハートの画像を取り込みます。

人には見せる必要が無いので、通常は下書き保存するを選びます。
準備ができて e気持ち！



ハート　ピンク　大


ハート　ピンク　小

Comment (0) | Trackback () | ▲TOP

これまでに使用させていただいた素材の多くをお借りしたのが
下記のお二人のところです。


REI様のBevel
http://homepage3.nifty.com/bevel/

はな様のVega
http://hanasama-web.hp.infoseek.co.jp/

気に入った画像は必ず、マウスをのせて右クリックで名前を付けて
画像を保存して下さい。私はマイピクチャに貯め込んでいます。

Doblogでアップするために、.jpg か .gifにしておきましょう。

使用しやすいので白背景、黒背景のものを良くお借りしています。
また、ブログの左側の隙間に画像を見せることを前提として
横長の画像を借りてきます。

素敵な画像がいっぱい
e気持ち！

Comment (0) | Trackback () | ▲TOP

今日は海見てきました。
e気持ち！

Comment (0) | Trackback () | ▲TOP