やっとデザイン変更完了しました

JUGEMテーマ:テンプレート


や〜っと、テンプレートを変更しましたイヒヒ
多分、大丈夫だと思いますが崩れてたりしたら泣いちゃうなぁ・・・汗

テンプレートをオリジナルのものに変更すると言ってから一年くらい経ってしまいましたたらーっ
いや、ほとんど出来上がっていたのですがヘッダーの画像だけが出来上がっていなかったんですよねあせあせ
最後はかなりやっつけでやったので、暇を作れたらヘッダー画像をまた変更するかもです。
取り合えず、文字は標準サイズにしたので前のよりは見やすくなったかな〜と。

子育てしながら作るのは想像以上に難しかった…っ汗


MdN編集部
MdN
コメント:一冊あるととても便利なネタ帳。デザインに困った時に気分転換に見るのもオススメです〜

webページをブラウザで見たままに印刷する方法



たまにはアイルー関連以外の事でも書きますかねイヒヒ

今仕事でwebページをブラウザで見たままに印刷できるようにしてほしいと依頼がありました。
実はそのサイト、ちゃんと印刷用のCSSが入っていました。
それなのになんで?と思いますが、この印刷用のCSSはコンテンツの中身のみを印刷できるようにするCSSでした。

いらない部分(ヘッダーとかサイドメニューとか)を印刷に出ないようにするってのは大変ですよね。
それをやってのけるフレームワークが配布されています。

印刷用のCSSのフレームワーク

今回の依頼はブラウザで見た状態と同じように印刷できる事、なのでこのフレームワークを外して、別の印刷用のCSSを入れました。

制作をやられている方で、firefoxでの印刷プレビューでフッター部分とかがサイドメニューなどにめり込んでいたりする現象に遭った事がある人はどれくらいいますかね?
それを解消するやり方が書いてあるページを見つけましたラッキー

firefoxの印刷

そもそも印刷が崩れる原因はfloat:rightなどやっているからなんですよね。
なので、floatをtable要素に置き換えれば崩れない!って考え方です。

ここのページはとても分かりやすく、丁寧に書いてあるのでもし同じようにブラウザと同じように印刷するのに悩んでいたら、試してみてくださいね〜イヒヒ

ちなみに、この印刷用CSSはIE8にも対応しています。
IE8も、印刷ページが2枚以上になると背景も印刷するにチェックをしていても、背景が消えたり出たり不安定だと思います。
でも、このCSSを入れればIE8でもちゃんと背景が出るようになりますよラッキー

ま、正直ブラウザの見た目を印刷したいならプリントスクリーンをして印刷すればいいって話ですけどね・・・。
フリーソフトで長いページもちゃんとプリントスクリーンできる物もあるみたいですし・・・。

お仕事サイトのコーディング完了!



また珍しく週末に書いてますたらーっ
そう、また家で仕事してましたあせあせ

先週の続きで、この前はトップデザインでしたが今回はコーディングをしてました。
先週の早い段階でちょこっとした修正をもらって、そのままOKが出たのでトップと下層コーディングをしてました。

下層と言っても、会社概要とその会社で扱っている製品についての説明ページだけでしたので実質3ページだけのコーディングでした。

ですが、週末しか基本的に作業が出来ない上、昨日と今日は暑くてなかなか長時間パソコンの前に座っているのが辛い状態でした汗
昨日はそこまでじゃなかったのですが、今日は本当に暑くて・・・パソコンがコタツ並みに暑くなるので途中で一時間くらいパソコンを落として休憩を挟んだりしました。
じゃないと、とても長時間作業ができなかったんですよモゴモゴ

おかげさまで、ついさっきコーディングが終わったので自分のサーバーに上げたところですラッキー

明日依頼者(と、言っても自分のチームリーダーなんですけど)にまだ足りない情報(metaとかタイトルとかね)をもらわないと完成がしないので、もうちょっとだけかかりそうな感じです。

とりあえずは一安心かな・・・たらーっ

平日は会社に行って、しかもフルタイムで働いている上、一応主婦なので家での仕事は正直しんどうです・・・汗
でも、会社の給料がそこまで高い訳でもないし、個人的に仕事をしていないとデザインやコーディングを忘れてしまいそうな感じがするので仕事を頂けるのは有難いですねイヒヒ

今、会社でのコーディングが本当にひどくて汗
Yahooショッピングとオークションブースの設置代行をしているので、コーディングと言っても完全にCMSなのでかなり制限がかかっているので基本テーブルコーディングにCSSの直書きなんですよねたらーっ
なのでコーディング能力がかなり下がっていたり汗

