<   2014年 04月 ( 22 )   > この月の画像一覧

これからはホームページでPNG形式の画像を積極的に使います

ホームページで使用される主な画像形式


私がホームページで使っている画像形式は主に以下の2つです。
  1. JPEG形式
    フルカラー表示が可能で写真などの色数が多い画像に適した形式で、透過ができない。
  2. GIF形式
    最大256色までの表示が可能でイラスト等の色数が少ない画像に適した形式で、透過ができる。

上記に加えて、比較的新しい PNG形式 というのがあります。

PNG形式はフルカラー表示が可能で透過もできるという、JPEG形式とGIF形式の長所を持った画像形式です。

PNG形式の透過のメリット


GIF形式が特定の背景色を使用する前提で透過画像を作成するのに対して、PNG形式ではアルファチャンネルと呼ばれる透過度を持たせる方法で透過画像を作成することができます。

この結果、背景色が変わったり背景画像が変わったりすると、GIF形式の画像は周辺部が見苦しくなってしまうことがよく起こります。

それに対して、PNG形式の画像を使うと、どのような背景色や背景画像でも周辺部をきれいに表示させることができます。

2つの画像形式でどのような違いが生じるのかを実際に見比べてみましょう。

以下の画像比較では、上がPNG形式、下がGIF形式の画像になっています。

GIF形式の画像は背景色を白にして透過画像を作成してあります。これに対して、PNG形式の画像はアルファチャンネルにより作成された透過画像です。

背景が白の場合


この場合はどちらの画像も同じようにきれいに見えます。

PNG形式のバナー画像
GIF形式のバナー画像



背景が白以外の場合


下のGIF形式の画像が見苦しくなってしまいましたが、上のPNG形式の画像は背景色になじんできれいに表示されています。

PNG形式のバナー画像
GIF形式のバナー画像



背景に画像を使用した場合


この場合も同様に、下のGIF形式の画像が見苦しくなってしまいましたが、上のPNG形式の画像は背景画像になじんできれいに表示されています。

PNG形式のバナー画像
GIF形式のバナー画像



YouTube 動画にボタンを重ねて表示した場合


スタイルシートを設定することにより、YouTube の動画にリンクバナーを重ねて表示するような使い方ができます。

この場合も同様に下のGIF形式の画像が見苦しくなってしまいます。
PNG形式のバナー画像
GIF形式のバナー画像


※Internet Explorer のバージョンが古いと、ボタンが表示されません。

PNG形式を使用する際の注意点


ここまで見比べてくると、GIF形式よりもPNG形式の方が優れているように思えます。(実際にそうなんですが・・・)

私は今までPNG形式の画像の使用に消極的だったのですが、その理由は
Internet Explorer 6 以前のバージョンではPNG形式の画像が正しく表示されない場合がある
ということなんです。

例えば、影の部分をアルファチャンネルで透過にすると、Internet Explorer 6 では影の部分を表示しません。

その結果、以下のようなロゴを作ると、Internet Explorer 6 で表示したときに上のPNG形式の画像は真っ白になってしまい、ただの余白として見えてしまいます。

PNG形式のロゴ画像
GIF形式のロゴ画像



WindowsXP のサポート終了で状況は変わるでしょう


WindowsXP のサポートが終了したことにより、今後は Internet Explorer 6 でホームページを見る人がどんどん少なくなると予想されます。(今までもかなり少ないですけど・・・)

そんなこともあって、私はこれからPNG形式の画像を積極的に使うことにします。

ただし、Internet Explorer 6 の使用が完全にはなくならないので、上記のような最悪の使い方をしないように気をつけたいとは思いますが・・・。
[PR]

by pc_klik | 2014-04-26 15:00 | パソコンのこと・あれこれ

ツイッターのプロフィール画面のデザインが新しくなりました

昨日ツイッターにログインしたら、私のプロフィール画面が今までと違う新しいデザインに変わっていました。

こんなかんじの3カラムのデザインです ↓

d0015124_1434352.jpg


他の皆さんのプロフィール画面を見ると従来の2カラムのデザインの方がほとんどですが、私と同じデザインの方も少数ですがいらっしゃいます。

