美術館>大丸ミュージアム「リサとガスパール絵本原画展」サイト

週末、娘と本屋さんに絵本を見に行ったときに、ふと目が合ったのです。。それが、リサとガスパールというキャラクター・・・。油絵調のタッチで描かれたなんとも、無表情でありかつ癒されるそのとぼけぶり・・・。一発ではまってしまいました。

早速ウェブで調べてみると、「ゲオルグ・ハレンスレーベン」というフランス人のデザイナーが書いているようです・・が、オフィシャルサイトがどうしても見つけられませんでした（TーT）
いろいろ検索していたら、なんと「リサとガスパール絵本原画展」が2005年3月24日(木)～4月12日(火)までやるではありませんか！ナイスタイミング！これはいかねば！

■大丸ミュージアム「リサとガスパール絵本原画展」



■関連情報
・リサとガスパールシリーズ(Amazon)

※どなたか、「ゲオルグ・ハレンスレーベン氏」のオフィシャルウェブサイト知ってたら教えてくださいませ。。

携帯電話>NTT DoCoMo premini.tvサイト

馬喰横山がアツイんです！！
こんな斬新なコピーをショートムービーで魅せてくれます！

■NTT DoCoMo premini.tv


2月10日に発売になったNTT DoCoMoのpreminiのプロモーションサイトで、premini.tvといったサイトがあるのですが、このショートムービーが笑えます。。癒し系というか・・・
これからはお笑いや癒し系が流行るといわれているので・・・

vol.1～5まであり、現在vol.3まで公開中です！
こういった、映像を使ったサイトが爆発的に増えていますね・・・
なんか楽しいです。

CSS編集>テキスト変更

今回はテキストの調整をしました。まず、下の画面キャプチャーを見てもらえればわかると思いますが、記事タイトルの背景に薄い青の帯をひきました。また、リンクの設定も変更し、マウスオーバーすると背景に薄い青のボックスが表示されるようにしてあります。

/* 全体のリンク飾り */
A {
color: #005FA9;
text-decoration: none;
}

/* リンク（まだ見ていない状態） */
A:link {
color: #005FA9;
}

/* リンク（マウスポインタを乗せた状態） */
A:hover {
color: #005FA9;
background-color: #DDEEFF;
}

/*タイトルロゴ用*/
#content #header A.bTitleLink:hover {
color: #005FA9;
}

/* リンク（クリックされた状態） */
A:active {
}

/* リンク（すでに見た状態） */
A:visited {
color: #A367B1;
}

/* エントリータイトル枠飾り */
h3.entryTitle {
margin:5px 0 20px 0;
display:inline;
font-size: 100%;
font-weight: bold;
line-height: 140%;
}

記事のテキストには、フォント色が黒でコントラストが強すぎて目が痛くなるので、少しグレーに近づけた配色にしています。
コメント ( 0 ) | Trackback ( 0 )のカラーはさらに彩度を落としてグレーにしました。
※後でアイコンを追加する予定です。

/* エントリーの背景 */
.entry {
width:540px;
margin:0 10px 10px 10px;
}

/* エントリータイトル */
.etTitle {
/*display: block;*/
margin:0 0 0 10px;
}

/* エントリータイトルの飾り（a class="etTitleLink"で使用） */
.etTitleLink {
}

/* エントリー本文 */
.etBody {
display:block;
width:520px;
margin:0 10px 0 10px;
color: #333;
line-height: 160%;
}

/* エントリーに表示されているカテゴリ */
.etCategory {
}

/* エントリーに表示されている日時 */
.etTime {
}

/* エントリーに表示されている「コメント（）」 */
.etCommentLink {
color: #666;
}

/* エントリーに表示されている「トラックバック（）」 */
.etTBLink {
color: #666;
}

/* エントリーに表示されているカテゴリー、時間などの「/」や「｜」 */
.etText {
margin:0 10px 0 10px;
color: #666;
}

/* 前のページ、次のページ */
.etNextPrev {
margin:0 10px 0 10px;
font-size:90%;
}

次に今回一番はまった右のメニューのデザインです。
メニュータイトル部分に背景画像を引いたのですが、HTMLの記述が[h2のなかにclass]が記述してあり、[padding]をつかって、左にぴったりくっつく状態を回避しなくてはならなくなりました。[margin]を使えばいいのですが、そうすると背景画像が両サイドにぴったりとくっつかないのです・・・しかたなく[padding]をつかって試してみたのですが、やはり問題発生！
Firefoxではしっかりとレンダリングしてくれるのに、IEは違った理解をしているようで、タイトル背景が10pxほど空いてしまってます。。

これは、本来「ボックスモデルハック」といったスタイルシートの記述の裏技で回避できるのですが、gooブログでは、「」「>」などが自動的に変換されてしまうので、使えないのです・・・

というわけで、今回はあきらめました・・・IEユーザーは圧倒的に多いので、そちらにあわせるべきなのですが、個人ブログということで、本来の正しいスタイルシートのレンダリングを行う記述のほうにしておきます。

