« 2006年08月 | メイン | 2006年10月 »

2006年09月 アーカイブ

2006年09月02日

タイトルバナーを変更する

さぁ、いよいよ(?)デザインの変更開始!
まずは、タイトルバナーに画像を表示させましょう♪

はじめに、画像の用意。
サイズを決めて、Photoshopで710px×150pxのバナーを用意しました。
(サイズは自由)

画像ができたら、CSSファイルのあるフォルダにFTPでアップロード
UPできたら、CSSのレイアウト。
赤字の部分を追加します。

#banner {
width: 710px; /* necessary for ie win */
background-image: url("画像ファイル名");
background-position: left top;
background-repeat: no-repeat;
}

アップロードが完了したら、リロードしてみましょう。
バナー部分の画像が変わっていたら成功!

タイトルやサブタイトルのカラーやフォントサイズも画像に合わせて変更すればなおGOOD♪


ヘッダータイトルは
#banner-header {
margin: 0;
color: #fff;
font-size: 20px;

font-weight: bold;
line-height: 1;
text-shadow: #36414d 0 2px 3px;
}


サブタイトルは
#banner-description {
margin-top: 5px;
margin-bottom: 0;
color: #666;
background: none;
font-size: 12px;
font-weight: bold;
line-height: 1.125;
text-shadow: #36414d 0 1px 2px;
}

赤字の部分を変更すればOK。

2006年09月04日

style-freeのCSS開始(?)

あっちもこっちも中途半端でいかんなぁ~とは思うのですが
なにせ飽き性なのもで、今日は『style-free』トップページのCSSをチョコっと。
やっぱり、セレクタの使い方がいまいち分からないまま・・・。
IDとCLASSの使い分けがねぇ~(ーー;)
いいのかなーこれで。
9月からWebのスクールも再開するし、先生に聞いてみようっと。

とりあえず、分かるところからスタート。

HTML検証サービスでチェックもしてみました。
日本語でチェックするならこちら

CSS検証サービスも。

時々チェックしながら、進めていきました。

ひとつ分からないことが。
コピーライトはaddress要素で入れたので、文字スタイルがイタリックになってしまいました。
CSSで文字スタイルを解除したいんですが、どこになんて入れたら良いのでしょうか?
先生、教えてくださいマセ。

2006年09月07日

今日から新学期♪

Webスタンダードの授業、今日から再開しました。
長ーーーい、夏休み終了!

今日からDWの授業だったけど、教程は見ずに先生に質問攻めでした。
夏休みの間にわからなかったことを、色々聞けて良かった♪

style-freeのTOPページはまだ制作途中ですが、少しゴールが見えてきたかな?
がんばろうっと!

2006年09月13日

CSSセミナーに参加

通学しているWEBデザインの学校のCSSセミナーに参加してきました。
初級編だったのですが、かじりたての私にはものすごく勉強になりました。
今までは、ブラウザの見え方から「こうかな?ああかな?」ってかんじで
適当(?)に入れては直しを繰り返していましたが、
構造やルールが少しわかって「なるほど!」と思えたのは少し進歩かな?
中央寄せの『margin:0 auto』はむっちゃ使えそう♪
他にも色々な事が学べて、無料はお得!!
またやって欲しいなぁ・・・

Why?

昨日のCSSセミナーで習った事を復習する為に
divセレクタの中央寄せをやってみたけど、中央に寄らない!
Why?

DWのデザインビューでは中央寄せになってるのに…
どこかが間違ってるだろうけど、わかんない(?_?)
コンテンツメニューもうまく表示できないし…

それに、IE以外のブラウザでプレビューしてみると
レイアウト崩れまくり~~~!(ーー;)
こりゃ、アカン。
一からやり直しか?(T_T)

そそ、ボーイスカウトのHPもデザイン変更予定。
誰でも更新できるようにブログタイプにしようかな。

2006年09月14日

DWの新規保存時の拡張子を .htm から .html に変更

めっちゃ基本的な疑問。
HTMLファイルはhtmとhtml、どっちで保存する??
どちらでも使える事はわかってるけど、どっちを使うほうがよりいいのか。

今日、先生に質問してきました。
答えは・・・
「どちらでもいい」でした。やっぱり~
マイクロソフトの古いOSの頃、拡張子が3文字しか扱えなかった名残でhtmが残ってるらしいです。
でも今は4文字の拡張子が使えるので、htmlと混在してるとか。

じゃ、SEO的に違いはあるのか?
こちらも答えは「ない」ようです。

んじゃ、どっちかに統合して欲しいよなぁ~と思うのは私だけ?

そうそう、本題は
DWの新規ファイルの保存時の拡張子はデフォルトはhtm。
これをhtmlに変更するにはこんな方法があるそうです。

Dreamweaver TechNote
新規保存時の拡張子を .htm から .html に変更する
http://www.adobe.com/jp/support/dreamweaver/ts/documents/dw0399.html