調べてみたところ、どうやらランダムに選出された一部ユーザーにテスト的に提供されているみたいですね。

新しいデザインは顔写真がいきなり大きく表示されるようになっています。

もう少しマシな顔写真に差し替えておこうかなぁ・・・。
[PR]

by pc_klik | 2014-04-22 14:20 | パソコンのこと・あれこれ

WordPress のメディア挿入画面で Chrome が固まる不具合の対処法

最近、WordPress のメディア挿入画面に写真をドラッグしてアップロードしたときに画面が固まってしまい、マウスをクリックしても画面が操作を受け付けなくなる不具合が起きるようになりました。

こうなってしまったらしかたなくタブを閉じていたので、書きかけの文面が失われてしまいました。

使用しているブラウザは Google Chrome です。

この不具合を何度か経験したので、写真をアップロードする前には念のために [下書きとして保存] ボタンをクリックしていました。

今日、またこの不具合が起きて、たまたま固まった画面から抜ける方法を見つけました。

その方法は [Esc] キーを押すことです。

[Esc] キーを押すと、メディア挿入画面がすんなりと閉じて、記事編集画面に戻ってきます。

同じ不具合でお困りの方、お試しください。

【2014-05-05 追記】 もうひとつの対策を見つけました

上記のようにメディア挿入画面が固まったとき、メディア挿入画面上でドラッグする方法でも操作可能な状態にできることを見つけました。

1回でダメでも、何回かドラッグを繰り返すと操作可能になっています。
[PR]

by pc_klik | 2014-04-22 13:50 | ブログのこと・あれこれ

理不尽な ホームページ・ビルダー 18 の構文エラーメッセージ

昨日、ホームページ・ビルダー 18 を入手して使い始めました。

HTMLファイルを新規作成するときのフォーマットとして HTML5 を指定できるようになったということを知って試してみたくなった・・・というのがその理由です。

ホームページ・ビルダー 18 で [ツール] ⇒ [オプション] ⇒ [ファイル] とオプション設定画面を開くとたしかに HTML5 を選べる設定項目が増えています。

d0015124_18244370.gif


これを見て、HTML5 の規則に沿ったHTMLソースを作ってくれると期待したのですが、期待外れに終わりました。

HTML5 では
  • p 要素の align 属性
  • img 要素の border 属性
が廃止されていますが、HTML5 で新規ファイルを作成してホームページ・ビルダー 18 で編集すると以下のようなHTMLソースが作成されます。
<p align="center">こんにちは</p>
<p><img src="images/sample1.jpg" width="217" height="140" border="0"></p>

style="" というHTMLソースができるものと期待したのにがっかりです。

そして、私のがっかりに追い打ちをかけるようなメッセージが表示されました。

このHTMLファイルを保存して、再度ホームページ・ビルダーで編集しようとすると、こんなエラーが表示されるんです。

d0015124_18262680.gif


属性名が未定義だって知ってるなら使わないでよ・・・と腹立たしく思います。

ちなみに、このエラーを表示するのは、[ツール] ⇒ [オプション] ⇒ [一般] の設定で [すべてのエラーで、修正ダイアログを開く] を選んでいる場合です。

d0015124_1826461.gif


私は細かいエラーでも指摘してもらった方がありがたいのでこのように設定していますが、初期設定のままだとこのエラーは表示されません。
[PR]

by pc_klik | 2014-04-21 17:30 | パソコンのこと・あれこれ

画像編集ソフトによる加工結果の違い ~ 写真の回転

私がホームページやブログで使用する画像を作るときには主に 縮小専用。 と ウェブアートデザイナー を使って加工作業を行います。

2つともとても使い勝手のよいソフトで、これだけでたいていのことができてしまいます。

でも、他のソフトを使わざるを得ない場面があります。

そのひとつが 写真の回転 です。

ウェブアートデザイナーで写真を回転できるのですが、輪郭がギザギザになって見苦しくなってしまいます。

パソコン教室くりっく の実習でよく使っている PhotoScape というフリーソフトを使えば輪郭はギザギザにはならないのですが、写真のシャープさが失われてしまいます。