久しぶりにフルコーディングをしたので、ちょっとだけ楽しかったですラッキー

今更だけど、やっぱりPhotoshopは凄いみたい



珍しく週末に書いてますラッキー
いつも会社の昼休みに書いているので、自宅で書く事をしてないんですよね汗

おまけに自宅PCを立ち上げるのもちょっとご無沙汰気味でしたたらーっ

で、なんで週末に書いているかと言うと・・・家でお仕事をしていたからです・・・。
いや、会社の仕事をお持ち帰りしている訳ではないですよ?
基本会社の仕事はお持ち帰り禁止なので・・・。

じゃなくて、会社の仕事ではなく個人的に仕事をちょこっとだけ引き受けていたりしてたりして・・・。
いや、そんな凄いとかいうレベルじゃないですよ汗
up誰も言っていませんが(苦笑)

そのお仕事で、ホームページのトップデザインを受けたのですが、納期が結構厳しい状態なんですよねあせあせ
7月14日にアップを目指すということなので、二週間後にはコーディングまで上がっていなければならないのですよモゴモゴ

でも依頼者からは、下層ページはあんまり無いし、複雑なコーディングにはならないと言われているので多分・・・間に合う・・・かな・・・。
ちょっと自信がないなぁ・・・ノーノー

で、今週末の昨日と今日はそのトップデザインをやっていました。
結論としてはとりあえずのデザインは終わったので、明日見せられる形になりそうです。
ま、そこから修正が入るので、デザインの完成はいつになるかちょっと微妙な感じですけど・・・。

そのトップデザインで、全体のデザインは見本サイトのほぼパクリ・・・もとい、似た感じのデザインなのであまり迷わずに。
問題はメインビジュアルなんですよ。

要望としては

・グローバルな感じ
・地球的なイメージ
・つながっている感じ

らしいですたらーっ
扱っている製品に関するイメージなので、なんとなーくは掴めました。

メインビジュアルのイメージとしていただいた画像で、できればこんな風にして欲しいと言われたのが『球体にいろいろな人の写真を貼り付けてほしい』との事。
えぇ、立体的な球体にテクスチャー(壁紙みたいなものと思ってください)を貼るんですよ。

一言で言えば簡単ですが、実際にやるとどうやってやるんだ?って感じです。

もともと私、現役の学生時代に3Dソフトを触っていたので、テクスチャーを貼る要領はわかるのですが、現在私のPCには3D作成ソフトは入っていません。

弱ったなぁ・・・汗

と、思ったのですが、そういえばPhotoshopで3D機能がどうたらとか言っていたなぁと思い出しましたひらめき

しかもCS4からの機能です。

買う時、に3D関連が強くなったって使う機会なんてそんなにないよ〜とか言っていた過去の私を一瞬呪いました(笑)

CS4買ってよかった〜と、心底思いましたよー!!

で、使えるのはわかったけど、使い方が全然わからない・・・。
いろいろ調べたら、Adobeの公式サイトで使い方の動画がありましたぴかぴか

2Dから3Dへの変換

これを見れば簡単に2Dから3Dへの変換が出来ますてれちゃう

そんな訳で、要望に近い形のメインビジュアルが出来ましたイヒヒ
お仕事なのでその画像は載せる事ができないですがあせあせ
ページが公開されたらURLでも載せておきますねラッキー


やっぱりPhotoshopだけじゃないですが、高いソフトは高いだけの理由がありますねニコニコ
すごい機能がたくさんありまするんるん

お金に余裕が出来たらアップデート版の購入も考えなきゃ汗

アドビシステムズ
コメント:CS5のアップデート版!前のバージョンをお持ちの方はこちらが断然お得!

使えそうなフリー画像

JUGEMテーマ:web制作


web制作で必要なものと言えば、html知識・画像編集能力など色々ありますが、とりあえず言える事は素材画像が無いとしんどいなぁ〜ってところでしょうか?たらーっ

そうですよねー・・・
いくらhtmlの知識があって画像編集能力があったとしても、加工する画像がないのでは仕事にならないですからねあせあせ

そこで良いサイトを発見しました!!

ペイレスイメージズ

基本有料なんですけど、中にはフリーで使える画像がたくさんありまして会員登録(無料)をすれば一日5枚まで落とすことができるそうですよイヒヒ
画像サイズもかなり大きめで、印刷サイズがでているあたり解像度も大きそうな気配。
まだ登録をしていないのでどんなものかわかりませんが、置いてあるフリー画像はそれなりに使えそうな感じですラッキー

