2007年9月14日 (金)

今度はコメント欄が不具合中?!

 前回の「ココログから返事が来た」の記事に、コメントを頂いたのでお返事を…とコメントフォーム内に書き込んで、「確認」画面にしたら、文章の半分しか表示されなかった!

 どうやら、その記事のコメント欄だけで他の記事では大丈夫のようだが、この不具合についての質問をココログサポートへ問い合わせたところ、要約すると「こちらで確認したところ正常です、カスタマイズが原因か動作環境によると考えられます」というような内容の回答が寄せられた。

 CSS編集は前回7月のメンテナンス以前からいじってないし、今まで何でもなかったのに、突然1記事のコメント欄だけがおかしくなるなんて、変だと思うのだが…?
 カスタマイズしていないテンプレートで確認してくれるようココログサポートからいわれてるんだが、もはやその気力も枯れてきた。

 そして、寄せられたコメントによると、IE7ではこのブログのテンプレートは崩れているそうで、どうやらブラウザ毎の確認もしなくてはならないかもしれない。
 う~ん、何でこんなに記事を投稿する以外の事に手間隙がかかるのだろう。そっちばかりに気をとられて記事は一向に進まない(これは言い訳かも…)。

  コメントをくださったHachi-koさんには、お返事が出来ず
申し訳ないですm(__)m
 それと貴重な情報をくださって有難うございます!

| | コメント (0) | トラックバック (0)

2007年8月19日 (日)

ココログから返事が来た

長い事ほったらかしていた、本文の罫線の不具合についてココログサポートから次のようなメールが届いていた。

 平素はココログをご利用いただきありがとうございます。
 ココログサポート窓口 田村です。

 はじめに、対応までにお時間を要し、回答まで大変お待たせしたことをお詫び申し上げます。

 お問い合わせいただいた件について回答いたします。

 ご連絡いただいたココログのレイアウトが崩れる症状については、弊社で確認のうえ、 7月31日に実施したココログのメンテナンスにより修正を行なわせていただきました。

 はっさく様の環境からでは現在状況はいかがでしょうか。もし、現在も症状が発生している場合、症状の詳細についてご記入のうえ、お知らせくださいますようお願いします。

 現在私のパソコンが不調な為に、あまりパソコンの前に座る機会が無かったので、つい見逃していたのだが、前回のメンテナンスの際にちゃっかり修正していたらしい。

 この件で最初にココログにメールをしたのは…4月で、かれこれ4ヶ月 も経っているが、いつかは必ずや連絡がくるだろうと思っていたので、比較的のんびりと構えていた。

 ココログとのやりとりは以下に記述しておくが、かなりはっさく流に要約しているので、細かい言葉尻に引っかからないように。
 まぁ、大体こんな感じのやりとりがあったのである。

[はっさく] 本文の罫線が消えてしまう、と問い合わせ。
[サポート・五戸] カスタマイズしているテンプレートのサポートは致しかねるとの回答。

[はっさく] CSS編集画面ではなく、テーマの変更から設定したが、罫線が正常に表示されない、と問い合わせ。
[サポート・五戸] 当窓口で確認したが正常。カスタマイズされていないカスタム・テンプレートでご確認ください、との回答。

[はっさく] 指示に従いデフォルトのカスタム・テンプレートで試してみたが、やはり同じ不具合発生中。IE6とSleipnirで確認。
[サポート・川村] FirefoxとOperaでは正常、IE6とSleipnirで不具合を確認。cssの記述が影響を及ぼしている可能性もあるので確認を、との回答。

[はっさく] だからっ、デフォルトの(つまりcssの記述のないテンプレート)でもダメなんだってば!…例えば、マイリストは関係ある?という内容を丁寧な言葉に変換して、問い合わせ。(←この辺から切れ掛かっている)
[サポート・川村] マイリストが原因である可能性も考えられるので、原因をつきとめる為にマイリストを1つずつ非表示にして確認を、との回答。

[はっさく] やっぱりダメみたい…の報告。
[サポート・大金] 確認しますのでしばらく時間ください、との回答。

[はっさく] どの記事だとテンプレートが崩れるか各カテゴリーごとに確認して、ココログに報告。
[サポート・佐々木] 引き続き確認作業中です。しばらくお待ちください。

