無料ホームページ作成マニュアル
無料ホームページ作成マニュアル>画像を貼ってみよう!

◆画像を貼ってみよう!

フリー素材などの画像を貼る際の基本を解説します。

◆画像の調達

 念の為、作るページを確認。 サンプルページ

サンプルには三種類の画像が使われています。

カット アイコン
カットと アイコンと 背景

これ等はクロが描いたものでは無く、フリー素材屋さんの 「1キロバイトの素材屋さん」  さんからお借りしているものです。

画像を調達する前に注意事項を説明しておきます。
これも必要最低限知っておかなければならない事なのでおつきあいください。

■規約は守りましょう

フリー素材を配布しているサイトさんには、そのサイトごとに必ず利用規約というものがあります。
これはそれぞれサイトごとに違いますので、このサイトがこうだからここも同じだろうとは思わず、必ず利用規約を熟読してそれを守ってください。

 参考サイト 「著作権のひろば」

規約違反に困っているサイトさんもあるようで、規約を読むと入り口の場所がわかるというサイトさんもあります。
ホームページを作る以上、マナーを守って楽しいサイトを作るように心がけましょう。
規約に「リンクウェアです」と書かれている場合が多いですが、これについてはリンクのところで後述します。

■画像の直リンクはしない

これも素材サイトさんにはよく(というか、まず間違いなく)書かれてます。
直リンクとは素材サイトさんなどの画像のアドレスを、勝手にコピーして自分のサイトに貼り付けるという外部呼出しの事です。

 参考サイト 「直リン絶対やっちゃダメ!」

画像は必ず自分のパソコンに保存して使いましょう。

■ダウンロードしていいのは、素材屋さんの素材置き場のみ

遊びに行ったサイトで気に入った画像があっても、それを直接保存してはいけません。
例えば上の画像。
これを持って行ってしまうと、クロが二次配布をしてしまった事になります。
二次配布はどこの素材屋さんも規約で禁止している筈です。
気に入った画像を遊びに行ったサイトで見つけたら、そのサイトさんから恐らく素材屋さんにリンクされてるでしょうから、そこから素材屋さんに行ってダウンロードしてください。

無料と言っても、他の人が作った著作権のあるものです。最低限のマナーは守りましょう。

以上をふまえた上で画像の調達に行ってみましょう!

とりあえず上のようなカットとアイコン、背景画像の三つを用意。
「1キロバイトの素材屋さん」 さん以外にも フリー素材リンク でフリー素材配布サイトさんを紹介していますので、自分のホームページに合った素材を探してみてきてください。
気に入った画像があったら下記の方法で保存。

Windows 画像の上で右クリック→名前を付けて画像を保存
Mac 画像の上でマウスボタンをしばらく押す→画像を別名で保存

とりあえずやり方だけ覚えたいというめんどくさがり屋さんは下の3つをどうぞ。

カット アイコン 背景
カット アイコン 背景
■利用規約
適当に作ったものなので、リンクウェアでも何でもありません。どうぞ持ってっちゃってください。
直リンのみ禁止。

※保存する場所は、最初に作った「homepage」フォルダ内にしてください。
※名前を変更する場合は必ず半角英数字で!

◆画像の挿入

まず「〜のホームページへようこそ!」と「自己紹介」の間に画像を挿入してみます。
Enterで間を開け、カーソルを画像を挿入したい場所に持って行きます。

画像挿入のボタンがあるのでそれをクリックすると画像挿入のダイアログが開くので、参照で置きたい画像ファイルを選べば完了です。
簡単ですね。

※画像ファイルは作業中のhtmlファイルと同じフォルダ内から選びましょう。

■alphaEDIT
画像のボタン

■Dreamweaver
画像のボタン

■ホームページ・ビルダー
画像のボタン

■ホームページマネージャー
画像のボタン

■フロントページエクスプレス
画像のボタン 

参照で選ぶ際にファイル名を忘れてしまったら、表示メニューから縮小版を選ぶと画像を縮小表示できます。

縮小表示

画像は文字と同じ様に配置変えで左寄せ、センタリング、右寄せする事が出来ます。
他にも
画像の挿入の際に色々メニューがありますが、必要最低限のみという約束なので後回し。
中級編以降で説明します。

◆背景画像を使用する

そのページ全体の背景を画像で飾る事も出来ます。これは壁紙とも呼ばれます。

 1.右クリックでページのプロパティを選びます。

 2.ダイアログに背景の画像を選択できる箇所があるので、参照をクリックして画像を選べば完了です。

背景は固定したり真ん中のみに表示させたりする事も出来ますが、それ等も中級編以降を参考にしてください。

◆トップページへ
無料HP作成マニュアル
◆作成初級編
作ってみよう!
基本設定をしよう!
文字を入力しよう!
画像を貼ってみよう!
レイアウトを決めよう!
【alphaEDIT】
【Dreamweaver】
【Homepage Builder】
【Homepage Manager】
【FrontPage Express】
リンクを貼ろう!
 
 

画像を使う時の注意点

フリー素材屋さんで配布されている画像は以下の注意点にそって作られているので問題ないとは思いますが、自分で描いたり撮ったデジカメの写真等を使う場合は以下の点に気を付けてください。

■ファイルの種類
Web上で表示される画像形式のファイルは、拡張子が決められています。
jpeg(jpg)とgifとpngとbmpです。
(ただしbmpは非常に重たいので、使わないようにしましょう。)

■ファイルの重さ
画像のファイルは重く、多用するとページを開くのが遅くなってしまいます。
重さとはファイルのサイズの事です。
エクスプローラでファイルの表示の仕方を詳細表示などにしておけば表示されます。
また、画像のプロパティでも確認できます。
基準値のようなものがあって、大体50kbくらいまでと言われています。

ファイルが重い場合、圧縮、リサイズなどで小さくすればいいんですが、これがかなりコツがあって、イラストサイトさん等は大変苦労するようですね。
ファイルのサイズを小さくすると画質が落ちる……けど綺麗なままでは重過ぎて表示されるまで時間がかかる。
大きさを縮小したり、jpegなら保存の際に画質を落としたり、色数が少ないのならgifやpngにして色数を減らしたりといった具合です。

おすすめ画像圧縮ソフト

BicResize

jpegやbmpなどのファイルの大きさや画質の圧縮を、容量を指定してリサイズしてjpegとして保存する、とても便利なフリーソフトです。
ペイントソフトを持ってる方にもおすすめです。

<<Back【文字を入力しよう!】 Next>>【レイアウトを決めよう!】
【無料ホームページ作成マニュアル】