【Q】ホームページが大きくなるにつれてナビゲーションの管理(?)に困っています。ページを増やすたびにたくさんのファイルを変更しなくてはいけません・・

   web入門, web知識あれこれ| 

ナビゲーションは、ホームページによっては、サイトのヘッダーにあったり、サイドナビにあったりして、目次の役目を担う部分ですが、ページが増えたり、サイト内で何か変更があったときにナビゲーションも変えないといけないので、数ページ程度のサイトなら問題ないのですが、何十ページと増えてくるとリンクミスを起こしたり、なかなか管理が大変です。

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残していこうと思います。古い情報が入っていますのでご注意ください。

Dreamweaverを使う方法

Dreamweaverを持っている場合は、テンプレートかライブラリーという機能を使えば、サイト内のナビゲーションなどの管理が楽になります。

テンプレートとライブラリーの違いはこうです。
テンプレートは全体のデザインを作っておいて、共通部分(ナビゲーション)はテンプレートに管理させ、テンプレートの中に編集可能領域を設定し、その中にコンテンツを作って行く方法です。
ライブラリーは、ページそのものは普通に作っておいて、共通部分をパーツのようにライブラリーの中にいくつか作って行き、共通部分(ナビゲーション)が変更になったらライブラリーを更新する。すると、サイト内のライブラリーを使っているページが一斉に書き換わるというものです。

[Dreamweaverのテンプレートとライブラリーの違い]
tpllbi

私が使ってみて思うにはテンプレートよりはライブラリーの方が初心者にやさしいです。テンプレートは、リニューアルなど、テンプレートの差し替え等の操作を間違えると、サイト内を壊してしまい大変な状態になってしまう可能性が・・・・。

こちらの動画マニュアルで、Dreamweaverのテンプレートの使い方と、ライブラリーの使い方を紹介していますので初心者の方は参考にしてください。テンプレートとライブラリーは最初の設定を間違えるとおかしいことになるので注意が必要です。
コツとしては、ナビゲーションのリンク先が相対パスになっていること。
テンプレートやライブラリーとして保存したとたんに、そのテンプレートからみたパスに書き換わります。
それが、テンプレートやライブラリーを適用したとたんに、そのファイルからみたパスに自動的に書き換わります。

>Dreamweaverのテンプレートの使い方
>Dreamweaver のライブラリーの使い方

PHPにしてナビゲーション部分を読み込む方法

htmlファイルをphpファイルに変えて、共通部分を読み込ませるという方法があります。サーバーがphpに対応していないと使えません。
ヘッダー部分をheader.phpで作っておき、サイドナビの部分をsidenavi.phpで作っておき、
読み込ませたい部分に下記のコードをいれます。

<?php include(”header.php”); ?>

phpでヘッダーとサイドナビを読み込む方法

phpinclude

ページはindex.phpという拡張子で保存します。
サーバーにアップして、ブラウザのアドレスに
http://www.●●.com/ と打ち込むと 、そのディレクトリに、index.htmlが存在する場合はそちらが出てしまうので注意が必要です。その場合は、index.htmlは削除しておき、index.phpが表示されればOK。だめだったら、.htaccessでサーバーの設定を変更する必要があります。
どう変更するかというと、「スラッシュ以下を省略した場合、最初にindex.phpを読みにいきなさい、そのファイルがない場合は、index.htmlを読みにいきなさい」というような命令を書いてあげないといけません。詳しくは上記の.htaccessの使い方を見てください。

phpファイルについては、もう少し詳しく紹介したいところですが、かな~りざっくり説明すると、

htmlの中に埋め込むことができる便利なプログラムの言語で、全部をこのプログラム言語で書く必要はなく、ウェブデザイナーさんが知っているHTMLの中の一部として使うことができます。
上記で利用した命令は、includeという命令ですが、他にもいっぱい便利な命令があり、ここに今日の日付を入れなさいとか、ここにユーザーの名前を入れなさい(その名前はユーザーによりそのたびに変わる)そんないろんなことができます。
これだけではあまりにも片手落ちなので参考サイトを載せておきます。
>>php.net PHP とはなんでしょう?

htmlファイルではなくなると、作業しているパソコン上でプレビューができなくなってしまいます。(Dreamweaverでphpファイルを作っている場合はできますが)
その場合は、自分のパソコン上にプログラムが動く場所(Apache+PHPの動く場所)を作らなければいけません。
>>PHP制作環境の設定(macもしくはウィンドウズのところを見てください)

拡張子が変わってしまうと外部リンクなどもリンク切れになってしまい困る

htmlという拡張子のままでも、phpを動かす方法はあります。サーバーの設定を変えないといけないんですが、下記を参考にしてください。
>>拡張子htmlのファイルをPHPで動かす
>>さくらサーバーで.php以外の拡張子でphpを動かしたい

 

webの森では、デザイナーの卵さん向けの個人講習も行っています。
会社でweb担当者になったんだけど、基本を知らないとまずいらしい・・・??と思われた方などなど。
詳しくはお問合せください

toi

   web入門, web知識あれこれ| 

  関連記事

ネットショップ経営者のための売上向上セミナー(松本)

8月に開かれた長野県主催のネットショップ店長さん向けセミナーですが、9月は松本市で開かれます。興味の… ≫続きを読む

Q)3Dセキュアって何?お客様がクレジットカードのパスワードがわからないと問い合わせがあります。

ネットショップでお買い物をするときのクレジット決済、「3Dセキュア」ってご存知ですか? 事例をあげて… ≫続きを読む

【ホームページの作り方】ポータルサイト・情報サイト・コミュニティサイトの作成

ポータルサイト、情報サイトで大事なことは、情報やページ数がどんどん増えていくしくみです。情報が大量に… ≫続きを読む

AIのチャットロボット「ChatGPT」登録方法と使い方

またもやすごいAIが登場。「ChatGPT」のWebアプリ版。現在は無料で使えるということで、早速使… ≫続きを読む

詐欺に合わないための注意

オモテのきっかけは「宮崎学の写真をNFTで販売してみたい」、裏のきっかけは「ゲームで課金するのはバカ… ≫続きを読む

画像が表示されないと困ったら(HTML初心者の方へ)

「画像が表示されません!どうして???」HTML初心者の方によく質問をされるんですが、いくつか理由が… ≫続きを読む

【Q】ネットショップには「ランディングページが大事」と聞きました。ランディングページって何ですか?

まずはランディングページ、見てみてください。こんなページのことです。ランディングページのリンク集 テ… ≫続きを読む

ブログとfacebookの違い
Q:FBページを作りました。書いたブログを自動的にリンクさせたいのですが・・・

A:結論からいうと、facebookの自動投稿はおすすめできません クライアント様から質問をいただい… ≫続きを読む

エックスサーバーをおすすめします

今回、つくづくエックスサーバーにしていてよかったという事件に出くわしたので紹介します。 エックスサー… ≫続きを読む

【Q】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)

SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・… ≫続きを読む

▲ページ先頭へ