①
「ファイル」→「開く」の保存先から上記写真を選ぶ。
自主制作
自分で制作したい方のためにマニュアルをご用意しました。
1限～4限目に分けて最短1日で基本のHPが制作できるようにしました。
4時限目:ホームページをデザイン
★画像やロゴの設定★
≪画像の設定≫
ホームページが真っ白で、文字のみなんてつまらないですよね。会社であればロゴがあったり、イメージ画像や写真があった方が閲覧する人も楽しいし、情報が入りやすい。
そこで、画像や写真をサイズ変更したり、加工して挿入する方法とロゴの作成方法の基本を見ていきましょう。
ここでは、事前準備の回で紹介した「paint.net」がダウンロードされている事を前提に進めるため、まだの方は是非。
事前に作成してある「base」・「images」の2つを使います。
- base:ダウンロードした写真やデータの元を保存する場所。
- images:編集した写真やデータを保存する場所。
今回は、この画像をいくつか編集していきます。
右クリックをし、「名前を付けて画像を保存」→「base」フォルダの中に好きな名前で保存。
好きな画像を使う場合は、ダウンロード後、上記同様保存。
【縮小・拡大】
②
「画像」→「画像サイズを変更」→今回は高さ300pxで同比にします。「縦横比を維持する」にチェック、「高さ」を300→OK
※変更し終わった後は、「名前を付けて保存」→「images」のフォルダに保存しておいてください。その際、「ファイルの種類」は「JPEG」or「PNG」が選択されていることを確認。
【切り取りA：画像の一部を切り取る方法】
今回もこちらを使います。切り取りは基本の四角で行います。
①
ツールから左上の「□」を選択し、上から3行目にあるツールの右「新規選択の四角」を選択。
②
左から8番目の「□のようなマーク」を選択。写真のように一部が切り取られていたら成功。
後は「ファイル」→「名前を付けて保存」→ファイル名、今回はcake2として保存。
【切り取りB：対象物を残して背景等のいらない部分を切り取る方法】
今回もこちらを使います。
①
今回はケーキの背景の余白を切り取ります。ツールから「魔法の杖」を選択。
普通にケーキの余白をクリックすると、背景の色の関係上切り取りたくない部分まで選択されてしまいます。そこで、今回は細かい部分は抜きにして、きれいに切り取れるよう（上部メニュー真ん中あたりにある）「許容範囲」を10％にして切り取る設定にしました。(水色の部分が切り取られます。)
②
左から5番目の「ハサミマーク」(切り取る前は色付きマークになってます。)を選択。写真のように一背景がグレーの格子になったら完成。
後は保存しましょう。
「ファイル」→「名前を付けて保存」→保存先としてimgesを開いて「ファイル名」を決めて。今回はcake2にしましたがなんでもOK。→「ファイルの種類」ここポイントです。普通の写真を保存ずるだけならjpgでもpngでもいいですが、今回は切り取りした写真なのでpngを選択が必須。→「保存」
一部や背景を切り取った写真はどのように使うのでしょうか。次に説明しましょう。
【レイヤー】
写真を重ねることがレイヤー。では先ほど加工した写真2種類をレイヤー機能を使ってさらにおしゃれに加工していきましょう。
★一部切り取った写真の加工[Aパターン]
①
重ねるシートを作成。
「新規作成」かっこで500×500のシートを用意。
次に色を付けます。ツール左上から5番目の「ペイント缶」を選択し、「カラー」から好きな色を選択。白いシートをクリックすると色が塗れます。※今回は練習なので赤・黒以外なら何でもOK。
②
メニューから「レイヤー」→「ファイルからインポート」を選択し、対象の写真を選んでくる。今回はcake2です。
写真のように左上に写真が重なればほぼ完成。
③
写真の位置をずらしましょう。今回は中心に持っていきます。右下にある□に上下左右矢印がある記号がある状態で、点線で囲まれた写真をクリックしながら移動。
最後に保存方法。「ファイル」→「名前を付けて保存」→ファイル、名今回はcake3にしました。→「保存」→「OK」→「平面化」（重ねてある画像を一枚の写真とするため。）を選択。※今回はファイルの種類はJPEG・PNGどちらでもいい。
★背景を切り取った写真の加工[Bパターン]
①
今回は画像に文字を書きます。
「ファイル」→「新規作成」で800×600シートを用意。
一つ前のようにシー3トに色付けをします。
②
メニューから「レイヤー」→「ファイルからインポート」を選択し、対象の写真を選んでくる。今回はcake2.png(2つ前の背景を切り取った画像を使用)です。
写真のように左上に写真が重なればほぼ完成。
③
写真の位置をずらしましょう。今回は上部に文字が入るので調整士ながら画像をクリック設樂移動。そして、ツール左上の□で画像全体を囲み、2行目左から8番目の四角のような記号でトリミング。
最後に保存方法。「ファイル」→imagesのフォルダに「名前を付けて保存」ファイル名：cake3、ファイルの種類：JPEGにしました。→「保存」→「OK」→「平面化」を選択
④
文字の記入。今回は「HAPPY BIRTHDAY!!」にします。
ツールの左下から2つめの「Ｔ」を選択→「カラー」を選択→上部3行目の「フォント」とその横の「文字サイズ」を選択。
※カーソルが点滅していれば、文字記入後、文字色・フォント・文字サイズは確認しながら変更可。万が一カーソルが移動してしまったら、一旦削除でまた文字記入を始めればいい。その他、文字の太字や端揃え等はWordやExcelに同じです(④の右)。
他にも機能は沢山あり、書ききれません。ぼかし・枠・明るさ調整等…色々チャレンジしてみてください。
★練習★
今回は、画像を挿入し中央に配置してみましょう。
①
前回の項までに練習したhtml記載のindexファイルとcss記載のstyleファイルを用意。
②
今回はheaderの下に画像を追加します。indexを開き、メニュー右から2番目「ツール」から「画像の挿入」→今回はcake1を選択
③
Google Chromeで確認して写真のようになればほぼ完成。
でも、写真のバランスが悪いですから、html・cssそれぞれにに一つ加えましょう。
④
htmlには「<div class="img">～</div>」を、cssには画像を中央寄りにする「text-align: center;」追加。
⑤
Google Chromeで確認して写真のようになれば完成。
★レイアウトの再構築★
レイアウトの再構築っていうとわかりにくいかもしれませんが、要はメンテナンスです。
一度制作したら終わり．．．ではないです。もう一度「制作」のページを見てください。
例えば、あなたが飲食店に行きたいとしてお店の情報を得る1つとしてHPを検索した時、営業時間やメニューなどが全く変わってなければまだ良いでしょう。しかし、何らかで営業時間変更しているのに掲載されてなかったり、新作メニューあるのに掲載なかったらどうですか？メニュー情報も欲しいですが、それよりも営業時間が変更されてることで行けないのが残念。
こうなるなら、HPを作成しないでSNSだけ更新してくれたらって思います。
せっかくHPを制作するなら、毎日でなくとも、週1・月1くらいは更新あった方が嬉しい。百歩譲って半年何もないとなると．．．年単位で何もないのはもってのほかです。
無理ない範囲でメンテナンスはしていきましょう。
↓ 当サイトの3サービス ↓