人物が結構多いので、個人でお仕事をされている方とかでコーポレートページを作るなら使えそうですよねぴかぴか

有料版もいっぱい種類があるので、必要とあれば必要な枚数を買えば良い感じなのでこのサイトは結構使えそうですよてれちゃう

タグと格闘

JUGEMテーマ:日記・一般


週末、予告した通りブログデザインの変更をしようと作業をしていました。
もともと、このブログのテンプレートにカスタマイズ用のがあったので、それを修正しながら作っていたのですが・・・。

格闘する事2日間

全然うまくできない・・・ポロリ

もう、ね。
最初から作り直した方が楽かもしれないくらい、ひどい状態です汗
やっぱり人が作った物を修正するなんて、正直無謀でしたふぅ〜ん

仕事で何度となく壊れたソースコードを直しましたが(今朝も直してました)、やっぱり人が触ったものはその人にしかわからないから無理ですね・・・。

なので、もう少し時間がかかりそうですモゴモゴ

早くデザイン換えたいのになぁ・・・。

もうしばらくお待ち下さい・・・。

iepngfixにご注意!!

昨日、仕事でチーム全体が真っ青になりました汗
お仕事でホームページを作ったりしていますが、web制作者泣かせなブラウザと言えば、IE(インターネットエクスプローラー)バージョン6ですねたらーっ

だいぶIE7へ皆さん移行しているのですが、未だに2割くらいの人がIE6を使っています。

何がそんなに制作者泣かせかと言いますと・・・padding・marginの数値が倍になったりとか、表示がずれたりとか。

中でも新しいブラウザでは最早常識となった透過PNG(透明部分のある画像)が透けないという欠点汗

gif画像は透けるけど、pngは透けないとか有り得ないポロリ

そんな中、javascriptでIE6にも透過pngが適応できるすんばらすぃ〜ものがあります。

DesignWalkerってサイトに詳しいことが載っています。

nextこちらからback

さらにくわしいのは

nextこちらからback

で、ウチのチームでもこのjavascriptを使って透過pngをIE6に適応させていたら・・・

透過pngの画像それぞれに画像表示に×がついている・・・

ある意味ホラーですよ・・・。

そしたらね?
その大元のjavascriptの配布元になっていたサイトが閉鎖してやんの・・・モゴモゴ

それが原因で画像に×が付いてたみたい。

このjsをビルダーやらDreamweaverで開いて、18行目の

blank: 'http://www.isella.com/aod2/images/blank.gif',

って部分があるんですけど、コレ配布サイトの画像に直リンクしているんですよ汗

ちなみに、このblank.gifってのは1×1サイズの透過gif画像です。

配布サイトがなくなったなら画像もなくなった、と。
当たり前だけど、jsの中身がわからないと、わからない事ですよね・・・。

なので、この部分を自分のサーバーに上げた透過gif画像に直リンクしてあげれば大丈夫です。
配布サイトがなくなってしまったので、新たに落とすことはできないと思いますが、現在使っている方でこのような事が起きていたら試してみてください。

やっぱり配布されているjsはどんな原理で動いているか分かっていないと後で大変なことになりますね汗

ここ2・3日の事なので、困っている方がいらっしゃったらお役立てください。
ちなみに旦那も同じ症状に悩んでいましたたらーっ

これ以外にも透過pngを適応させるjsはあるらしいので、そっちのリンクも付けておきますラッキー

「ITキヲスク」ってサイトで透過pngについてです。

nextこちらからback

まだ試していませんが、とても詳しく書いてありますので参考にどうぞ〜イヒヒ

モニタ解像度に泣かされました

前回書いた内容で、背景にflashを入れるのは成功しましたが・・・汗
お客さんが見ている環境が、モニタ解像度が横1024だったので大変なことになっていました・・・。

背景のflashは大丈夫なのですが、コンテンツ部分がピクセル指定をしていたのでスクロールバーが思いっきり出てしまってカッコ悪いんですよノーノー
しかも、スクロールさせるとその背景が真っ白になっているので大問題汗

そんな訳で、その案件はもう少し調整が必要みたいですポロリ
やっと終わったと思ったのに・・・。

誰でも同じように見れるHPって、作るの大変ですね汗

Flashって大変

仕事で、フルウィンドウ(swf自体をブラウザウィンドウいっぱいの大きさ)のswfを背景に敷いて、htmlでコーディング(html自体は普通のもの)するって事をやろうとしていて、とても苦労をしました汗

ウチの会社で作っているHPって、そんなに凝ったデザインのものは作っていないので初めてづくしで大変でしたたらーっ