写真を回転するときに私は Fireworks という画像編集ソフトを使っています。

Fireworks は高機能な市販ソフトで、これがあればなんでも完ぺきな加工ができるのですが、私は普段は使い慣れているウェブアートデザイナーを使っています。

3つのソフトで写真を回転した結果の違いです。 ↓ (クリックすると拡大して原寸表示されます)

d0015124_13485330.jpg

[PR]

by pc_klik | 2014-04-14 13:20 | パソコンのこと・あれこれ

おぉ、Google ストリートビューでくりっくが見えている!!

久しぶりに Google ストリートビューを使ってみたら、この近く(南魚沼市)のかなり細かい道までカバーされていることに気がつきました。

パソコン教室くりっく の前の道もカバーされていて、ここがばっちりと写っています。

d0015124_13533916.jpg


d0015124_13534221.jpg


ストリートビュー画面の下部に表示されている情報によると、この場所が撮影されたのは昨年8月です。

普段はストリートビューを使うことがないので気がつきませんでしたが、こんな田舎道までカバーしているってすごいことですね。
[PR]

by pc_klik | 2014-04-14 11:30 | パソコンのこと・あれこれ

WindowsXP ~ これが最後のアップデートです

今日でマイクロソフトが WindowsXP のサポートを終了します。

Windows 8.1 のパソコンも使っていますが、私はいまだに WindowsXP も使っています。

今後もなるべくインターネットを使わないようにしながら WindowsXP をもうしばらく使い続けます。

使い続ける理由は2つあります。
  1. 仕事で使っているソフトで WindowsXP でないと動作しないものがある。
  2. WindowsXP の方が使いやすい。

そう遠くない将来には使用中止するつもりですが・・・。

先ほど Windows Update による更新を実行しました。

d0015124_11402312.gif


d0015124_11402615.gif


これが最後のアップデートです。
[PR]

by pc_klik | 2014-04-09 11:20 | パソコンのこと・あれこれ

リカバリーがかんたん過ぎてこわい気がします

いま、お客さんからパソコンを預かって再セットアップ作業をしています。

以前のパソコンと違って、いまどきのパソコンはとてもかんたんにリカバリーができますね。

d0015124_1402973.gif


あまりにかんたん過ぎて、私としてはちょっとこわい気がします。

パソコンの調子が悪いとき、パソコン操作が苦手な人がよくわからずにいじっているうちにリカバリーしてしまい、大事なデータが全部消えちゃった・・・なんてことがどこかで起きそうです。
[PR]

by pc_klik | 2014-04-04 09:00 | パソコンのこと・あれこれ

OCNで受信メール配送の遅延が発生していました

今日の昼休みに送ったメールが相手に届くまでに3時間近くかかりました。

送信先はOCNのメールアドレス ********@*****.ocn.ne.jp です。

試しに相手からメールを送ってもらうと、すぐにこちらに届きました。

OCNの工事・故障情報 によると、原因はOCN側の通信設備における高負荷で、これによりメールの配送に大きな遅延が発生していたようです。

OCNのメールアドレス宛にメールを送るときに届くのにやや時間がかかる傾向があるように思っていましたが、今回のような遅延が起きるようでは困りますね。

OCNのメールアドレスを仕事に使っているところもけっこう多いですから・・・。

ちなみに、OCNのメールアドレス宛に届いたメールのヘッダーを見ると、
Received: from ...
という行がやたらと多いことに気がつきます。

OCN側でいろいろなサーバを経由して配送されているということだと思いますが、この複雑な配送の仕組みが遅延が起きやすい一つの要因になっているのではないかと勝手に推測しています。
[PR]

by pc_klik | 2014-04-02 19:00 | パソコンのこと・あれこれ

Corona Extra (コロナビール)

息子からの誕生祝いの世界のビールセットの中から、今日はメキシコの コロナビール を飲みました。

d0015124_1842289.jpg


国が違うとビールの味もちょっとずつ違っていて、おもしろいです。
[PR]

by pc_klik | 2014-04-01 19:10 | 日記

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX