なないろブログ

ＸＨＴＭＬ＋ＣSSで作られた１枚の基本ページをもとに
楽天サイトのテンプレや各ページを作っていく仕事をした。
　
もとになるページがあるなら
わりと単純な作業なのかなと最初は思っていたのだけど
やってみるほどに色々と大変ことがわかってきた。
　
goldといわれるところに置くページは
楽天の外に置くのと同じように特に制約なく作れるのだけど
それ以外のところのページは
自分でさわれるところが限られていたり
外部リンク・外部スタイルシートが使えなかったり
ごく一般的なタグ以外は使えなかったり
文字数が限られていたりする。
　
普通のサイトを作る時のスタイルシートは
いったんそれぞれのブラウザのもってるスタイルをリセットして
標準的なタグにスタイルをつけていくことで統一感を出すんだろうけど
楽天のテーブルの中、楽天のスタイルが効いてる中で
基本的なタグにスタイルをつけてしまうと
スタイルが変な入れ子になって表示がおかしくなるところも出てくる。
　　
かといって基本的なタグのスタイルを削ってしまうと
ページの共通部分のデザインが崩れてしまう。
タグ自体でなくクラスにスタイルを付け替えられるところは
付け替えてみたりもしたけど、それもできないところもある。
だいたい＜body＞の決まった位置にしかスタイルを書けないし。
　
置き場の違うページを同じ表示に見せるためには
違うスタイルをつけないといけないみたいで
結局、何パターンかテンプレートを作ってみた。
（何か更新があるたびに、それぞれのテンプレを書き換えることになる…）
　
これは１回自分で整理しておかないと大変なことになるぞ、と思って、
ランチが中止になった日は
自分がやった作業とか、それぞれのテンプレの意味とか
これから考えないといけないこと・直さないといけないことなんかを
ひたすら紙に書き出して整理してみた。（結構、色々と問題がある…）
　
誰か教えて～助けて～と思っていた時もあるけど
それぞれに違うことだし、聞きようもないので
結局、自分で考えるしかないよね～。
　
ちょっとだけ余裕が出てきて他のサイトを見てみれば
何だ、他のサイトでも崩れてるわ、と思うところもあれば
制約の中でも工夫されてるな～、と思うところもあった。

何にせよ、そうやって普段から意識して見てないとダメですね。

自分のつくるページは
ほやほやぁっとした色になりがちで
派手な色や濃い色を使ったからといって
なかなかパキッとした感じにならないなぁ、と思っていたところ、
同じような仕事をしている人たちから
”色彩検定を取得しました”、”これから目指します”、というような声を聞いて
気になってきた。

履歴書に書く資格はいらないし、
資格をとったからといって、すぐに今の仕事に役立つかはわからないけど、
興味を持てる分野の知識を深めるための目安・目標として
資格取得というのもいいんじゃないかなぁ、と思って。
（もちろん仕事に役立てば、ありがたいし。）

色彩関係の資格には３種類あるんだけど
私が目指すのはたぶん受験者も１番多いA・F・Tの色彩検定。

まずは３級を目指すと思うんだけど、試験が６月と１１月にしかない。
今年の１１月の受験はもう申し込みが締め切られているし、
受け付けていたとしても勉強が間に合いそうにない。
とはいえ、来年の６月ってずいぶん先の話だな～。
時間がたっぷりあるとモチベーションも下がりそうで怖いわ。

２００８年冬にテキスト改訂がある、とサイトに書いてある。
さすがに、それを待ってたら完全にモチベーション下がりまくりだから
やっぱり６月をぼちぼち目指すことにする。
やり始めてみたら時間が足りない、とか言ってたりして…
普通の人ってどのくらい勉強期間かけるんだろう。
記憶力の低下してる私は普通の倍はいるものね～。

まぁ、また１つ楽しみが増えるかな。（苦しみも？）

パソコンの画面からはみ出してる、
スクロールしないと見えないところまで含めて
WEBページをまるごとキャプチャーしたいのだけど…と困っていたら
ariariさんが教えてくれたツール。
他の皆さんにも役立つかもしれないのと、自分の覚え書きにメモメモ。

◎Pharmacy
＞ダウンロードはこちら

普通のブラウザでするように
PharmacyでWEBページを開いて
jpgとかpngとかbmpとか希望の形式を選択して、キャプチャーボタンを押すと
自動的にPharmacyの置いてあるフォルダに書き出せる。

