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

▲TOP

前にタイで撮影した自分の家の猫の写真をブログのタイトルの背景写真にしてみました。ブログの幅に合わせ、画像の幅を760px にトリミングしました。

e気持ち！やなゃ～

Comment (0) | Trackback () | ▲TOP

blogmaterial CATTOWN
リンク張りました

Comment (0) | Trackback () | ▲TOP

デザインカスタマイズ　猫ちゃんよりのお便り編に
色違いバージョンを作成中。できたら変更します。

楽しみだにゃん　e気持ち！

Comment (0) | Trackback () | ▲TOP

ねこちゃんよりお便りもらいました。
元気そうで何よりです。 e気持ち！

今度のは、そんなイメージで作ってみました。

Comment (0) | Trackback () | ▲TOP

猫ちゃんよりのお便り　水色に続いて桃色も作ってみました。
色替えと画像の入れ替えだけなので30分ほどで完成しました。

e気持ち！

Comment (0) | Trackback () | ▲TOP

素材の画像がだいぶたまってきました。その中から2-3点
使いたいものを選びましたので、貼り付けちゃいます。
先ず、右下のねこちゃん画像ですが、ここに貼り付けるには、
CSSファイルの中の全体を以下のようにしました。


/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {
color : #000000 ;
background-color : ffffff ;
background-image : url("/img/u45763/FI1490564_2E.gif") ;
background-repeat: no-repeat ;
background-attachment :fixed ;
background-position: 100% 100% ;

}

background-position :は以下のようにしても良いようですが

background-position : right bottom ;

私は後で画像の位置を動かすのに便利なので100% 100%の様にしました。
100%のところの数字をそれぞれ小さくすると画像が左と上に動きますよ。

ちなみに画像ファイル名は上記のまま使用しないで下さい。
そのままでねこちゃん画像はでてくると思いますが、私が画像を入れ替えると
皆様のブログで画像が入れ替わってしまうはず。（笑）

陽だまりのテンプレを選んだのはメニューが右側にあって、スクロールして
メニューが終わった部分に広い余白が出現し、ねこちゃんが見やすいからです。

実はそのほかのテンプレでメニューが左側のものでも、メニューを
右に移動することは簡単です。今度説明しますね。

ただ、このままですとメニューがあるところは、ねこちゃんがかくれて見えません。
メニューをスケスケにする方法は、今度説明します。（ひっぱるw）

これでだいぶイメチェンできるよ。　e気持ち！

Comment (0) | Trackback () | ▲TOP

せっかく貼り付けたねこちゃんが、メニューに隠れて見えないので
メニューを以下のようにしました。
background-color : transparent ;
にしました。
background-color : ;
でもいいみたいです。


/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
position : absolute ;
left : 600px ;
width : 176px ;
background-color : transparent ;
border-color : #FF9966 ;
border-style : solid ;
border-top-width : 1px ;
border-right-width : 1px ;
border-bottom-width : 1px ;
border-left-width : 1px ;
}

ねこちゃんが見えるようになった。　e気持ち！

Comment (0) | Trackback () | ▲TOP

シンプルなスタイルシートにも、ねこちゃん登場です。
メニューとタイトルに画像貼り付けました。

メニューのところに貼り付けたのは、バナー台用のものです。
文字入れる部分にメニューが表示されるよう変更しました。

ちょっと画像の横幅が大きかったので、画像に合わせて
メニューの横幅広げたら画面崩れました！　（**）
（記事がメニューの終わったところの下のほうに
飛んでしまいました！）

メニューの幅を広げた分、記事の幅を狭めて、全体の横幅を
もとのサイズ内に収めることで、記事が元の位置に戻りました。
（滝汗）

何せ素人なものなので...。でも数々の失敗により学ぶことができました。
e気持ち！

Firefoxとネットスケープでも確認しましたが大丈夫そうなので更新しました。
今回はプレビューを50回もしちゃいました。（笑）

Comment (0) | Trackback () | ▲TOP

今日はブログの幅について分かったこと書いて見ます。
シンプルのデザインはCSSファイルを開くと、
全体のところのWidthが760pxになっています。
タイトルやヘッダーなどの部分も760pxですね。
今回メニューに貼り付けるバナー台が幅200pxだったので
画像をフルに表示させるため、メニュー部分のWidthを
200pxに変更しました。すると画像が崩れました。