[はっさく] 閲覧者の方から、カスタムcss編集でコメント欄の横幅を狭めると改善されるとの情報をいただきココログへ報告。ただし当ブログでは、これはココログ側で初期設定を直すべきと考え現状のテンプレートを維持。
[サポート・岡] 情報有難うございます。参考の上継続して確認させていただきます。結果が出るまでお待ちください。

………と、この5月6日の回答を最後に連絡が途絶えた。

 そして8月6日に、やっと上記のようなメールが着たのである。
ココログの「しばらく」は、“数ヶ月”であると心得よう、という教訓記事になってしまったけど、 少なくとも私のパソコンが原因ではないと分かったし、サーバー側のミスも直った事だし、まぁ一件落着って事で手打ちにしよう。

 以前にも別件で約二ヶ月後に回答が着いた経験があり、遅くはなるけど必ず何かしらの回答をくれるだろうと、半ば強引な自信と信頼を寄せていたので、「あぁ、一見忘れているようで、やっぱり憶えていてくれたのね」と、最近音信不通になっていた友達から久々にメールが来たような感じ。

という訳で、私より先に気付いた人もいるだろうが、本文の横幅を500pxに設定していて、罫線で囲んで右側の線が消えていた人、もう直っている筈である。 かりに、CSS編集の記述で応急処置していたなら、その記述は削除して大丈夫。

めでたし、めでたし!

【200.08.19 追記】

 「カスタマイズ」のカテゴリーだけ、
まだ不具合が残っているではないかっ!!
はぁ~。

| | コメント (7) | トラックバック (0)

2007年6月23日 (土)

本文右側がはみ出す不具合を
カスタムCSS編集で直す

  以前から記事本文右側の罫線が消える不具合(つまりはみだしてしまうんだけど)を、ココログへ問い合わせていたものの、明確な回答の無いまま一ヶ月がたってしまった…。

  忘れているんだか、面倒くさいので避けてるんだか、直せないんだか知らないが、連絡がない。

  この不具合、ユーザー側がちょっとCSS編集に記述すれば解決出来るのは、わかっているのだけど、「本文を500pxにして罫線で囲む場合は、自分で直して下さい」って仕様は、どうなんだろう?!と思っている。

 ので、是非デフォルトで調整してもらいたく、未だ現状を維持しているのだが、いくら呑気な私でもそろそろ限界が近づいて来ている。

  私だけならともかく、他のユーザーの方でも同じ不具合が発生しているらしい。
 そういう方でサッサと直してしまいたいという場合は、CSS編集画面に以下の記述を追加すると改善されるので、参考にしてとっとと直してしまおう!

textarea#comment-text { width :450px; }

 (450pxはこの位なら大丈夫、という数値なので変更が可能) 

ちなみに、本文が400px(推奨)のテンプレートなら大丈夫なようだ。

| | コメント (2) | トラックバック (0)

2007年4月28日 (土)

カンタンな壁紙背景を作った

  調子に乗って、シンプルな壁紙を作ってみた。
  これなら絵心は無くても、誰にでも出来るじゃないか、と思ったので画像編集ソフトで(ペイントでも可能)作る時のコツを紹介!

  画像は小さければ小さい程、軽くなっていいのだが、作業中は拡大して作るので、あまり小さいのも見づらいので、今回は「32pxの大きさに、4pxの正方形のドット」という画像を作る。(作業中は拡大して)

  1. 32pxの新規画面を作成したら、すきな色にペイントツールで塗り潰す。(大抵のソフトではバケツのアイコン)
  2. 新規レイヤーを1の上に置き、四角い選択ツールで4pxの正方形を作り、選択範囲内を好きな色で塗り潰す。
     このレイヤーの複製をもう一つ作っておく。
  3. 4pxの2つのレイヤーを下の図の場所に置く。
     ※ 下図では分かり易くするために、4px単位で補助の線をいれているが、これは説明用。

     4pxの正方形を動かしたりす刷るので、定規やメモリを表示出来た方が作業がスムーズである。
     どんな大きさでも、1つのドットの倍数で画像の大きさを決めれば、うまくいく。 
  4.  3つのレイヤーを統合して(レイヤー機能のないソフトではそのまま)、拡張子をgifかjpegで保存する。
  5. 作品が出来たら、サーバーにアップローでして、ココログなら
    「コントロールパネル」⇒「ファイル」⇒新規ファイルをアップロードする。
     画像のURLアドレスを控えておく。(コピー&ペーストでよし)
  6. カスタムCSS編集のボックス内に、次の記述をする。

    body {
    background-image:url(ココに画像のURLアドレス);
    background-position: top left; }

  7. 「変更を保存」して「反映」したら、ブログを表示して確認してみて!

 以下に調子に乗りついでに、いくつか壁紙を作ってみたので、
