自分で初心者がサロンHPを作る 画像をサロンHPに入れる方法説明

いよいよHP作成の中でも、デザイン的に1番重要な画像の挿入方法です。

まだ画像編集方法は伝えていませんが、先に画像挿入方法を伝えることで、
画像を作ったらスグにHPに入れることができるようにしておきます。

画像をHPに入れる方法説明 サロンHPを作る

 

画像をサロンのHPに入れる方法説明 サロンHPを作る

ではいよいよ、HPの見た目で一番大切な部分、デザインも大切ですが、デザインよりも視覚的に訴えることの多い画像の挿入方法の説明です

まだ、画像の編集方法を説明していないので、画像の編集を先にしようとしずに、

まずは、画像の挿入方法、つまり、無料HP作成ソフトを一通り使ってください。

 

そうすることで、結果作業が早くなるのと、どういう風に画像を加工したらいいかが、置く場所を知っておくことで、わかります。

まずはHPをある程度作ってから、それに合わせて画像を作成するのが1番早い方法です。

広告

 

 

 

 

まずは、先ほどのテーブルの中を使って説明しますが、別にテーブルの中だけでなく、

文章を書いている途中や、サイドバーでも画像を挿入するときは全く同じ工程です。

今回はよく使う テーブル を使って、その中で画像を挿入していきます。

 

では、まず、テーブルの3段目の真ん中の中に画像を入れていくので、文を書くようにアクティブにします。

(赤枠の状態です)

 

HPのがぞうをいれたい場所を選択する

 

 

 

 

 

 

 

画像をいれる部分をアクティブにしたら、次は、HP作成ソフトの aled のメニューバーの 画像挿入 (青枠の部分) をクリックします。

常に画像を入れるときは、青枠の 画像挿入 で OK です。 

 

画像をHPに載せる方法

 

 

 

 

 

 

クリックすると、下記の画面の 画像の挿入ボックス が出てきます。

ここで、先ほどの画像を入れたい場所に挿入する画像を選択します。

赤枠の中の ”””参照””” をクリックして 挿入したい画像を選択していきます。

 

画像挿入方法

 

 

 

 

 

 

 

 

上記で ”””参照””” をクリックすると、下記の画面が出てくるのですが、 

今現在は ファイルの場所(I) が ”””hp1””” になってますが、これは、自分で指定しないといけません。

 

そして、もう一つしっかり覚えておかないといけないのが、

今作っているHPの index.html が入っているフォルダ(HPテンプレート)の中のフォルダ(今回はimagesです)を選択してください。

 

例えばですが、デスクトップにいい画像があるから、デスクトップを選択して、その画像を挿入したとしても、

HP編集ソフト上ではちゃんと画像は移り作業も出来てますが、サーバーにアップロードしたら画像が移りません。

サーバーにアップロードするときには、デスクトップの画像の情報を持っていけませんので。

 

ですので、index.html があるフォルダ(HPテンプレート)の中のフォルダ(今回はimges)に、

デスクトップ(あなたのお気に入りの画像がある場所)にある、お気に入りの画像を移動させてから、作業してください。

 

ここで、ちゃんと imagesフォルダ の中に画像を移動させることによって、

HPに画像を載せたのと同時に、ちゃんと相対リンクというものが自動で設定されて、

imagesフォルダの中の 今から指定する画像を写せ!!と命令できるのです。

 

ですので、結果ですが、HPに使う全ての画像は、 index.html があるフォルダの中にあることになります。

それが、 index.html が入っているフォルダ(HPテンプレート) の中のフォルダ(images) でも、新しく作ったフォルダの中でもいいです。

サーバーに index.html と一緒にアップロードするフォルダの中に入れておくことが大切なのです。

 

ここで、 images をクリックします。

 

画像を挿入する為の指定方法

 

 

 

 

 

 

 

すると、ファイルの場所(I) が、 images に変わり、 imagesフォルダ の中が見れます。

ここに、今回は適当に画像が作ってありますので、そのどれかを指定してください。

 

右にあるバーで、下を見ていって、 ””e3.jpg"" を探してください。(同じ画像で練習する方は)

そして、画像をダブルクリックするか、 画像を選んでアクティブにして、 ”””開く(O)””” を選択してください。

 

hp1のフォルダの中からHPに載せる画像を選択

 

 

 

 

 

 

 

 

以下の画像の挿入ボックスが開きます。

