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

▲TOP

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

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

Comment (0) | Trackback () | ▲TOP

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

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

e気持ち！

Comment (0) | Trackback () | ▲TOP

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

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

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

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

眠いけど　e気持ち！

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


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

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

メニューもいじっちゃえ。
メニューを右側に変えたければ、
.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

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

ブラウザの下のほうに、
('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

自分で画像を作成できれば一番良いですが、
私は他の人が作ってくれたものをお借りしています。

フリー素材、素材などでググル（検索）と沢山のサイトがでてきます。
いろいろ見てみて自分の趣味に合うものを探しましょう。

必ずご利用規約など読んで作者の方のご迷惑にならぬようにしましょう。
中にはリンクを張ることをご要望されたり、画像の加工を制限している方も
多いので、規約に同意できる場合のみ使用しましょう。

私はこれまでのデザインは殆ど同じ方のところからお借りしています。
まだまだ沢山素敵な画像を公開されています。

大体、素材の置き場で画像がみれますので気に入った画像を
ご自分のPCに取り込んでください。私はWINDOWS　XPなので
マイピクチャに画像をコピーしておきます。

たまった画像を見ながら、次のデザインのイメージを膨らませるのが
e気持ち！

Comment (0) | Trackback () | ▲TOP

あずささんからご質問を頂きましたので、これまでの試行錯誤で
分かったことを書いてみます。

Doblogはテンプレート少なさすぎ、でも他の人みたいに
自分もデザイン変えたいって思った気持ちを大切に、諦めずに
少しずつやってみましょう。

これまで作ったのは全て”シンプル”スタイルシートのチョロガエですw
シンプルはシンプル故に初心者にもいじりやすいです。

シンプルはメニュー部分、記事部分の背景が白なので、まずは背景が
白の画像を探しに行きます。

いろんなイメージしながら画像を探しているときが一番
e気持ち！　かも。

つづく

Comment (0) | Trackback () | ▲TOP

前に流行った本のグッドラックをイメージしてスタイルシート
作ってみました。

ちょうどイメージに合ったクローバーの背景を借りることができました。
それからメニューに同じ緑のハートをつけてみました。

背景が白なので、文字をクローバと同じ緑にしたかったのですが、
どの緑が映えるか、沢山の緑色を試してみました。

見やすい配色が見つかったときは
e気持ち！

Comment (0) | Trackback () | ▲TOP

ひまわりのシートを利用してオレンジストーン編を作りました。
少し変えるだけで、別のものの様にできるのはＣＳＳで
デザイン部分が独立しているおかげかな。

模様替えのたびにe気持ち！

Comment (0) | Trackback () | ▲TOP

ひまわりシリーズの黒背景版作ってみました。

黒背景に青文字にしてみました。そして青文字の中に、
赤文字やオレンジ文字を書き込むとなんだか文字が
浮き上がって見えますね。

面白いことが分かってe気持ち！

Comment (0) | Trackback () | ▲TOP

あまりいじるところもなくなってきたので、ひまわり編はこれにて完了（＾＾）
シートの種類が増えてe気持ち！

気分が変ったら、また、出てくるかもしれません。それまでしまっときます。

Comment (0) | Trackback () | ▲TOP

標準のスクロールバーをブログの雰囲気に合わせてオレンジにしてみました。

管理メニューのデザインカスタマイズより
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {

scrollbar-face-color:orange;
scrollbar-arrow-color:palegreen;
scrollbar-highlight-color:orange;
scrollbar-3dlight-color:orangered;
scrollbar-shadow-color:sienna;
scrollbar-darkshadow-color:maroon;
}

bodyの中に上記を追加します。更に夏らしくなりe気持ち！

Comment (0) | Trackback () | ▲TOP