良かったら使ってくだされ。

注)ただし商用/直リンクは不可です。   見本はこちらから

                     
     
                  
        (見づらいけど、二段目は丸い水玉の模様)

| | コメント (0) | トラックバック (0)

2007年4月27日 (金)

画像を縮小してアップロード・JTrim編

 以前から聞きかじっていた「JTrim(ジェイトリム)」をダウンロードして、これで画像サイズの縮小をしてみた。

 最近、「JTrim」をはじめ「Windows Live Writhr(β版)」や「Winshot」などフリーウェア(無料)のソフトを立て続けにインストールして、あれもこれもと欲張っているお陰で、どのソフトに関しても“かじった”程度にしかならず、とことん知り尽くす所までは至っていないんだが…。
 そんな触りだけしか分かってない私でも、「JTrim」でココログにアップロードする為に(他のサーバーでも可能)画像を縮小する作業はどうにか、出来る様になった(…つもり)。

  具体的にどうやってアップロードすればいいのか?
  おそらくどの画像編集ソフトも基本的には、する事は同じである。

 初めてチャレンジする人には、コピー(複製画像)で作業する事をオススメする。(万が一の為に…)

  で、大雑把に言えばする事は、次の3つ。

  1. 起動して、元画像を開く。
  2. ブログに合う(又は好みの大きさに)ピクセル数を変える。
  3. 保存して、後はブログにアップロードする。

  これだけで、縮小して軽くなった画像を、余計な負荷なく載せられる。
  これはどの画像編集ソフトでも同じ。
   開いて→数値を変えて→保存する
  画像編集ソフトによって、「何処をクリックするか」が違うだけである。そんなに難しい事ではないので、是非覚えておこう!

            ◆ 今回の表示サイズ ◆
 ココログの本文画面が、推奨の「400px」横幅であると仮定して、操作する。
 実際には左右に余白が15pxずつ、合計30pxを差し引いた370pxが最大の横幅になっている。
 つまり、これ以上だとNG!
(500pxでも同じく30pxを差し引いた470pxになる)
 という事で、ポップアップやサムネイルにしない「事前に縮小してアップロードした画像、そのままを表示する」事が今回の目的。

1.JTrimを起動して、必要な画像を開く。
 左上の「ファイル」をクリック ⇒ 「開く」をクリック ⇒ 開いた別窓から縮小したい画像を選ぶ。

       

2.ピクセル数を変える。
 「イメージ」をクリック ⇒ 「リサイズ」をクリックする。
       
 別窓が開くので、まず【縦横の比率を保持する】にチェックが入っているか確認する。
 それから、「サイズで指定する」の下にある“横幅”の数値を変える。
「縦横の比率を保持する」にチェックが入っていれば、“横幅”を変える事で同時に“縦幅”の数値も変わるので、ワザワザ変える必要は無い。 
         
 変えたら「OK」ボタンをクリックする。

3.保存。
 「ファイル」をクリック ⇒ 「名前をつけて保存」をクリックする。
(元の画像とWeb用の画像とを区別する為)
 必ず小文字の英数字で保存する事。
       

 以上で終了。