便利なのは、そのままのサイズの画像ファイルの保存だけじゃなくて
希望サイズのサムネイル画像も保存できること！！
それから、ファイル名のつけ方の指定もできること！！
あと、フォントサイズも最大とか中とか指定できること！！

もう１つご紹介いただいた
◎Capture It!
＞ダウンロードはこちら

こっちは、ブラウザに備えておくツールバーで
IE用もFirefox用もある！！
そして、私が今回、求めてた以上に多機能。

画面に表示されてるブラウザ全体のキャプチャー、
画面に表示されてるブラウザのうち
メニューバーやツールバーの部分を除いたページ部分だけのキャプチャー、
画面に表示されていない部分もスクロールして含めたキャプチャー、
ドラッグで範囲選択した部分だけのキャプチャー、
と使い分けられる。

今回の目的とは違うけど、
範囲選択した部分だけのキャプチャーはとっても便利。
今まで、プリントスクリーンしたものをトリミングしたりして使ってたから。
プレゼンとかする機会の多い人なら、私よりずっと役に立ちそう。

有料版だと、色んな形式で書き出せるけど、無料版ではjpgのみ。
jpgで問題ナシだけど。

さらに、WEBページに限らず、
プリントスクリーンをより簡単により詳細にできるツールも紹介してもらった。
◎Winshot
＞ダウンロードはこちら

マウスポインタの形なんかもうつるから
Word、Excelのインストラクションやテキスト作成なんかに便利だったかも。
あと、こっちもプレゼンにもよさそう。

ホームページ上でファイルサイズを抑えるため
縮小画像の一覧で表示しておいて
より詳しく画像を見たい時には
その画像をクリックすれば
拡大画像…というか本来の大きさの画像を
別窓に表示できる、という風に使ってきた。

ページにアクセスするやいなや
勝手にポップアップウィンドウが出てくるんじゃなくて
クリックするという行為で表示させるわけだから
別に悪くはないと思うけど、
タブブラウザも増えてきた今、
もうちょっと違う方法はないのかなぁ？と検索してみた。

２つ見つけたんで、両方入れたサンプルページを作ってみた。↓
http://www.nanairoweb.com/test.html
（今どきの…って書いたものの、ちょっと前から結構使われてるみたい。）

１．lightbox.js
lightbox.jsのダウンロードはこちら　＞＞　
lightbox.jsの設置の参考ページ　＞＞　

画像をクリックすると、大きい画像が表示される。
その他の本文の部分がグレーアウトした背景になる。
閉じるボタンを押すか、背景部分をクリックすることで元に戻る。

２．Highslide.js
Highslide.jsのダウンロードはこちら　＞＞
Highslide.js設置の参考ページ　＞＞

画像をクリックすると、大きい画像が表示される。
出てきた大きな画像はドラッグで移動もできる。
シャドウをつけるとかCSSで色々、カスタマイズもできる。
画像を再度クリックすることで元に戻る。

１．の方は結局、別窓を開くのと一緒かなぁ。
あと、時々、うまく動作しなくてリロードすることもあった。

２．の方は直感的に操作もわかりやすいし、何かスマート！かっこよさげ。

ただ、２の方は商用の場合、有料。30ドル。

別に払いたくないわけではないのだけど
払い方がよくわからないっていうか、
海外に支払いってのが何かわけもなく不安。
PayPalっていうの？支払いをクリックしてみると
クレジットカードでごくごく簡単に支払いできそうな風だけど
ごく簡単にってのが、また心配でね～。

こういう感じのスクリプトをフリーで公開しているところ、
または、有料でもいいから、せめて国内のサイトで公開してるところ、
ご存知の方がおられたら教えてほしい。
（もしくは、同じような動きをするスクリプトを作ってあげるよ～、とか。）

お客さまのところのPCはWindows Vista。Office2007でIE7。

一度、Microsoftの説明会に行ったとはいえ
実際に自分のモノとして使ってみたことないんで、いちいち新鮮。

今までになかった最新版ならではの機能を実感するというより
とにかく、モノのありかと入り口が違うんで
何をやるにもまずは、どこ？どこ？どこ？って探す、探す、探す。

なかなか良い勉強をさせてもらった。おもしろい。

と言いながら、どんなに探しても
絶対に見つかるはずのないモノも探してた。
Outlook　Express。ボケボケ。

おまけに、最初、メールの送信がうまくできなかったんで
まずはVistaのせいか、と思ってみたけど違ってた。
（何でもVistaのせいにしてみる。）