/* カレンダー背景 */
.calendar {
margin: 0 0 0 10px;
width:168px;
}

/* カレンダー年月 */
.calMonth {
font-size:100%;
}

/* カレンダー曜日 */
.calWeek {
font-size:90%;
}

/* カレンダー日付 */
.calDay {
font-size:90%;
}

/* カレンダー日付のリンク */
.calDayLinked {
font-size:90%;
}

/* カレンダー前月、翌月 */
.calLink {
font-size:90%;
}


/* カレンダー内の区切り */
.calRule {
}

/* 左メニューの各見出し */
#menu h2 {
margin:-12px 0 0 0;
padding:4px 0 0 10px;
background-image: url(背景画像のURL);
background-repeat: repeat-x;
width: 177px;
height: 26px;
}
.menuBar {
margin:0 0 0 0;
font-size: 100%;
color: #333333;
line-height: 120%;
font-weight: bold;
}

/* 左メニューの背景 */
.menuBg {
margin:10px 0 0 0;
}

最後におまけで、最新の投稿の各メニューの先頭にアイコンをつけてみました。

/* 最新の投稿（RECENT ENTRY）のリスト */
.entLink {
display:block;
margin:0 0 0.4em 0;
font-size: 90%;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: 0 1px;
padding: 0 0 0 12px;
}

次回記事で、コメント部分の調整と、gooブログ以降のメニューの扱いについて考えてみたいと思います。ながながとすみません。。

Flash>Puccaclub 韓流サイト

韓流ブームにのって、韓国のサイトを紹介！
このFlashアニメーションは絶品です。必見！

■Puccaclub



キャラクターデザインはもちろん、モーションデザインがすばらしい！！
モーションデザインがよいのでキャラクターの性格やストーリーが伝わってきます。。。

パソコン>iPod新製品発売記念！アップルサイト

iPodの新製品が発売されましたね！
春らしいカラーリングでサイトを見ていてわくわくします。
わたしも、iPod miniのグリーンを持っていますが、クリックホイール部分のアイコン色も本体カラーに合わせて色が付いているので、配色の統一感が増したような気がします。

■アップル



プロダクトデザインが抜群なアップルですが、サイトもやはり抜群です！
商品の見せ方や、情報整理もしっかりと設計されていて分かりやすいですね。。

CSS編集>コンテンツエリアレイアウト変更

前回、ヘッダ部の変更を行ったので、今回はヘッダ下のコンテンツ部分のレイアウト変更を行います。



見栄えはだいぶ完成形に近づいてきました。
今回行ったスタイルシートの変更についてですが、結構複雑なことをしてます。
[id=center]を左に配置させ幅は560pxに設定して、この属性の背景に角の丸みをつけた画像を指定し、[class=content]の背景に両端に1pxボーダーをいれた画像を指定しています。

/* 記事部分の指定　*/
#center {
text-align:center;
padding:0px;
width: 560px;
overflow: hidden;
background-color: #FFF;
background-image: url(背景画像へのURL);
background-repeat: no-repeat;
background-position: 0 0;
}

/* 記事部分の.content指定　*/
#center .content {
padding:0 0 10px 0;
width:560px;
margin:13px auto 0 auto;
text-align: left;
overflow: hidden;
background-color: #FFF;
background-image: url(背景画像へのURL);
background-repeat: repeat-y;
background-position: 0 0;
border-left-color:#6D7C84;
border-left:solid;
border-left-width:0px;
border-right-color:#6D7C84;
border-right:solid;
border-right-width:0px;
}

右のメニュー部分も同じように、[id=menu]を右に配置させ幅を189pxに設定して、[class=sidebar]には背景に両端に1pxボーダーをいれた画像を指定しています。

/* 右メニューの指定　*/
#menu {
float: right;
width: 189px;
overflow: hidden;
background-color: #FFF;
background-image: url(背景画像へのURL);
background-repeat: no-repeat;
background-position: 0 0;
}

/* 右のメニュースペースの余白 */
#menu .sidebar {
padding:10px 5px 5px 10px;
margin: 12px 0 0 0;
width:189px;
background-image: url(背景画像へのURL);
background-repeat: repeat-y;
background-position: 0 0;
border-left-color:#FFF;
border-left:solid;
border-left-width:0px;
border-right-color:#7A7B7B;
border-right:solid;
border-right-width:0px;
}

これで、コンテンツエリアの上部の角丸処理をつけた枠ができました。
Web Developerの[枠表示]→[ブロック要素を表示する]で確認してみます。


※クリックすると拡大画面が見れます。

こんな感じになっています。

実は、上記以外にもコンテンツ部分のスタイルシートを変更しています。
例えば、[class=entry]などの幅を540pxにしたり、テキストが左右にぴったりとくっついてしまうコンテンツには[margin:0 10px 0 10px;]と、指定して左右に10pxずつ空白を開けました。
本来、[class=content]で、[padding]の指定で空白がとられていましたが、実はこれが曲者で各ブラウザで、解釈の違い（バグ？）がでてきます。
細かいところまでは説明しませんが、[padding]で空白することは極力行わないほうがいまのところ妥当と判断して、このような方法で空白をあけました。