後はアップロードするだけである。
(ココログでのアップロードの仕方は使い方ガイドにある

 

 「JTrim」はデジカメ派にはとっても便利な仕様になっていて、Windows office ツールにある常駐ソフト「Microsoft Office Picture Manager」よりシンプルで軽く、「ペイント」よりいろんな事が出来るソフトである。

 ただし、イラスト等のデザインをしようとすると「Photoshop」や「GINP」程の性能は求められないようだ。
 何しろ“レイヤー”が無い…。
 と言う事は、画像を直に加工する事になってしまうのだ。

 デザインに使うソフトには、たいがい「レイヤー」という機能が存在している。
 元画像の上に透明のフィルターのようなモノを乗せて、そこに文字を入れたり色を重ねたりする、アニメのセルに似たようなもの、これを「レイヤー」という。これだと、仮に失敗してもそのレイヤーだけをやり直したり削除するだけで、元画像は無傷である。
 「JTrim」にはそのような機能が見当たらない(まだ知らないだけかも)。
 あと、同時にいくつもの画像が編集できなくて困った…。
 ペンやブラシのツールが見当たらない。
 移動するアイコンは無く、移動する時の動作やキャンパスのサイズ変更が、何やらめんどうである。
 など、欠点はいろいろあるが、これ等は使い慣れてないせいかも知れず、取りあえずは写真を縮小するだけという人には、充分な機能を備えた優れもの!

「JTrim」のサイトはこちらから

| | コメント (2) | トラックバック (0)

2007年4月18日 (水)

携帯からの投稿

 ココログが携帯から投稿出来るようになったという事で、
早速試してみようと思った。

  まず管理画面へIDとパスワードを入力。(詳細はこちら
  書き込みは英数字だけに限られているようなので、一文字ずつ…は、面倒くさい。
 ひらがなは使えないので、ユーザー辞書機能は役に立たないが、定型文として登録しておけば大丈夫のようだ。
( 一応管理画面トップページもブックマークしておく。)

  記事作成画面はどうやらプレーンテキスト使用!
  これでは色調や強調タグはユーザー辞書に登録しておかないと大変面倒なことになるんじゃないのだろうか?

  HTMLをしらない初心者は、「記事一覧」ページを見たら文字化け?と思うかも知れない。

 画像は基本的には無理と思っていい。
  ただし、既にファイルにアップロードしてあって、URLアドレスが判っているならリンクタグを使用すれば出来るはず(やってないから未確認)
 送受信出来る文字数は全角で512文字…?。

 ということで、本当はこの記事を携帯から投稿しようと思ったのだか、文字数オーバーして送れなかった!

  過去の記事も、私のようにダラダラと長文を書いていれば、携帯の機種によっては全文は読み込めないので、編集がしづらいかな。
(FOMAだけ?普通のメールは2000字いけるのに…)

 リンクしたりAmazonのアフィリエイトをしたりは難しいかも(事前にリンク先urlやHTMLソースがわかっていれば問題ないけど)。
 ping送信先も、ココログでフォローしている所だけなので「ぶろっぐぴんぴん」使用者は後々パソコンから送信が必要。

 ただ、 コメントやトラックバックを閲覧出来るのは嬉しい。
 表示・非表示の選択も出来るので、スパム対策をしている場合は、読んだ後に公開も削除も可能。

  複数のブログも選択して管理出来るようになっているので、外出先や、休憩時間にスパムを一気にやっつけようという時に、携帯電話でサクッと片付けられるので楽チン。

 結論としては、文章だけのHTMLを使用したテキスト投稿をするなら使いやすく出来ていると思う。
 でもモブログに馴れている人は、そっちの方がいいかも知れない。
画像送れるしね。

  今回のサービスは、いずれ完全にリッチテキストで管理出来るようになる為の布石と考えたい
  CSS編集もよろしくね~!

| | コメント (0) | トラックバック (0)

2007年4月 8日 (日)

解像度とピクセル(改正版)

  ココログを始めてまだ間もない人が、デジカメ写真をココログに載せようとして引っ掛かってしまうのが、 「画像が大きくなり過ぎて困る」 のようだ。

 以前に記事にしたのだけれど、自分で振り返るとなんだか稚拙な感じがして、痛い!

  今回ちょっと改正版を作ってみたので、デジカメ写真を載せたい人、私のように自前のイラストを載せたい人の、参考になればいいんだが。
 まぁ、あの頃よりは多分マシだと思うので、多分…。

Oringepen_2

               【用語の説明】

◆ ピクセル(px)

  画像を作っている、一個の点。
「1px」「2px」と表示。

 ドットという場合もあるが、私は
丸い点がドット、四角くて隙間の無いのがピクセルと認識している。
 一般には「印刷物=ドット」・「パソコン内=ピクセル」としているようだ。

ココログ上ではピクセルで通る。

◆ 解像度 (dpi)

  1インチ内に何個のピクセル(点)があるかを示す言葉。

「dpi」という単位は「Dot Per Inch」のやく。

 ココログに限らずネット上は全て共通で、 Windows→96dpi ・ Macintosh (OS 9以下)→72dpi

◆ 画素数

  縦と横の解像度の合計。つまり面積の中の全ピクセル(点)の数。

  見た目じゃ無いのよ、画像は、ハッハ~♪ ……ということで。

  • 印刷用解像度
  • WEB上の解像度
  • ディスプレーの解像度

 それぞれ違うという事を知っておこう。

 印刷物とPCでは、1個の点(px)の大きさが違うから!

   【印刷用の解像度】

 これは面積が決っている所での話と考えると分かりやすい

  日本全国どこへ行っても写真用紙のサイズは決まっている。
  年賀葉書も、B5のノートも規定がある。

 しかし、印刷するプリンターやデジカメの性能によって、1インチの中にある点(ピクセル)の大きさが変わってしまう。

  つまり、同じ面積の中にある点(px)の数や大きさで、「キメが荒い」 とか「キメが細かい」「高画質」等と言っているわけである。

 下図のように、同じ長さの中に点(px)がいくつあるかで、画質が変わってくる。
        

 上の10dpiが低解像度で、下の20dpiが高解像度である。

 明らかに下の方が沢山の色を使っていて、細かくて綺麗。

【WEB上の解像度】

こちらは紙媒体と逆に点(px)の大きさに基準がある所での話。
WEB上では、1つの点(px)の大きさが決まっている。
自分の部屋のパソコンも、会社のも、ご近所さんのも、地球の裏側の人のも(Windows同士なら)どのブラウザで見ても同じである。
 

  Windowsなら96dpi解像度というように、どのブラウザで見ても同じになるよう規定がある。

  ココログを始めると、カスタム・テーマ→本文画面で、幅400px(推奨)とある。
   (リッチテンプレートはない)

  これは400個の点(px)という事。

  つまり決まった大きさの点が、決まった数しか入らないのである。

    

  そこへデジカメからパソコンへ取り込んだものの、縮小せずに数千ピクセルもある画像を載せようとするから 「入らない」現象が起きてしまう。

 これは一見便利なようだが、実はかなりアップロードするのに時間が掛かるはず。
 しかも、そんな高解像度のものを頻繁にアップロードしていたら、容量はあっという間にいっぱいになってしまう。

 やはり画像編集ソフトで縮小してから、アップロードする事を、お勧めするなぁ。

【ディスプレイの解像度】

 友達にメールで画像を送ったら「大き過ぎる」と言われた事ってあるだろうか?

 これはアナタのディスプレイが1280×1024pxで、相手のディスプレイが800×600pxだったから。

 同じ大きさのディスプレイでも、点の数が多ければ一個の点は小さい

 相手は点の数がすくない分、一個の点が大きい。

 だから大きな画像になってしまったというハプニング。

 メールで画像を送る時は、本文内に貼り付けるのではなく、添付するのがマナー。
 沢山の点(px)を読み込んでいる間、受け取り手は何も作業が出来なくなるから!

 以上のように、それぞれ違いがある事を頭の隅にでもいれておけば、ブログを楽しむのも、もっとラクチンになるはずである。

デジカメ写真のデータのしくみとファイルの扱い
―ここがわからなかった!
デジカメ写真のデータのしくみとファイルの扱い<br/>―ここがわからなかった!

| | コメント (0) | トラックバック (0)

2007年4月 1日 (日)

高額画像編集ソフトはもういらない?

 GIMP(ギンプ)はフリーウェア(無料)の画像編集ソフトである
 これがあったら、もうPhotoshopはいらないかも… と見つけた時は嬉しかった!

 まして家庭用として素人サンが、

  • デジカメ写真をブログ用に縮小したり、
  • 以前に記事にしたタイトルバナーや自作のバナーを作ったり、
  • オリジナル年賀状を作ったり、
  • 写真に文字を入れて格好よく加工したりするなら、

 GIMPで十二分過ぎるくらいだ。

  今まで画像編集ソフトと言えばPhotoshop Elementsを薦めてきたけど、家庭用の安いのなら一万そこそこで買えるし、ネットショップ用写真を綺麗にしたいなら、必須アイテムであったからだ。

  でも、どうやら在庫が無いらしい…。
  アドビストアでは既に売ってないみたいだし。
 最新版のPhotoshop Elements 5.0だと4~5万してしまう。

 専門的なワザの必要な人や、勤め先・クライアントがPhotoshopなので、と言うのでなければGIMPで充分!

 GIMP独自の保存形式(xcf)の他に、jpgやgifはもちろんPhotoshop画像での保存形式(PSD)にも対応しているので、 Photoshopを使っていてGIMPのツールも使ってみたいと
思った人も安心!

  画像編集ソフトと聞くと、拒絶反応を起こす素人サンが多いみたいだが、単なる食わず嫌いじゃないだろうか!?

  使い方を全部知る必要は、まったく無い!

  最初はGIMPを起動し、画像をブログ用の解像度に変更をして、アップロードする程度の用途でいいと思う。

  ペイントを使っても出来ないことはないが、こちらはパーセントでの縮小になるので、いちいち 「現在の画像だと横幅が1234…ピクセルだから、これを400ピクセルにするには何%だぁ?」と面倒臭いことになる。
  頭の鈍いはっさくには、こっちの方が難しいのだ。

  その内GIMPに慣れてきたら、いろんなツールで遊んみるといい。

  たとえば、文字を遊んでみる。
「へぇ~、こんな事になるのか」「おっ、文字がメタリックになっちゃうよ」等というお遊びにふけり、飽きたら消しちゃえばいいである。保存してもいいが…。

  私もまだ余りいじってないので、上級ワザは紹介できないが、とりあえずこんな事なら出来てしまう。↓ 

    

 これはブラシツールというワザで、断っておくがはっさくがピーマンの写真をワザワザ撮ってきたわけじゃない。

 なぜピーマンかは知らないが、ツールボックスの中にこの絵があったので、選択して作成画面上で1~2秒で左クリックボタンを離したら薄くず~と押してたら濃く、なっただけ。

 他の画像もず~と押してるか、すぐ離すかの違いだけで、デザインはデフォルトで用意されているもの。
 簡単すぎ?

 他にもブログで活躍しそうなのが、「ロゴ」という効果。
例えば↓下の作例は、私の操作したものと 「Script-Fu」というツールにある「ロゴ」を使ったもの。
 「ロゴ」は文字を入力して、フォント種類を選んだら後はお任せ。




  フリーウェアの特集を組んでいる雑誌をいくつか読んでみたら、 どの紙面でもPhotoshopの7.0くらいのレベルとみていた。

  8万はする。

  私がGIMPに掛けたのは1,500円弱だ。

  え、無料じゃないの?と来るだろうが、もちろんネット上でダウンロードすればタダ! 
 こちらからどうぞ。 (ただし英語だからネ)

  しかし、ソフトのヘルプだけでは解りにくいので、ハウツウ本を購入してみた。

  これだとCD-ROMに、最新版のGIMP2.2と作例の手順が収録されているし、本には各ツールの使い方が細かく説明されているので便利!

  いくつかGIMP本は出ているが、 「GIMPの教科書」が、
お薦めかな。

  Photoshop張りの分厚い本もあったが、
最初はそんなにいらないでしょ。

  「GIMPの教科書」はゆる~いイラストも、
妙に笑えて面白い。

 例えば「選択範囲を理解しよう」というページ。
イラストでは女の子が赤いビキニ(下着?)で、 Gパンを干している!
「センタク」って………。
「要らない部分を消したい」では、足の無駄毛をっ!
ふふふ、もう教えない~♪ 

参考資料 

GIMPの教科書。
長谷川 アンナ
4883805956

GIMPですぐデキる!フォトレタッチスーパーテクニック2007
Windows100
4883805948

| | コメント (2) | トラックバック (0)

2007年2月17日 (土)

WEBセーフカラーは気にすべき?

 自分でテンプレートをカスタマイズしようとする際に、 216色のwebセーフカラーを選択すべきなのだろうか?

 直球で言うと、216色?そんなもん気にせんで、いいらしいぞ~!
 というのが私の結論である。

 Webセーフカラーって、一体…?!
 という人でも、記事を作成する画面のツールバーに 「」 の文字がある事、カラーパレットから色を選べる事、なら知っているだろうと思う。

 これがWebセーフカラーで、一応、どんなPC環境でも、同じ色が表示される、全216色。
 という事になっているが… 。

 つまり、この中から選べば、私のPCでもあなたのPCでも同じ色に見えるのよ~、のハズ! の色だ。

 かねてから気になっていた事に…、他のモニターではどう映っているのだろうか?、という疑問があった。

 よくパソコン雑誌の新機種比較の記事を見ると、 Windowsだけでもメーカーによって明るいとか、ちょっと暗いとかの多少の差がある上に、 MacintoshはWindowsより明るいときている。 (私はWindowsなので、 Macintoshは白っぽく色がとんじゃっているように感じるが… )

 逆を返せば、 Macintoshでデザインしたもの(または画質調整した写真とか)を、 Windowsのモニターでみると暗い、ということになる。

 詳しく話すと「ガンマ値」とか、 Macintoshでは標準装備だが、 WindowsではPhotshopなどのグラフィックソフトを用いて補正するとか、 一般ユーザーは補正をいていない人がほとんど、など難しい用語が出てくるので、はぶく。

 そうかぁ、 WindowsとMacintoshでは、色が違うんだー、と覚えておけばよしとしよう。

 ◆ RGB値

  まず、これから。 「効果的に伝えるWeb配色標準デザインガイド」 から抜粋。

コンピュータのディスプレイは光りの三原色と呼ばれる
R(赤)・G(緑)・B(青)の光りを混ぜ合わせ、その比率により色を決定していく事ができます。
 初期のコンピュータは白と黒や8色程度の表示しか出来ませんでしたが、 現在では殆どのコンピュータがRGBのそれぞれを256段階で変更できるようになっています。
 つまり、256の3乗、 16,777,216色を表示する事が可能です。それぞれ255が最も明るく、 0だと光りが点灯していない状態となります。

というわけで、合計16,777,216色の表示が可能。
 でも、これ。あくまで“可能”。

 ユーザーのPC環境によるからだそうだ。

 人によって、 256色(8bit)・ 65,536色(16bit)・ 16,777,216色(24bit)とモニターのカラーモードが違うらしい。
 ちなみに私のPCは、32bitになっている。

 ≪自分のは?≫
 Windows XPでの操作しかわからないが、モニターの何も無いところで、 「右クリック」→ 「画面のプロパティ」のウインドウが現れる。
 「設定」タブをクリック→ 「画面の色」の箇所で確認できる。  (他のOSでも、画面の設定や確認をする操作があるはず)

 で、なぜ“可能” の域をでないのか?

 どんなに沢山の色を駆使して、かっこよくデザインしても、 見る側の環境が「256色しかない」のであれば、代わりの色に置き換えられてしまう、からである。

 特に、グラデーションを使ってあると、徐々にぼかした筈の箇所が、階段状に色分けされたりする。

 ◆ 16進数

 CSS編集を出来る人ならみたことのある、# ○○○○○○ という色の指定をする英数字。

  ココログだけどCSS編集を知らな~い、って人でも、 文字の色を変えたい時に、数色のカラーパレットが並ぶ右横に、得体の知れない英数字が並んでいるのを見たはず。

 HTMLでの色の指定は、この16進数で表される。
0~255の色を00~FFの英数字で、赤を2桁・緑を2桁・ 青を2桁、の6桁で表示する。

 ということで、この英数字を指定する事で、本文のフォントや枠線の色を決めるのである。

 だから、あのカラーパレットに無い色でも、 この英数字を直接変えれば、好みの色に変えられる!

 ココログを始める時、一番引っかかりやすいのがここかも知れない。
 私などカラーパレットの中に選びたい色がなくて、自分の思い描くテンプレートに出来ないと、ずいぶん頭を悩ませていた。
 今となっては笑い話。

 色見本は、大概のHTMLやCSSの本に載っている。
 以前紹介した 「HTMLタグ辞典」 や 「スタイルシートデザインレシピ」 にも載っている。

 #○○ ○○ ○○
  ↑   ↑   ↑   
       G   B 
   (赤) (緑)  (青)

 HTMLはこの6桁の数値で表記する事になっている。

 だから、あの横並びのパレットに無い色でも、この数字を当てはめれば、好みの色は表示される。

これ以外にも色の名前で指定する事が出来る方法もある。

  font-color:Blue; ← のように。
 ブラウザによりけりなのでお勧めできないけど。

 ◆ Webセーフカラー

 どのメーカーのモニターでも、 OSでもブラウザでも、「赤」なら同じ「赤」が表示されるはずの、この216色。

 8bitのカラーモードが256色なのは、 このセーフカラー216色+OSのシステムカラー40色。

 だが、 16bitのカラーモードでは、違うらしい。

 つまり、8bit以外のカラーモードでの閲覧者には、 こちらが意図した色では伝わらない可能性があるという事。

 問題は、じゃあ8bitのカラーモードで閲覧している人がどれだけいるのか?  である。

 各々、自分のブログのアクセス解析で確認できるが、私の場合は、ほぼ居ない…。

 見てない人に合わせていたなんてっ…、なんて事!

そしてもっと“なんて事!” なのは、この216色すら、実は正確ではないという点!
 改善はされてきているらしいが、「絶対」と断言は出来ないようだ。

 ここまでくると、RGB値とか、 16進数とかが理解できていなくても、 「WEBセーフカラーって、どこがセーフ?」という気になってこないだろうか!?

 という訳で、私個人としてはWEBセーフカラーは、

*) WindowsとMacintoshでは色が違う事。

*)一般にはカラー補正を知らない人が殆ど。

