ウェブページの作成 (3) 8. 画像の作成 (2) 図やロゴを作成

2005 年度コンピュータ・リテラシー (S)
第 14 回授業 (2005.07.22)
ウェブページの作成 (3)
担当：千葉庄寿 (ちばしょうじゅ, e-mail: [email protected])
8. 画像の作成 (2) 図やロゴを作成する時の操作方法
•
•
PhotoShop のような本格的な画像作成ソフトを使わなくとも，PowerPoint の図形描画機
能を使って図を作成することもできる。
「ファイル」→「名前を付けて保存」で，JPEG/GIF/PNG のうち，適切な形式を指定す
る (ワードアートや図形など，かっちりした線を用いるロゴの場合には，GIF 形式を選ぶ
とよい →前回資料§6.2.を参照)。
画像作成後，ロゴのデザインを再度修
正したり，同じデザインで複数のロゴ
を作る可能性がある場合には，いった
ん PowerPoint のプレゼンテーション
形式を選び，編集可能なスライドとし
て保存した上で，作成したロゴを
JPEG/GIF/PNG 形式に書き出すとよ
い (左図参照)。
「名前を付けて保存」
「現在のスライドを保存」
•
1
保存したスライドは余白を含んでいるので，画像と
してホームページにそのまま利用しても，うまく表
示されない (右図)。
¾ Photo Editor に読み込み，トリミングをして空
白を減らす (前回資料§6.3.参照：領域を選択し，
[イメージ] → [トリミング]，次ページ左図)。
¾ 必要に応じてロゴや図のサイズも変更する
(Photo Editor で[イメージ] → [サイズ変更])
麗澤大学コンピュータ・リテラシー (S)
必要なのはロゴの部分だけ！
第 14 回
授業 URL: http://www.FL.reitaku-u.ac.jp/~schiba/lit_s/
¾
「マイコンピュータ」上で縦横の大きさとファイルサイズを確認する (ファイルを選
択し，[ファイル]→[プロパティ], 右下図)
トリミング
※ トリミングをしないで画像ファイルを表示すると… (img タグの書き方 →前々回資料§3.)
<img src="titlelogo.gif" alt="ようこそ千葉
のホームページへ！ " height="188"
width="251">
→小さく表示されてしまう！
<img src="titlelogo.gif" alt="ようこそ千葉のホー
ムページへ！">
→大きく表示されてしまう！
•
トリミング後の
画像を表示
ウェブページの作成 (3)
2
高度な技術：「透過 GIF」
¾ GIF 画像は画像で使われている色のうち，一色を透明なものとして指定することが
できる。背景画像や背景の色が透けて見えるようになり，不要な余白を感じさせない
画像を作ることができる。JPEG では透過処理はできない。
¾ 透過 GIF では，透明に指定した色の箇所は全て透明と
解釈されてしまうので，例えば余白の白を透明にすると，
ロゴ中に使われている他の白の部分まで透明になって
しまう。そこで，PowerPoint でスライド上にロゴを作
成する際には，ロゴに使用しない色を背景色として指定
しておくとよい (背景の指定方法：[書式]→[背景]，右
図参照)。
¾
透過 GIF の作成方法：
1. ツールバー上の「透過色に指
定」ボタンを押す。
2. 透過色に指定したい部分をク
リックする。
「透過色に変更」ダイ
アログボックスで色を確認し，
「OK」を押す。
3. 指定した色が透過色に変わる。
確認し，(必要なら名前を付けて)
画像を保存する。
9. ウェブページ公開時のトラブルシューティング
ウェブページの作成はパソコンの総合的な利用スキル／知識を試すのにもってこい。転送後に
トラブルがあったら，以下の 9.1.∼9.4. のようなポイントを確認してみよう。
9.1. 自分のホームページが表示されない
•
URL は間違っていないか？
¾ ログイン名は正しいか？ ~ (ティルデ) は正しく入力しているか。
¾ ファイル名は正しいか？拡張子 (html または htm) は正しいか？うっかり
index.htm.htm などとしていないか？
•
ホームディレクトリのなかに www (半角小文字で) というディレクトリが存在するか？
¾ WWW と大文字になっていないか？
3
麗澤大学コンピュータ・リテラシー (S)
第 14 回
授業 URL: http://www.FL.reitaku-u.ac.jp/~schiba/lit_s/
•
¾ ＷＷＷと全角になっていないか
index.htm ファイルが www ディレクトリのなかに存在しているか？
¾ index.htm. (不要なドット！), index.htm.htm など余計な文字や記号がついていな
いか？
¾ 正しく半角の小文字になっているか？全角になっていたりしないか？
¾ 転送したファイルは www ディレクトリの中にあるか？間違った場所に転送していな
いか？
9.2. 自分では見えているけど，友達には見えない，といわれる
•
ブラウザの「ロケーション」「場所」に URL を打ち込まず，ネットワークドライブに保
存してあるコンテンツを見ていないか？正しく WWW サーバに転送されているか？
•
写真が表示されない，といわれるときも，JPEG ファイルや GIF ファイルが WWW サー
バ上に転送されているかどうかを確認すること。
9.3. エディタで修正しても，内容が反映されない
•
EmEditor で修正してネットワークドライブに保存後，再度 WWW サーバに転送したか？
※ 再転送の場合には，ファイルを上書きするかどうか FFFTP が聞いてくる。
どうしても分からない場合には，念のため，WWW サーバ上のファイルを削除
してから転送しなおすとよい。
•
転送する場所は間違っていないか？
9.4. 正しいところにリンクしない／リンクしたページが表示されない
•
<a href="…"> タグの書き方に間違いはないか。a と href の間に半角スペースが入って
いるか？全角のスペースがどこかにはいっていないか。
•
リンク先の URL は正しいか？確かに存在しているか？
•
リンクするファイル名を正しく半角小文字で表記しているか？拡張子は正しいか？ファ
イル名の大文字小文字は違っていないか？ファイル名にスペースが使われていないか？
(最後の 2 つの項目のトラブルは，Windows で表示させた際には気づかず，実際にコンテ
ンツを WWW サーバで公開した場合に初めてトラブルが発生する。)
ウェブページの作成 (3)
4

Download Report