ここまでくると、テキストの大きさなどの細かいところを調整したくなってきたので、コンテンツの下部の処理は置いておいて、次回の記事でテキストの指定をして見ます！

CSS編集>前回のIEの場合、中央に表示されないバグ修正

以下のように[BODY]の設定に[text-align:center;]を入れることでIEも真ん中に表示されるようになりました。

/* ページ全体の背景と余白と各メニューリスト以外の文字 */
BODY {
background-image: url(背景画像へのURL);
background-repeat: repeat-x;
background-color: #C6CFD0;
text-align:center;
}

CSS編集>スタイルシートでヘッダ部分を設定

前回の記事で、背景を設定しました。
現状の見栄えはこんな感じだと思います。



今回はタイトル周りとヘッダ部分の飾り付けをして見ましょう。。

まずは、タイトルロゴをテキストから画像ロゴに変更してみました。
やり方としては、[h1タグ]にタイトルがはさまれているので、これを利用して[h1タグ]の背景にロゴを表示します。HTMLは変更できないので、テキスト文字は画面外にぶっとばす処理を行います。

■h1タグの設定

/* ブログタイトル、ブログ概要、記事タイトルの文字飾りの指定 */

h1 {
width: 161px;
height: 18px;
background-image: url(http://blogimg.goo.ne.jp/user_image/3b/fd/8106e96d6e7a3c3429343f7dd7a915c9.png);
background-repeat: no-repeat;
margin:0 0 0 0;
position: relative;
left: 10px;
top: -25px;
}

h1はページに、1つしか存在してはいけないので各ページで必ずh1の背景にはロゴ画像が表示されることになります。h1はブロック要素なので、そのまま[width]と[height]でロゴの大きさを指定してあげます。あとは、表示位置を[position]を使用して調整します。
relativeは相対位置への配置となるので、前回レイアウト構成図でいうと、h1が入っている[id=header]の枠が基準となります。



となると、[id=header]の枠を超えて上のほうに表示させたいので、枠の0pxの位置を越えてマイナスの数値に設定しているわけです。

■テキストタイトルの設定

/* ブログのタイトル */
.bTitle {
display:block;
font-size: 100%;
font-weight: bold;
text-indent: -1000px;
}

/* ブログの概要 */
.bDesc {
display:block;
font-size: 90%;
font-weight: normal;
text-indent: -1000px;
}

この、[text-indent: -1000px;]で1000px分左にしてして見えないようにしています。
※スタイルシートをはずすとしっかりと存在しています。
また、[.bTitle]はタグにclass指定されているので、インライン要素となりますので、[display:block;]でブロック要素に変更しています。こうしないとぶっ飛んでくれません。。。


最後にヘッダ部分にイメージを置いてヘッダ部はほぼ完了です。
これは、[id=header]の背景を利用して画像を設定するだけです。
ただ、今回は画像の幅を決めうちにしたいので、[id=header]は画像のサイズに合わせて以下のように設定しました。

/* ヘッダーの指定　*/
#header {
width: 756px;
height: 203px;
background-image: url(http://blogimg.goo.ne.jp/user_image/2b/42/6b2c5cb52632eafa5f32293e89ac0d51.jpg);
margin: 50px 0 5px 0;
}

この画像は現状あまり意味なく縦幅をとっていてよろしくありませんが、とりあえずこのまますすめます。

次の記事でコンテンツ部分のレイアウトを調整したいと思います。
今回少しスタイルシートを変更して標準レイアウトから変わっていますが、その辺を説明します。。

※今回のカスタマイズによるバグ
・IE6で中央揃えにならない

CSS編集>スタイルシートで背景を設定

まず、デザインラフから背景のグラデーション画像を切り出し、スタイルシートでバックグラウンドイメージに設定します。このグラデーション画像はX座標にループ表示させるので幅は5pxで作ってます。。データ容量も少なくてすみますし。縦幅は、背景色と同じ色になるまでの幅を確保してください。
実際の画像はこれです。


あとは、背景色にグラデーションの一番下の色を設定すれば背景の設定は完了です。

実際の<BODY>部のコードはこれです。

/* ページ全体の背景と余白と各メニューリスト以外の文字 */
BODY {
background-image: url(アップロードした画像のURL);
background-repeat: repeat-x;
background-color: #C6CFD0;
}

次の記事でヘッダ部の飾り付けをして見ます。

CSS編集>macromediaサイト風デザインラフできました・・・]

やっとこさ、スタイルシートで作成するデザインラフができました。
Firefoxサイト風にしようと思ったのですが、やっぱりmacromediaサイトのほうが好きなので、好きなほうをまねてみることにしました。

ほとんど、まね・・・ですが、勉強をかねて挑戦してみたいと思います。

■macromedia風テンプレート


次の記事から実際に、画像部分をはめ込む作業をしたいと思います。。
ふぅ～。結構方向性決めるまでが大変です。。