*)32bit・24bitのカラーモードで作った画像は、それ以下の低bitのモニターでは他の色に変換されてしまう。

*)よって、ユーザー側のモニター環境によって、違ってしまう可能性。

 これはオーバーかもしれないが↓↓
色が違うとはこういう事。

       

 この辺の事を頭の隅に入れておいて、
知った上で色の選択をする事にした。

 もし、他のモニターで見た時自分のPCと違って見えても、
違ってしまう色を分かった上で選択するなら、自己責任ってことであきらめもつく。

 このブログの画像も、「補正されてないカラー」で確認しているので、 Windowsの補正したカラーの人には、私より多少赤みがかった画像となっているかもしれないし、 Macintoshの人は、 Windowsの人以上にピンクっぽいかもしれない。

(注) 色が違うといっても、赤が青に変わってしまうわけではないから、ご心配なく。
 「色が違う」というのは、例えば 「黄色よりのオレンジ色にしようとしたら、かなり濃いオレンジになってしまった」というような違いの事。
 

 ただし、WEBデザインの仕事をする場合は、クライアントの環境など、配慮する必要がでてくるだろうが。




効果的に伝えるWeb配色標準デザインガイド
― ユーザビリティ/アクセシビリティ/マーケティングを考慮した
サイトの色彩設計からの配色の実際まで