最初にflashを背景に敷いてhtmlでページを作るやりかたを紹介しているサイトを隣の席の子に教えてもらって、実践してうまくいったのですが・・・残念なことにIE7には対応していなかったみたいで表示されませんでしたポロリ

downやり方を紹介しているサイトdown
http://blog.design-life.jp/?eid=222291

これのサンプル2がそうなのですが、どうも私がコーディングしたページには合わなかったみたいで表示が全くされませんでした。

原因はやっぱりz-indexがいけないみたい。

このやり方は簡単に言えば、z-index:-1でflashを一段階下に設定して、htmlを上に乗せる方法です。

IE6とFirefoxでは、htmlの大元にz-indexを設定しなくてもflash自体に-1が設定されていれば下に潜ってくれるんですけど、IE7はちゃんとhtmlのコンテンツにもz-indexを設定しなければいけないみたいです。

結局、jsは使わないでcssでflashとコンテンツに大枠を作って設定をして入れました。
flashも結局は直でソースに書いて入れたので、SEOもあんまり反映されないくらいソースの長いものになってしまいましたノーノー
もっと知識があればよかったんですけどね・・・。

それと、直でflashを入れたところに
'wmode', 'transparent'
をいれないと重なる仕様にはならないので注意が必要ですね。

flashの直で入れたソース


<div id="flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','100%','src','fla_img/top','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','.swfを外したファイル名','wmode', 'transparent' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="swfファイル" />
<param name="quality" value="high" />
<embed src="swfファイル名" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object></noscript>
</div>


id="flash"のcssの中身は

#flash {
position: absolute;
height:100%;
width:100%;
top:0;left:0;
z-index:-1;
}

cssと直書きソースのflashの幅と高さは100%にしないとエライことになります汗

で、htmlのコンテンツ部分には「wrpper」って名前で大きくdivで囲ってあげてます。
cssはdown

#wrpper {
z-index:100;
position:absolute;
width:100%;
height:100%;
}

一応これで色々なブラウザで確認できたのでOKかなぁ・・・。
未だにIE6を使われている人が旦那曰く2割はいるらしいのですが、もうIE8も出ているので、諦めて下さいたらーっ
IE6の問題さえなくなれば、私たちの仕事も大分楽になるんですけどね・・・。

以上、覚書でしたたらーっ

今日が終われば休みだっ!

いよいよGWって感じになってきましたね晴れ
明日は昭和の日でお休みで、週末からは5連休ですよーっ!

明日は、この前ブログに書きました「大恐竜展」に行ってきたいと思いますラッキー
楽しみにしていたので、早く明日にならないかなー♪

久しぶりに上野に行くので、駅周辺の工事は終わったかな?
最後に上野に行ったのは、旦那のお友達に芸大に通っている人がいるので、都美館だか現美館だかで卒業制作展があったので行ってきました。
それが去年の3月かな。
物凄い風が強くて工事用の看板が吹っ飛んでいたのをよく覚えていますたらーっ

芸大生の作品はとても面白いのがありましたねイヒヒ
自分が学生だった頃を思い出しましたニコニコ
一応、私も(芸大と比べるに値しませんけど)芸術系の学科の短大に行っていました。
ま、専攻がプロダクトデザインだったので、絵画や彫刻とは全くの無縁でしたけど汗

たった2年の短大で、12コースある中から選ぶために貴重な半年を使って全てのコースの授業を受けました。
それから、面談があって専攻コースを選ぶって形でしたよ。

ま、半年しかないのに、12コース分を受けるんだから大変でしたねたらーっ
それなりに宿題も出されたので、夕方まで授業をやってから家で宿題(作品作り)したり。

だからね、自分が希望したコースに行きたくても人数の関係やその人の宿題(作品)を見て、違うコースの方が伸びそうだったら違うコースにされたりする人もいました。
だから学校辞めちゃったりする人もいましたよノーノー
幸い、私は希望していたコースだったので楽しく2年間通えましたけどね。

芸大とか、他の美術系の学校だと受験の時点でコースが決まっているからこんなことはないですよね。


今のお仕事は学生の時の勉強とは直結していませんけど、デザインをやっているのは変わりませんね。
元々プロダクトデザイン(工業デザイン)ってアートではなく、使いやすい物の形って事なので、今のwebデザインとちょっとだけ近いです。

webって万能ではないし、制限も沢山あります。
その限られたところで最大限に魅せるって言うのは、言うのは簡単ですけど視覚化させるのってとても難しいですよねたらーっ