検索したら、
プロバイダによって、迷惑メール対策として
25番ポートブロック（Outbound Port25 Blocking）を実施して
サブミッションポートを提供してるため…だって。
実施してるところ結構多いんだわ。

サブミッションポートを利用してメールを送信する

迷惑メール対策@nifty＞niftyの取り組み

「ツール」の「アカウント」で該当メアドの「プロパティ」を開く。
↓
「サーバー」タブの「このサーバーは認証が必要」にチェック。
↓
「詳細設定」タブのサーバーのポート番号･送信サーバーのところを
25から587に変更。

ふ～、私もVistaっていうか、新しいPCが欲しいなぁ。

１つえらくなった。CSSの覚え書き。

作ったページの一部が真っ白で文字が表示されない。
一度、ドラッグして文字を反転させてみると
ちゃんとCSS（スタイルシート）が反映された文字表示ができるようになる。
…という現象で、ちょっと悩んでた。

検索して最初にHITした
IEでページが真っ白になる謎現象
とか
インターネット・エクスプローラー（IE:Internet Explorer）の画面が真っ白問題
あたりでは、
「metaタグでcharsetの定義を正しく記述。
　titleタグはcharsetの定義の後に記述。」
というのが原因＆解決法として出ていたけど、今回の私の場合には当てはまらなかった。

結局、ビンゴだったのは、
背景色を指定したブロック要素内にフロート配置した要素があるとき、
ブロック要素内の文字列が消える。（IE6）

「IE6には、
背景色を指定したブロック要素内にフロート配置した要素があるとき、
ブロック要素内の文字列が消えてしまうバグがあるので
親要素の幅をwidthプロパティで明示することで回避できる。」

助かった。

Internet Explorer (Windows) CSSバグリストのページは今後のためにブックマーク。

いや？？？前にもブックマークしたような…

3/29からハー・ストーリィでテストバージョンが開始された、
女性限定SNS「My Story」というのに参加してます。

～今度は「私」をプロデュース～　女性だけの自分時間向上コミュニティ　「My Story 」
何だか名前もいい感じ。

ハー・ストーリィのSNSというので
在宅ワーカーさんがたくさんで、お仕事関係の話を色々するところかな？
と思っていたけど、
意外に専業主婦の方が多く、フルタイム勤務の主婦も独身の方もおられて、
今のところ、お仕事うんぬんというより女性同士のんびりお話できるところ、という感じ。居心地は悪くない。というか結構いい。

それにしてもSNSって
こんな風にできていくのか、って見てるのが１番面白い。
（今までに参加したSNSって、どれももう出来上がった状態で参加したから。）

コミュニティが少しずつできていく。
人と人とが少しずつつながっていく。

どんどん人と仲良くなるのが得意な人、
ハッと目につくタイトルや、中身の面白い日記を書いてる人、
コミュやトピをうまくまとめるリーダー肌な人、などなど目立ってて
そういう人が広げていってる。

テスト版から正規版になるのが楽しみなような
このままずっとコンパクトであってほしいような、、、
いや、やっぱり広がってたくさんの人と出会いたいな～。

幾つか参加しているSNS。
mixi以外はあまり使ってなかったかも。
でも、ご無沙汰してる間に機能が増強されてたり
雰囲気が変わってるところもあるだろうし、
いま一度見直してみようかな。
見逃してる面白いこととか便利なこともあるかもしれない。

それと最近、SNSの種類も増えてるから
まだ入ってないところで役に立つところがあるなら入ってみたい。
「女性限定」っていうのも、他にも色々あるんだろうな。
しかし、「男性限定」っていうのはSNSに限らずあまり聞かない。。。

↑を読んでの参考URLのごくごく一部。
ほとんど英語なんで使うかわからないけど、一応、メモメモ。

●Yahoo! UI Library : Reset CSS
ブラウザごとの各要素のデフォルトスタイルをいったんクリアするためのCSS。

それに関連して
Yahoo! UI Library : Fonts CSS
ブラウザごとのフォントのデフォルトスタイルをいったんクリアするためのCSS。
Yahoo! UI Library : Grids CSS
CSSレイアウトのテンプレート。
YUI : CSS Grid Builder
↑のテンプレをカスタマイズするツール。

●CLEANCSS
自分で書いたCSSの省略できるところ、まとめられるところなど整理して
CSSをコンパクトにしてくれる。

