初心者向けホームページ制作教室 5日目

初心者向けホームページ制作教室 5日目に関する記事です。

ホームページ制作者によるSEO対策と副業のススメ皆様のおかげでランキング順位が凄いことになってます!!

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[RSS] [Admin] [NewEntry]

ホームページ制作者によるSEO対策と副業のススメ皆様のおかげでランキング順位が凄いことになってます!!

5日目です。

昨日に引き続き、リンクの挿入です。



相対アドレスで、サイト内リンクを作ると共に、

左側メニューの一括更新も行います。



今日の作業に入る前に、index.htmlファイルを複製して、

page1.htmlファイルの作成は済んでいますか?

必ず作っておいて下さい。

ホームページ制作者によるSEO対策と副業のススメ:ホームページ制作資料1

,


まず、相対パスについて。

相対パスとは、そのhtmlファイルのある場所から見て、

リンク先のファイルの場所を示します。



例えが良いか判りませんが、簡単に説明すると

絶対パスは「○○県○○市~」と、誰が見ても判るようにキッチリ表示します。

相対パスは「隣の家ですよ」と、曖昧に示します。



曖昧なため判りにくいですが、その分、記述が少なくて済みます。

また、サーバー移行等によるアドレス変更に強いです。

(地域名が変わっても、お隣さんは変わりませんから)




とりあえず、実際にindex.htmlからpage1.htmlへリンクを貼ってみましょう。

仮にあなたが「1tmj.com」というドメインを取得した場合、

page1.htmlのアドレスは、

「http://www.1tmj.com/page1.html」となります。



つまり、昨日のリンク設定方法で記述すると、

<a href="http://www.1tmj.com/page1.html">page1.htmlへ</a>

となります。



ここで、index.htmlとpage1.htmlは同じフォルダ内にあるお隣さん同士です。

そこに相対パスを適用すると、下のように簡単に書くことが可能です。

<a href="page1.html">page1.htmlへ</a>



では、階層(htmlファイルが格納されたフォルダ)が違う場合はどうなるのか?

例として、「next」というフォルダの中にpage1.htmlを移動させたとします。

ホームページの階層について


この場合は・・・

絶対パスの場合:<a href="http://www.1tmj.com/next/page1.html">

相対パスの場合:<a href="next/page1.html">

となります。



逆にnextフォルダ内のpage1.htmlから、index.htmlへのパスはというと・・・

一つ上のパスを指定する場合、ピリオド"."を2つ使います。

<a href="../index.html">



これを左側メニューでも適用します。

通常は、ページごとにリンクを修正する必要がありますが、

今回のテンプレートはプログラミングを組んでいますので、

一箇所の修正で全てのページに適用されます。



まず、htmlファイル同様にメモ帳で「menu.js」を開いてください。

開いたら、次のように書き換えてください。


 index.html → page1.html

 製作中 → ページ1へ

メニュー部分の記載方法



上書き保存すると、左ページのメニューに反映されます。



尚、更にページを追加していく場合は、

<dd>から、</dd>のところまでをコピーして、

コピーした範囲のすぐ後ろに追加して下さい。



例:

メニューの記載方法2



注意:改行は絶対にしないで下さい。プログラムが正常に動作しなくなります。






※ちなみに、index.htmlはトップページとなる規定のhtmlファイル名称ですので、

 「http://www.1tmj.com/」で表示されます。

 もちろん、http://www.1tmj.com/index.htmlでも表示されます。






■ 本日のまとめ



1.相対リンクはサイト内検索で有効、サーバー移動による影響がない。

2.一つ上の階層にリンクを貼る場合は、ピリオドを2つ使う。"../"



注意事項:

 基本的にフォルダを作ってhtmlファイルを格納すると、

 レイアウト構成が変わります。

 出来るだけ、tmj_template内にhtmlファイルを格納してください。





■ 明日の予定


いよいよ無料のレンタルサーバーを使って、実際にホームページを公開します。

今日のリンクがキチンと貼られているか、

ちゃんと確認しておいて下さい。



また、下記ページより「FFFTP」ソフトを

インストールしておいて下さい。