あ、余談ですが
adobeとmacromediaが合併しちゃったんですね。
こりゃ、最強ですねー。
PhotoshopとIllustratorとdreamweverとFlashのパッケージ版ができる日も近い?

2006年09月21日

パソコンが危ない!

ハードディスクの危機を感じます…
2、3日前からブルースクリーン数回、
「No bootable devices--strike F1 to retry boot,F2 for setup utility」というメッセージ数十回!
何度も電源長押しで終了、起動を繰り返していたら時々起動するといった状況。
ハードがクラッシュして取り替えてからまだ半年程なのに~(T_T)

運良く(?)起動した時に最低限のバックアップは取ったものの、修理もハードの交換もリカバリも嫌だよぉーーーー!!!

起動した時にハードが無事って事は、ハードの不具合じゃないのかな?マザーボ-ド??

念願かなって本日から在宅勤務になったのに、パソコン壊れたらまた出勤しなきゃいけないじゃん!

DELLパソって故障が多いのかしら?
それともノートパソコンが弱い?

仕事用にDELLのデスクトップを買おうかと思っていたけど、考え直そうかな。。。

パソコンの電源切るのが怖い。

メニューの画像が表示できない

style-freeのトップページ
かなりの修正を経て、ようやく形になってきたのですが、IEが最悪!

ulリストを画像に置き換えてメニューを作っているのですが
IEでのみ画像が表示されなくて困っています。
Gecko系・Operaは表示できてるのに…

CSSの書き方がマズイのだと思うのですが、自分ではわからないのでご指摘頂けませんでしょうか?

URLは
http://style-free.biz

HTMLは以下の通りです。

--------------------------------------------------------

CSSは以下の通りです。

/* メニュー */
#menu ul {
position: absolute;
margin-top: 0px;
padding: 0;
list-style: none;
}
#menu li {
margin:: 0;
padding: 0;
display: block;
text-indent: -9999px;
}
#menu li a {
text-decoration: none; /* ■ Firefoxなどで表示されないようにする */
display: block;
height: 40px;
width: 81px;
}
#menu li#menu_01 {
width: 81px;
background: url(images/menu_01.jpg) no-repeat;
margin-top: -33px;
margin-left: 347px;
}
#menu li#menu_01 a:hover{
background: url(images/menu_01_on.jpg) no-repeat;
}
#menu li#menu_02 {
width: 81px;
background: url(images/menu_02.jpg) no-repeat;
margin-top: -40px;
margin-left: 428px;
}
#menu li#menu_02 a:hover{
background: url(images/menu_02_on.jpg) no-repeat;
}
#menu li#menu_03 {
width: 81px;
background: url(images/menu_03.jpg) no-repeat;
margin-top: -40px;
margin-left: 509px;
}
#menu li#menu_03 a:hover{
background: url(images/menu_03_on.jpg) no-repeat;
}
#menu li#menu_04{
width: 81px;
background: url(images/menu_04.jpg) no-repeat;
margin-top: -40px;
margin-left: 590px;
}
#menu li#menu_04 a:hover{
background: url(images/menu_04_on.jpg) no-repeat;
}
#menu li#menu_05 {
width: 82px;
background: url(images/menu_05.jpg) no-repeat;
margin-top: -40px;
margin-left: 671px;
}
#menu li#menu_05 a:hover{
background: url(images/menu_05_on.jpg) no-repeat;
}
--------------------------------------------------------

2006年09月22日

嬉しいような、困ったような・・・

WEBスタンダードの授業の復習の為に作り始めたボーイスカウト堺第23団のHPが大変なことに。

なにげなしにGoogleで「ボーイスカウト,堺」で検索してビックリ!
検索でTOP1になってるぅーーーーー!
\(>o<)/ギャーッ!

サーバー移転もしなきゃいけないし、コンテンツもまだ作れてないし・・・
良いのかなぁ???

それにしてもWEB標準の効果というか、実力というか。
目の当たりにしてしましました。

ボーイスカウトの日本連盟に承認を取ること、コンテンツを作りこむこと
早急にやらなければ!!

2006年09月23日

今度は2番目♪

通学しているスクールのSNS『コトパラ』のお友達から嬉しい知らせが。

「カンプデザイン」でGoogle検索したら、2番目にきてるとか!

\(゚o゚;)/ウヒャー
カンプデザインで2番目とはビックリです!
慌てて見てみたら本当にその通りでした。

で、1番目がいろいろアドバイス下っているBOSS先生でした!!
さっすが!!

この2番目に上がってるページはMovableTypeで作ったブログなので
XHTMLの構造がきちんとしているからなんでしょうね。

うぅーーーん。
最近CSSにばかり気を取られていましたが、HTMLの大切さ痛感しました。

さぁ、次はボーイスカウトのページの修正(どうもCSSをいじったらしくレイアウトくずれまくり!)と
コンテンツの作りこみを頑張らなくちゃ!