4839918384
坂本 邦夫


by G-Tools

HTMLタグ辞典
HTMLタグ辞典

スタイルシートデザインレシピ
スタイルシートデザインレシピ

| | コメント (2) | トラックバック (0)

2006年8月26日 (土)

パソコン画面が壊れたっ!

  パソコンの画面が壊れてしまった!

  以前から、なんか変だな~と思っていたのを、放っておいたら、数日前それはやって来た。

  起動はしたけど、それ以外はまともに動かない!
どのアプリケーションも開くと閉じず、閉じても画像が一部残ってしまうっ。
タスクマネージャもまともに反応しなくなっていて、何度も「プログラムを終了します」を繰り返し、ちっとも終了までたどり着けないので、結局強制終了…。
 
  取説を引っ張りだしてきて、あちこち調べ回していると、よく目に入るのが
「ホームページのどこどこを参照して…」とか「●●アシスタントの▲▲のトラブルシューティングを…」などと書かれていた。

  そのつど「えぇ、えぇ!やってます!それが出来るくらいならっ!」と叫んだ。

  いや~な予感を胸に、サポートセンターに問い合わせたら、「リカバリして下さい」と、事も無げにおっしゃる!

  そりゃあ、日長一日私のような、最後にバックアップしたのいつだっけ?なんて間抜けの「動かないんですけど」「壊れちゃったんですけど」を相手にしているのだから、あっさりしたものだ。

  どうにかならないものかという、こちらの一縷の望みも虚しく、「システム自体は壊れて無いようなので、リカバリすれば治ると思いますよ」と、某古本屋の「こんにちは~」と同じくらい機械的な返答であった…。
 恐る恐る「もしかしてウィルスなんですか?」と訊ねると、彼は「可能性はありますけど」の前置きをして、「リカバリすれば治りますから」を繰り返した。

 後日、某電気メーカーにお勤めの知人に事情を話したら「何となくウィルスじゃない気がする」って言われ、少しホッとした。

  そんな訳でただ今復旧中である。
 私のやる気も初期化され、真っ白に。

  最近CGIを使った、アクセスカウンターの取り付け方をやっと覚えたので、記事(私の覚え書きだけど)にしようとしていた矢先だった。

 でも今の気分はこんな感じ↓
          ricabari.png
 あわてて、本屋で整理やバックアップの本をあさり、CDやDVDにバックアップするの元通りしてからとして、取り敢えずは、マイドキュメント自体をDドライブに移動した。
 メーカーによって違うらしいが、私はFMVのHシリーズを使用中。
この機種のリカバリCDはDドライブは残してくれるので、今万が一リカバリのし直し(?)を迫られても大丈夫…らしいのだ。
  皆さん、バックアップはコマメにしましょう…。

| | コメント (0) | トラックバック (1)

より以前の記事一覧