サーバーにhtmlファイルをアップする際に使用します。



FFFTPソフト配布ページ

※インストールするのは、最新版で構いません。




■ 質疑応答


昨日のリンクについて、書き込む場所を指定してませんでしたので、

ここで説明をします。

3日目の画像同様、本文の中に書き込みます。



○段落内(<p>と</p>の間)に挿入する人はコチラ

<a href="リンクさせたいアドレス">画像・文字列</a>

※必要によって改行タグ<br>を忘れずに。



○段落の外に挿入する人はコチラ

<p><a href="リンクさせたいアドレス">画像・文字列</a></p>



もちろん、本日行ったメニュー内でも構いません。

その場合は、下のようになります。

<dd><a href=\"リンクさせたいアドレス\">文字列</a></dd>




今日はもう一つ

中国の方より、「中国語で制作すると文字化けを起こす」

との報告も頂きました。



今回のテンプレートは日本語対応となっているため。

他国語での表記をする場合は、言語指定を変更する必要があります。



index.htmlファイルの5行目、

「charset=Shift_JIS」と書かれている部分を次のように書き直してください。

「charset=gb_2312-80」



さすがに私も中国語のページは作ったことが無い上、その環境も無いため、

検証はしていませんが、これで大丈夫かと思います。

スポンサーサイト
ホームページ制作者によるSEO対策と副業のススメお役に立ちましたらランキングの応援クリックお願いします

※質問・相談などありましたらメールフォーム(左側)より承ります。


[RSS] [Admin] [NewEntry]

コメント
この記事へのコメント
難しい。
こんにちわ!エスエフです。
いつも貴重なコメントをありがとうございます。

一気に難しくなりました..。
2~3度読み直してなんとか理解できました。(笑)

しっかり理解してないと、
ついて行けなくなりそうです。

ですが、すごく勉強になりました。
ありがとうございます。

明日も楽しみにしてます。
では、応援クリック!


2007/07/21(土) 13:14 | | エスエフ #-[ 編集]
富む・狂う’sさん
ボンジュール!リカです。
お世話になってます^^

改行はしないで下さいとかの
注意、きめ細かいですね><
いよいよ5日まで来ましたね^^
後半戦ですね~

よい週末をお過ごしください。
応援ぽちぽちっ!
また来ますね!
2007/07/21(土) 13:17 | | ボンジュール!リカの稼げる理由 #-[ 編集]
富む・狂う'sさんこんにちは
ゆうきちです。
コメントありがとうございます。

初心者向けホームページ製作教室

すごく勉強になりますね、リンクの挿入などわかってるようでわかってないん
ですよね~。


またお邪魔します。
応援ポチ☆
2007/07/21(土) 13:28 | | 2児の父親@ネットビジネス1本 #-[ 編集]
こんにちは

一応同業者ってことでチラチラ覗いてました(^-^)

気になったんですが、
Pタグの内と外、逆じゃないですか?
二日目(かな?)に書いてあったのも逆だったと思います。

俺が文章の意味勘違いしてたならごめんなさいー
2007/07/21(土) 14:51 | | diechang #-[ 編集]
tomです。

ちょ、ちょっと難しくなって
きましたね・・・汗

一応言われた通りmenu.jsを
変更したらちゃんと表示が
変わりました、すげー!

絶対・相対の意味もよくわかり
ました、ああいうリンクでも
飛ばせるんですね。

たしかにサーバー移行の時は
非常に便利です、思いもしま
せんでした。

やっぱプロは違いますね。
最後までついていけるかな・・・

応援済み。
2007/07/21(土) 16:25 | | 【ブログとメルマガのアフィリエイトで稼ぐ戦術と思考】 #-[ 編集]
すごいナリ♪


相対パスやっと意味がわかったナリ♪
2007/07/21(土) 16:40 | | けん #-[ 編集]
なるほど。
2回ほど読んで理解できました。
5日目でレベルアップですね。

応援ぽち。
2007/07/21(土) 20:37 | | 起業家ベビーイノセンス #-[ 編集]
(。・ω・)ノ゙ コンバンゎ♪