そして、先程指定した ”””e3.jpg""" の画像が出てきます。

 

下記の画像の一番上にかいてある、 画像ファイルの場所(S) に images/e3.jpg となってます。

これは  images フォルダの中の e3.jpg ファイルということです。

 

そして、その下の  代替テキスト(A) は、もしテキストが表示できなかった時にだせる文字なので、画像の説明をいれてください。 

 

ボーダーサイズは、画像の周りのボーダーですので、 0 でいいです。

 

幅 と 高さ は、触らなくていいです。(触らない方がいいです。)

 

画像のすぐ上の、  □幅と高さの比率を維持する (R)  は、画像の縦と横を維持するかしないかで、維持をしてください。

ここで維持をしないと、編集時に画像を少し触ると、縦長になったり、横長になったりしちゃいます。

 

そして、  OK   をクリックしてください。

 

HPに載せる画像を選ぶ方法と説明

 

 

 

 

 

 

 

すると、先程画像を入れたい部分をアクティブにしましたが、その場所に、今指定した画像が挿入されてます。

でも・・・・・  大きさが明らかに大きすぎですね。

 

画像を入れるコツとしては、小さいものを大きくすると画像がかなり汚くなりますので、

少し大きめの画像を小さくするつもりでいたほうがいいです。

 

画像自体をちょうどの大きさに作れればいいのですが、ブラウザによって見え方が変わってくるので、少し大きめがいいと思います。

では次に、画像をちょうどいい大きさに、HP編集ソフト上で変更していきます。

あまりにも画像が大きすぎる時は、画像編集ソフトで編集します。

 

HPに画像を入れた状態

 

 

 

 

 

 

 

 

では、今から画像の大きさをHP編集ソフト上で縮めて行きます。

まずは、画像をアクティブにしてください。(画像の上でクリックすると、赤枠の中の用に、画像の周りに□のボックスができます。)

 

画像の右下の□に マウス を持っていくと、   斜めの矢印   に変わります。

この状態で、  キーボードの shift  を押しながらマウスをドロップ&ドラックして動かすと、大きくなったり小さくなったりします。

画像の横の □ にマウスを持って行って ドロップ&ドラック すると横の大きさを調整できます。

 

ここで、さっきの  □縦横の比率を維持する   にチェックを入れてないと画像が変になっちゃいます。

 

先程も言いましたが、基本は画像をこの場所で大きくすることはありません。汚くなります。

そして、あまりにも大きい画像をここで小さくすることもないので、多少大きめに作って、調整する と覚えておいてください。 

 

HPにいれた画像を編集する法のう

 

 

 

 

 

 

 

そして、画像を思った大きさになるように、マウスをドロップ&ドラックします。

まだ下記の場合は、テーブルの中の大きさが大きすぎるので、もう少し小さくしていきます。

 

下記の画像でもわかるのですが、画像がテーブルの横幅より小さくなると、右にスペースが相手変ですよね。

ですので、これも直していきます。

 

HPに載せた画像を編集する

 

 

 

 

 

 

 

まずは画像をアクティブにしてから、 キーボードの ← を1回押します。

今したのは、画像の1つ前をアクティブにしました。この状態で、スペースを入れると、画像が右に移動していきます。

(かなり原始的なやり方ですが・・・) これで上手く調整してください。

 

それか、

 

 

上記の画面の青枠の  真ん中寄せ  を使ってもいいと思います。

これだと微調整ができませんので、私のオススメは、画像の前に、全角と半角を使ってスペースを入れるといいと思います。

(↑の方法だと、HPを拡大して見たりすると寄ったりしますが・・・)

 

画像をHPに上手く入れる方法説明

 

 

 

以上で、画像の挿入方法の説明が終わりです。

思った以上にHPが簡単にできるんだなぁ・・・と感じてもらえたと思います。

 

私が0からスタートしたときは、この画像をイロイロ触るときもかなり苦労しましたが・・・・・。

この無料HP作成ソフト自体を知らなかったので(-_-;)

 

では次は 文 や 画像 にリンクを設定していきましょう。 ※リンクはクリックすると移動できるものです。

広告

 

広告

HP作成過程

 

1 実際にアナタのサイトを作っていく順番説明

サイトを一通り読み終えたら、それを元にして、イヨイヨ完全無料でのサロンのHPを作成していきます。その手順を順番にかいてます。

2 あなたのHPになるテンプレートダウンロード

まずは、あなたのサロンのHPの元になるテンプレートをダウンロードします。
イロイロ分かるようになってきてから、完全オリジナルに編集していきます。

3 当サイトで使用無料作成ソフト 初心者向き説明 

当サイトで使用する完全無料のソフトの紹介です。このページから一括でダウンロードする事もできます。

4 HP作成後の集客出来るHP作成説明の
PDF・動画説明を見る

HPを作成した後の、テクニックの紹介です。コレをできるようになれば、今の私とまったく同じ知識がついているのと同じになります。SEOやHPの集客を強くするコツです。