リンクを付ける方法と説明 自分でサロン無料HPを作成する方法

いよいよリンクをつけて、それぞれのHPのページに移動できるようにする作業です。
これをする事であなたのHPにきた未来のお客様が、知りたいことを知れる状態になります。

フォントや、画像にリンクをつけて、移動できるようにしていく方法です。

サロン無料HP作成方法 リンクを付ける方法と説明

 

サロン無料HPにリンクを付ける方法と作成のやり方説明

あなたのサロンのHPに、あなたのお店のタイトルがつき、内容もあなたのサロンの内容になり、テーブルである程度綺麗に整理できて、

画像も、あなたのサロンの画像ではありませんが挿入方法が分かりました。

 

次はお客様が気になる文をクリックした時にページを移動できるように、

文  や  画像  にリンク(移動できるように)を付けていく方法です。

 

先ほどの画像挿入のときにも言いましたが、クリックして移動するページは全て HPテンプレートの

””hp1”” の中の index.html  があるフォルダ(hp1)のフォルダの中にないといけません。

 

今現在は、全て、 index.html がある場所と同じ場所に html がありますので、この状態にしてください。

最近では、1つ1つのファイルを1つずつのフォルダの中に入れたほうがいいみたいですが、今回は簡単にわかるように、

”””hp1””” フォルダの中の  index.html がある場所にすべてのファイル(htmlのことです)を置いていきます。

 

例外として、ブログなどのように、外部のサイトに移動させたい時は、当然ですが、フォルダの中に入れる必要はありません。

以下で説明していきます。

広告

 

 

 

 

では、まずリンクをつけたい文章をアクティブにします。(ドラック&ドロップで選択します)

赤枠のようにします。

 

文字にリンクを付ける方法と説明

 

 

 

 

 

 

 

 

画像の場合も、画像をクリックして、赤枠のように、画像をアクティブにします。

 

画像にリンクを付ける方法説明

 

 

 

 

 

 

 

 

リンクをつけたい部分をアクティブにしてから HP編集ソフトのメニューバーの青枠の部分をクリックします。

リンクをつけたい時と、メールの設定をしたい時は、青枠をクリックです。

 

リンクを付けるための方法と説明

 

 

 

 

 

 

 

 

すると、以下の  ハイパーリンクの挿入ボックス  が出てきます。

この赤枠の部分で、先程アクティブにしたものをクリックしたら移動したいページや、画像を指定します。

今回は参照をおして、自分が作ったページにリンクさせます。

 

もし、インターネットのほかのサイトにリンクしたいのであれば、この赤枠に  http:// ~~~  をここに書いて  OK  を押せばOKです。

 

リンク設定の画面

 

 

 

 

 

 

 

 

上記の画面で  参照  をくりっくすると下記のページが出てきます。

今回の目的は、 『ネイルサロン○○へようこそ!!』 をクリックしたら、 『fap.html』 のページに移動するようにしますので、

下記の図のように、  fap.html  をせんたくしてください。

 

そして ”””開く(O)”””  をクリックします。

 

 

HPに内部リンクを付ける方法説明

 

 

 

 

 

 

 

 

すると下記の ハイパーリンクの挿入ボックス2 が出てきます。

今回は通常のリンクなので通常ですが、 『ネイルサロン○○にようこそ』 をクリックした時にメールを送りたい時は、

メールリンクをクリックして、設定してください。

 

『リンクファイルの場所(U)』 には、先程選択したファイルが入ってます。

 

その下のターゲットは、リンクをクリックした時に、新しいタブを開くのか、新しいブラウザで開くのか、

今開いているページの上に新しくリンク先を開くのかを設定します。

 

blank   は新規のウィンドウを立ち上げます。

self    は現在のウィンドウに表示します。

 

基本は新しいウィンドウを立ち上げればいいと思います。

 

きめたら  OK  をクリックします。

 

リンクを開くときの設定方法説明

 

 

 

 

 

 

 

設定ができたら、下記のように、リンクが設定されてます。

リンクの場合は、文字の下に線ができるようにしたほうがいいので、私はCSSでかならず線が出るように設定してます。

ここはリンクですよ!! とわかりやすくするのも、お客様に使いやすくしている1つの方法です。

 

リンクを付けた場合の説明画像

 

リンクの設定は以上です。簡単ですね。

いろいろとやってみてください。

 

 

 

 

 

では続いて、画像を消すときの最低限のルールです。

簡単にバックスペース (キーボードの back) で消してもいいのですが、

今回はHTMLにいらないタグを残さないように消す方法です。

 

イロイロ編集していると画像を消したり入れたりすることになるので・・・。

 

右サイドバーで、一番上に置いてある画像を消してみますので、一緒にやってみてください。

ココをよんでわかったふりは絶対になしで!!

 

まずは、左から2つ目の画像を見てください。

画像をアクティブにしてから、キーボードの → をおして、画像のすぐ後ろ(画像の位置)に、

カーソル(テコテコして文字を書くときの・・)を持ってきます。

 

そして、キーボードのバックスペースを押して消します。

 

次に画像を入れるときは、左から3枚目の画像を見てください。

画像の上の文字の前にカーソルを持って行き、 キーボードの エンター をクリックして1段下げます。

そして、一番左の画像のように、画像を入れたい部分をアクティブにして、

先ほどやった画像挿入をします。

 

簡単なのですが、イロイロやっているうちに崩れることがあります。

 

もし崩れたときは、保存せずに、保存する前の状態のページを HP作成ソフトで開いてやり直してください。

ですので、うまくできているときは、こまめに保存しておかないと、2時間ぐらい触ってから何かの拍子にHPが崩れたら・・・・・

2時間ぐらい前の状態からやり直しになっちゃいます(-_-;)

 

HPに載せた画像の消し方HPに載せた画像の消し方2HPに載せた画像の消し方3HPに載せた画像の消し方4

 

 

 

では、以上で、無料HP作成ソフトの説明は終わりました。   お疲れ様でした。

では、次は・・・・・

広告

 

広告

HP作成過程

 

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

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

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

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

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

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

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

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