CSSファイルを良く見ていくと記事の部分のWidthを変更していないため、
メニューのWidth + 記事のWidthが全体のWidthの数値を超えていることが
分かりました。これが、記事がメニューの下に飛んだ原因の様です。

解決方法を考えましたが、
①全体の幅を広げる
②記事の幅を狭めてメニュー幅＋記事の幅を全体の幅760px以内に収める。

①ですとタイトルに画像を入れたりする場合に画像の幅なども変更しなければ
ならなそうなので、②に挑戦しました。

プレビューの結果はOKでした。但しメニュー幅＋記事幅＝全体幅にしてしまうと
メニューと記事がぴったりくっついてしまうことが分かりました。

そこで、記事幅を545pxまで狭めて見ました。

つまり　メニュー幅200px + 記事幅545px = 745px
760px - 745pxは15pxになり、メニューと記事の間に15pxの隙間ができました。

どうしてこうなるかとCSSを見ていると、メニューのfloatがleft, 記事のfloatがrightだから
かな。

とり合えず画面崩れがなおって　e気持ち！

Comment (0) | Trackback () | ▲TOP

訪問者リストを開いたとき、せっかく張ったねこちゃんが
リストの下に隠れて見えなかったので、CSSのポップアップの
ところでbackground-color : ;の様に変更しました。
（色の番号を削除）
一行削除しても同じ効果が得られますね。
これでねこちゃんがすけて見るようになりました。
e気持ち！


/*---------------------------------------------*/
/* ポップアップ */
/*---------------------------------------------*/
.blog-popup {
background-color : ;
padding-top : 5px ;
padding-right : 5px ;
padding-bottom : 5px ;
padding-left : 5px ;
margin-top : 5px ;
margin-right : 5px ;
margin-bottom : 5px ;
margin-left : 5px ;
border-style : solid ;
border-top-width : 1px ;
border-right-width : 1px ;
border-bottom-width : 1px ;
border-left-width : 1px ;
border-color : #FF9966 ;
}

Comment (0) | Trackback () | ▲TOP