●The CSS Tinderbox
CSSレイアウトのテンプレートをダウンロードできる。

●The Dynamic Drive CSS Library
CSSでデザインされたメニューのサンプルなどたくさん。（◎）

●CSS Tab Designer　
CSSでタブデザインするためのソフトを無料ダウンロード。（◎）

●CSSVista
CSSを編集しながらIEとFirefoxで同時にプレビューできるソフトを
無料ダウンロード。Firefoxだけなら、他でもこういうのできたよな～。。。

●I Like Your Colors
お気に入りのページのURLを入れると、
そのページのHTMLとCSSから使われている色を教えてくれる。
（使わないかな）

フォント探しの覚え書き

和文フォント大図鑑
各社の和文フォントのライブラリ。
フリーフォントの紹介。和文フォント関係のリンク。

フォント・ふぉんと・font.com
欧文・カタカナ・ひらがな・イラストフォントのサンプルつきライブラリ。
人気順一覧・新着順一覧あり。
種類やイメージ、使用条件に合わせて検索もできる。
　
アバウトフォント
フリーフォント・試用フォントのリンク集、人気フォントとクリエイターさん達のリンク集、フォントツールのリンク集など。

Multi-bits
カテゴリ・メーカー名・書体名などなどからフォントを検索できる。
指定した文字列で書体見本を確認できる機能も使える。

【DEX WEB】FONT・フォント
こちらも、フランド・書体カテゴリなどでフォントを検索できる。

R*P　フォントのページ
かわいいフォント限定でサンプルつきでたくさん紹介されたリンク集

【無料イエローページ】デザインフォント
無料フォント（一部シェアウェア）のリンク集

お得WEB：無料フォント
無料フォントのリンク集

Vector　各種OS用フォントのページ

窓の杜フォントのページ

色々ながめてると、WingdingsやWebdingsみたいなイラストフォントが楽しくなってきた。

free dingbat fonts
dingbatっていうんですね～。
可愛いのや使えそうなのがたくさん。（商用で使えないのや有料のもある。）
カテゴリで整理されてる。

FREAKy BUNNyのフリーフォントのページ

2dogs　のアイコンフォントのページ

K’s Bookshelf　の　絵フォントのページ

クラゲジルシ　エヌプラス　のダウンロードのページ

いろいろ楽しかったけど、フォント（絵フォント）管理ツールを使わねば
これらを使いこなせまい。

絵フォントの絵を一覧できて、かつ、規約も一緒に保管できるような管理ツールはないかな。

ホームページの色に迷った時、さまよったサイトの覚え書きリンク。

●Mariのいろえんぴつ

「トーン別のカラーチャート」で何となく気に入った色を探したり、
フレームにしなくとも「フレームの配色」でメインになる色の組み合わせを探したりできる。
「トーン別のカラーチャート」内にある「虹色作成ツール」では、基本となる１色のカラーコードを入力すると、それに合う６色・１２色を提案してくれる。

●色とJavaScriptで遊ぶD.Project

「配色ツールColorMatch5K」というのが、すご～く気に入った。
基本になる１色をスライダーで微調整しながら探していくと
その色に調和する６色を自動で表示してくれる。

「ホームページ配色シミュレーション」なんかも参考に。

●Color Slider－配色／色見本

カラースライダーで微調整するか
直接、カラーコードを入力することで選んだ色を、
背景色や文字色としてあてはめて、すぐに画面でプレビューできる。
カラーだけじゃなく
文字サイズや行間なども一緒にシミュレイトできるのが便利。

●ホームページ作成を楽しもう！◇ホームページキッチン

もう既に、ページに表示されない部分なんかもあるんだけど
「配色」のページがちょこっと参考に。
　
●WEBデザイナーのすすめ

「困った時のカラーイメージ」がちょこっと参考に。

●色のみじん切り

「グラデーションツール」が便利。
基本の１色を指定すると
色相・彩度・明度など変化させた10段階の色を表示してくれる。
基本の２色を指定すると
２色間で変化する10段階の色を表示してくれる。

●色の印象大事典

イメージごとの配色サンプルが少し。

●Netcocktail　（英語のサイト）
水色系、オレンジ系など色みを選ぶと
その色を使ったサンプルサイトが幾つか表示される。
他の色との組み合わせ・色の分量や使い方など参考になるかな。

●Cool Homepages Web Gallery　（英語のサイト）
かっこよすぎるけど、色んなサイトのデザインをぼーっとたくさん見られる。