ウッ!!Σ(・ω・;)
早くも5日目。。。
だいぶ、進んでるホームページ制作
教室…。
この週末にゆっくり見ようと思って
ましたが、大丈夫かな~??
(・ω・;A)アセアセ…

応援 (U σ´(Å)`)σ ワン
2007/07/21(土) 20:48 | | のむ #-[ 編集]
こんばんわ
平凡おやじです。

中国の方からも
質問がくるんですね。

それにもちゃんと対応が
できるなんて、尊敬です。

では応援♪
2007/07/21(土) 21:55 | | 平凡おやじ #-[ 編集]
富む・狂う'sさん、こんばんは♪

絶対と相対の違いがよく分かりました^^

相対はホームページ移動の時など便利そうですね。

応援ポチッ
2007/07/21(土) 23:20 | | final777 #63bylevQ[ 編集]
富む・狂う’sさん
こんばんは! ぱーる21です♪
いつも応援、コメントありがとう(^^♪

毎回、細かく説明されているのでHP無知な私でも理解が出来ます。

またお邪魔しますね! 応援ポチっ♪
2007/07/21(土) 23:35 | | 簡単に誰でもがアフィリエイトで稼げる方法 #-[ 編集]
こんばんは~☆
今日は色々で遅くなって
しまいました~

昨日の質問回答ありがとうございます!!
これでわかりました。

今日のリンクのやり方・・・
ちょっと難しそう。
じっくりがんばってみます。

今日も応援♪
2007/07/22(日) 00:06 | | ずんぴ #jSi3vTMA[ 編集]
こんばんわ
あーちゃです
やばい・・・・
難しすぎて
わからなくなってきた
富むさんが怖くなってきましたよ
ポチッ
2007/07/22(日) 00:06 | | あーちゃの自然体ブログアフィリ #-[ 編集]
こんばんは (*´ω`*)
富む・狂うsさん♪

昨日あたりから…本日は更に難易度が
上がってきましたね。
絶対パスと相対パス、勉強させて頂きました!
ちょっと前の方へ戻って、復習したいと思います。
最初まで戻ったりして…(笑)

(*´ω`)σ凸ポチ
2007/07/22(日) 00:44 | | はむちゃん #ncVW9ZjY[ 編集]
富むさん、おはようございます
儲ケロケロです。
いつもありがとうございます♪

私は皆さんのコメントのように
作業はまだです…

時間がある時にやります!

本来は同時進行の方が良いのだろうけど…

いずれホームページは作成します♪

またお邪魔しま~す☆
応援ポチケロ♪
2007/07/22(日) 04:27 | | 儲ケロケロ #-[ 編集]
富む・狂う'sさん、おはようございます^^

癒やし職人@ゆうです。

いつもお世話になっております♪

ピリオドは小さいので要注意ですよね^^

私はよく忘れてえらいことになって

しまします。。。

また遊びにきます。

癒やしの応援♪ヾ(*⌒∇⌒)ノ☆
2007/07/22(日) 06:10 | | 癒やし職人@ゆう #-[ 編集]
おはようございます。
朝から失礼します。
またわからない事が・・・

今まで作ってきたHPの
アドレスがわからないのです。
これってドメインを取得すれば
いいのですか?
またドメインを取得する方法も
わかりません。

今ここで作業が止まってしまいま
した(泣)

どうぞよろしくお願いします。

今日も応援♪

2007/07/22(日) 07:16 | | ずんぴ #jSi3vTMA[ 編集]
こんにちは

もっている人に任せるのが一番ですね

応援
2007/07/22(日) 09:10 | | セールス分析のささ #-[ 編集]
ついていかない。
コンニチワ~
でんです。

ホームページ作成は自分で考えていないのでもうついていかない私です(笑)

役割分担を考えて作らない人は富むさんに依頼すればいいのです♪

応援クリーック!
2007/07/23(月) 11:04 | | 寝ながら稼ぐ男 でん #-[ 編集]
ヘアケア
ヘアケアを探すなら http://www.allnavi.jp/100939/100940/
2008/10/01(水) 23:28 | | #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://johokigyou.blog81.fc2.com/tb.php/164-42aaed47
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。