CSSファイルの記事の中の.blog-entryの部分に画像を張ると
記事ごとに画像が表示されます。（右下の隅）
background-position: 77% 95% ;の様にすると左右、上下方向に
画像をずらせます。お好みの位置にずらしてみてください。
今のところIEでしか確認取れてません。ネットスケープ、Firefoxで
見たら表示されてません。(^^;
ねこちゃんがいっぱい。　e気持ち！

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


.blog-entry {
margin-top : 5px ;
margin-bottom : 5px ;
border-width : 1px ;
border-style : solid ;
border-top-width : 1px ;
border-right-width : 1px ;
border-bottom-width : 1px ;
border-left-width : 1px ;
border-color : #FF9966 ;
background-color : ;
background-image : url("/img/u45763/FI1490564_1E.gif") ;
background-repeat: no-repeat ;
background-attachment :fixed ;
background-position: 77% 95% ;

}

Comment (0) | Trackback () | ▲TOP

booさんにｺﾒﾝﾄ頂いたので、お蔵入りのDoblog miniを
復活させました。ギャラリーにお気に入りの写真飾って見ます。
仕事帰りに見てきたアメリカンショートヘアの赤ちゃん
可愛かったな！＜記事と写真は特に関係ありません＞

e気持ち！

Comment (0) | Trackback () | ▲TOP

これまでなんか重要なこと書き忘れてました。
CSSファイルを開くと、colorやBackground-colorのところに、
#xxxxxxなんて分からない事が書いてあって＃xxxxxxって何色？
全く分からないですよね。

色の指定方法はいくつかありますが、#xxxxxxがもっとも一般的のようなので
他のは知らなくても良いかも。

ぱっと見てイメージがわかないので、私は色名による指定をしています。
white、black、blue、red、greenなどと指定する方法です。

初心者の方は、既存テンプレのスタイルシートをもとに、いじったとこだけ
色名を指定している人も多いので、CSSファイル見ると#xxxxxxや
whiteなど表記が混在しているので、いじったところが直ぐに分かりますね。

フルカラーでは1677万色あるそうですが、win/macに共通する216色を
Weｂセーフカラーといって環境の違いで別の色に置き換えられることなく
表示できる色があります。できれば、この216色から選べば間違いないと
思います。

そして背景と文字の配色によっては文字が見えにくかったり、目がちかちか
したりします。

事前に配色の具合を確かめるには
http://www.ziyu.net/color.htm
が良いのではないでしょうか？
背景と文字の両方をリストから選べるので、その場で感じが分かると
思います。

色を上手く使うとBlogのイメージが一気に変って　e気持ち！

Comment (0) | Trackback () | ▲TOP

もちろん好きな画像です（笑）

次にどこに使用するための画像なのか考えます。

例えば、シンプルのテンプレを選ぶとブログの
左右に空白ができますね。私が最初に作ったのは
この左側のスペースに、お花や葉っぱや花火などの
画像を表示させるものです。

この場合は横長で左端に画像のあるものを選びます。

記事のタイトル行やカレンダーなどに使用する場合は小さな
アクセントとなる画像を選びます。

気に入ったものがあれば、Winならマウスを乗っけて右クリック、
名前をつけて画像を保存します。私は自分のPCのマイピクチャに
保存しておきます。

画像がたまってくると e気持ち！

Comment (0) | Trackback () | ▲TOP

かわいい、ねこちゃんのおかげでブログのデザインが明るくなりました。
e気持ち！

CSSのあちこちに画像の貼り付け指定をしてみて、ブログのどこに
どのように表示されるのか、プレビューで見るという地味な作業を
繰り返しました結果、どこにどのようなサイズの画像を貼り付けると
どう表示されるかだいぶ分かってきました。

写真やイラストなどを入れてブログデザインする上で重要な点なので
今週は、このネタで一週間ひっぱってみようかな（笑）

Comment (0) | Trackback () | ▲TOP

ハッピーバナーは
http://www.doblog.com/weblog/myblog/1639
jinさんのところからお借りしました。
タイトルの画像は
http://www.doblog.com/weblog/myblog/2883
onefinedayのbooさんのところからお借りしました。
記事背景、及び右下の背景画像は
http://cattown.lovepop.jp/
Hanzoさんのところからお借りしました。

皆さん素敵な画像をありがとう。
かわいくって e気持ち！

Comment (0) | Trackback () | ▲TOP

素材のところが分からなかったという声があったので、今日は
素材探しについて書きます。せっかくブログのデザイン変更を
考えても、文字や背景色を変えているだけではな～。
他の人みたいにカッコいい写真とか入れてみたいって思いますよね。

でDoblogに送信するのは.gif .jpg .pngなどの拡張子の画像ファイルです。
自分でイラストを描かけたり、デジカメ写真とれれば良いけれど。
そうもいかないよねって人は画像を探す必要が出てくるわけです。

素材ってどこにあるの？
以前、フリー素材などのキーワードでググレば（検索すれば）などと
簡単に説明してしまいましたが、これが、なかなか。いくら検索しても
なかなか上手くたどりつけないのです。そこで下記は私も利用した
サイトが２つあるのでオススメ！　リンクばかりで分かりにくかったり
入り口がどこにあるか分からないようなサイトはないそうです。

http://www5d.biglobe.ne.jp/~kiryuu/sozai/index.htm

前回も紹介しましたが、BevelやVegaから、いろいろお借りしました。謝謝！
素材を無料で提供してくれる方のサイトは、それぞれ利用の規約があり、
使用の際に必ずリンクを要望されたり、画像の加工や配布を禁止したり、
個人サイトでの利用のみ可などの規則があります。
必ず利用の規約を読んで同意できるところを利用してください。

素敵な素材に出会えると　e気持ち！

Comment (0) | Trackback () | ▲TOP

暑いので涼しげなブルーを背景色の一部に使ってみました。
テンプレートは、またシンプルです。（シンプル　イズ　ベスト）

先日、ﾎﾃﾙのﾌﾟｰﾙｻｲﾄﾞでちょっと高級な中華を食べました。
ﾌﾟｰﾙの色がちょうどこんな感じでした。

涼しげで　e 気持ち！

Comment (0) | Trackback () | ▲TOP

Doblog mini の猫ちゃんはとり合えず４色で終了です。
今回のcolorはlightgreenです。
いつのまにかBlog数が100になりました。
沢山の皆様見に来てくれてありがとう。

来週はどんなデザインになるかな？
ねこちゃんもいずれ復活します。

e気持ち！

Comment (0) | Trackback () | ▲TOP

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

背景色はCornflowerblueです。

Cool な色で　e気持ち！

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

Comment (0) | Trackback () | ▲TOP