なので、いつも思うのですが私たちの仕事はデザイナーであって、アーティストではないんです。
よく間違われるんですけど、アーティストではないです。

だから、アーティストだと思っているwebデザイナーは、余程コーディング能力があるのか、はたまた唯のなんちゃってデザイナーかのどちらかですね。
言い方がすごく悪いですけど、コーディングの事を考えてくれないデザイナーは最悪です・・・モゴモゴ

なのでいつもサイトデザインをする時に、私がデザインしたものを他の人がコーディングをするって事になるのが一番ドキドキします汗
いつも私が他の人のデザインのコーディングをする時に、やりにくいデザインだと物凄く文句を言っているので・・・たらーっ
私もそう思われているのかなーと考えるだけで恐ろしいですムニョムニョ


・・・最近ブログ書いてて最後は落ち込んでるパターンが増えているよーな・・・

でも今日が終われば明日は恐竜展だ♪
あと半日弱を頑張ろうてれちゃう

カレンダー

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728   
<< February 2018 >>

お気に入りグッズ

お気に入りグッズ

36ピース クムクムパズル 映画妖怪ウォッチ 誕生の秘密だニャン!  フユニャン
36ピース クムクムパズル 映画妖怪ウォッチ 誕生の秘密だニャン! フユニャン (JUGEMレビュー »)

妖怪ウォッチクムクムパズルの第四弾!ついにフユニャンも立体商品化!

お気に入りグッズ

お気に入りグッズ

お気に入りグッズ

32ピース クムクムパズル 妖怪ウォッチ コマさん KM-55
32ピース クムクムパズル 妖怪ウォッチ コマさん KM-55 (JUGEMレビュー »)

なかなか妖怪ウォッチ関連でフィギュアが出ないね〜

お気に入りグッズ

フック ブック ロー 日々はんせい堂 あきない中 [DVD]
フック ブック ロー 日々はんせい堂 あきない中 [DVD] (JUGEMレビュー »)

ついに新作DVDキタ━━━━(゚∀゚)━━━━!!…そろそろブルーレイにならんかね?

お気に入りグッズ

NHKフックブックロー ラブをプレゼント
NHKフックブックロー ラブをプレゼント (JUGEMレビュー »)
TVサントラ,谷本賢一郎,中尾隆聖,折笠富美子,天野ひろゆき,浦嶋りんこ
待望のフックブックローのCD第四弾!

お気に入りグッズ

NHK フックブックロー あした元気になあれ
NHK フックブックロー あした元気になあれ (JUGEMレビュー »)
VARIOUS
待望の第三弾!! 「おいかけるんだ青い鳥」、「ありがとうアンデルゼン」を含む22曲収録ですよー

お気に入りグッズ

NHK フックブックロー のんびりいこうよ
NHK フックブックロー のんびりいこうよ (JUGEMレビュー »)
VARIOUS
フックブックローのCD第2弾!お母さんも大好きな曲が収録される予定!

お気に入りグッズ

NHKフック ブック ロー ちょっと 深呼吸
NHKフック ブック ロー ちょっと 深呼吸 (JUGEMレビュー »)
ヴァリアス
息子ちゃんが大好きな番組。録画して見せると喜びます。

お気に入りグッズ

モンスターハンター絵本〈1〉アイルー・メラルーとニャらめっこ! (カプコンオフィシャルブックス)
モンスターハンター絵本〈1〉アイルー・メラルーとニャらめっこ! (カプコンオフィシャルブックス) (JUGEMレビュー »)
清野 義孝,竹越 ななお,カプコン『モンスターハンター』開発チーム

この絵柄のアイルー好きにはたまらない絵本!!一緒にニャらめっこし〜ましょ♪

お気に入りグッズ

モンスターハンター絵本〈2〉チャチャとアイルーの元気にあいさつっチャ! (カプコンオフィシャルブックス)
モンスターハンター絵本〈2〉チャチャとアイルーの元気にあいさつっチャ! (カプコンオフィシャルブックス) (JUGEMレビュー »)
清野 義孝,竹越 ななお,カプコン『モンスターハンター』開発チーム

アイルー絵本その2!これまたアイルー好きにはたまりません!!

最近の記事

記事の種類

過去の記事

コメント

トラックバック

  • 花火大会の季節ですね
    花火
  • 一番くじモンハン日記ぽかぽかアイルー村の詳細
    教えてください
  • 使いやすい携帯機種ってどこだろう・・・
    これ欲しい

ブログ内検索

書いてる人

リンク

その他RSSなど

Twitter

携帯でも

qrcode

ブログ元

無料ブログ作成サービス JUGEM