お仕事のECサイトのトップページも(X)HTML+CSSにリデザインするゾ!!
こっそり、私の勤務するお店公開…(^^;)
ランジェリーショップ アミ

2006年09月27日

SQLiteへの移行に失敗

データベースをSQLiteに移行しようとして失敗。
データベースファイルのバックアップ の取り方が間違っていました。
もっとちゃんと調べてからすれば失敗しなかったかもしれないのですが…

デフォルトからやり直しです。
コメントくださってた方、申し訳ありません。

1から出直します。

2006年09月28日

MovableTypeを手作業で復旧?

とりあえず、エントリーとコメントを手作業で戻しました。
デザインのカスタマイズはこれから…
一度やったことなのに、もう忘れてる自分が悲しいよぉー!
途中になっているので、かなり見苦しいですがお許しを…
できるだけ早めに元に戻します。

「ま、こうやって何回も繰り返すことで覚えるのよ♪」と言い訳がましく思ってみたり。
皆さんの優しいお心遣いに感謝!

明日(いや、もう今日ですが)はWEBスタンダードの最後の授業です。
でもここからが始まり。
自分との戦いに負けないよう、常にお尻に火をつけておこうっと。

デザインのお仕事が舞い込む!

Webデザイナーの先輩からデザインのお仕事のお話を頂きました。
まだまだ勉強の身なのでお仕事としては無理かな~と思ったのですが
「勉強の為、やってみたら」と言われて、無謀を承知で引き受けてしまいました。

が、しかし納期がせまっているらしい。
そのうえ10月3日からわたくし、バリ島に旅行に出るので
必然的に期限が10月3日に!
間に合うのかしら?(^^;)

採用されると、ギャラもでるらしい。( ̄ー ̄)ニヤリッ
ま、採用は無理でも勉強になるからがんばろうっと♪

と、いうわけで当ブログはデザインめちゃくちゃのまま
暫く放置される見込みです。m(。-_-。)mス・スイマセーン
経過報告時々入れま~す。

2006年09月29日

[style-free] キーワードについて

みなさんがいろいろ考えて下さってるのに
自分でも何かやらなきゃ!
焦って思いつくコトバを並べてみる。

Web,ウェブ,うぇぶ,Desing,デザイン
Laboratory,ラボ,らぼ,ラボラトリー
Style,スタイル,すたいる
たまご,タマゴ,ひよこ,ヒヨコ,タマヒヨ,たまひよ(どこかで聞いたような…)

自由なスタイル,型にはまらないスタイル,型破り,むこうみず
やればできる?,好きこそ…,いまさらではなく今から(今だからこそ)
まだまだこれから,おくればせながら,いい歳をして…,まだ間に合う!?
私のお尻(ハート)に火がついた!?

主婦だからこそ,ママだからこそ,やっと見つけた,やっとめぐり合えた,
大変だけどやめられない,やめられないとまらない(カッパエビせん!)

うぅーーーー!
まったく、素敵なコトバが見つからず…
ついつい大阪おばちゃんの感性がムクムクと出てきてしまうのよねぇ~(^^;)
これじゃ、大阪のおばちゃん丸出しやん!!

・・・もう少し考えてみます。


[style-free] 修正する点を書き出してみる

BOSS先生の講評を見て、やれそうなところから直してみようと思います。

  • 更新履歴の部分が可変しないのであれば、背景をひとつの画像として「wrapper」に置く
  • 更新履歴は定義型リストを使う
  • 「hr」をデザイン的に使うのは×。使うならブロック要素の上下のボーダーにする
  • メニューの再検証
  • キーワードの選定

こうやって見てみると、最初のコンセプトが甘々のまま見切り発車したのが原因と思われます。
実験用サイトって感じで、軽~く考えていたのが大間違い!
それじゃ仕事としてWebデザインをすることはできませんよね…

まずは、頭を絞って何を伝えたいのか考えてみます。

2006年09月30日

ワイヤーフレームを書いてみた

まだその段階かよ!ってツッコミはなしで…(^^;

wireframe-.gif
トップページの配置はこんな感じ。

サブページはmainの部分が少し変わる程度かな~

カンプまでたどりつけるかな?

病院(医院)のサイトデザイン。
締め切りがせまっているというのに、まったくカンプに着手できない。

今日はボーイスカウトで赤い羽根の共同募金。
明日もボーイスカウトで釣りに。
それも集合時間午前7時!
おまけに、本来のお仕事が詰まってきてニッチモサッチモいきませぬ。

今日こそはカンプデザインにかかりたいと思います。
現在 0時
あぁーーー!今日じゃなくて明日になってしまったよぉ…

さっ、ガンバろっと♪

About 2006年09月

2006年09月にブログ「style-free | Webデザイナーのヒヨコ」に投稿されたすべてのエントリーです。過去のものから新しいものへ順番に並んでいます。

前のアーカイブは2006年08月です。

次のアーカイブは2006年10月です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。