新着情報の作り方(更新情報を表示させる方法)

ホームページ作成

whatsnes

ホームページ内の、ページを更新・追加した時は、
トップページに『新着情報』を表示させて、より多くの人に見てもらいたいですよね。

ワードプレスなど「システム」を使ってホームページを作る場合は、
新着情報なども、自動で表示するよう作ることもできますが

ホームページビルダーや、HTML、テンプレートなどを使って作る場合、
新着情報は、その都度『手動』で更新する必要があります。

今回は、
システムを使わずに作る「更新情報を表示させる方法」を2つご紹介します。

(1)HTMLで直接書く

トップページ(index.htmlなど)のHTMLファイルに、
更新した日付と、更新内容と、更新した記事へのリンクを直接書き込みます。

ホームページビルダーなどがあれば、文字の書き換えやリンクは簡単ですが、
ホームページソフトを持っていない場合でも、
HTMLを、無料で使える『テキストエディタ』で開いて、
追加・修正する事で対応できます。

■表示例

■HTMLソースコード例

[code]2014/07/20
<a href=”ここにリンクURLを入れる”>
ホームページを更新しました
</a> [/code]

 

※リンクをクリックした時に、ページが切り替わるのではなく、
別ウィンドウで開いて欲しい場合には、target=”_blank”を書き足します。

[code]2014/07/20
<a href=”ここにリンクURLを入れる” target=”_blank”>
ホームページを更新しました
</a>[/code]

HTML内で、更新する箇所を探すのは結構大変なので、
<!– ▼新着情報ここから  –>というような『目印』を書いておくと、
HTML内で更新箇所を探すのが楽になります。

<!– と –> の間に書いた文字は、
『コメント(コメントアウト)』として画面上には表示されません。

[code]<!– ▼新着情報ここから  –>
<p>09/07/20 <a href=”http://xxxxxxx”>更新情報2</a></p>
<p>09/07/20 <a href=”http://xxxxxxx”>更新情報1</a></p>
<!– ▲新着情報ここまで  –>[/code]

★ とか ▼ といった「塗りつぶしの記号」は、HTMLの中でも目立つので、
かなり、該当の箇所を見つけやすくなります。

他のページを更新するたびに、
トップページも書き換えなくてはならないので手間はかかりますが、
一行そのままコピー&貼り付けして、書き換えるだけで済むので
比較的カンタンに更新することができます。

 

(2)iframeで「新着情報」を表示させる。

HTMLファイルを操作すると、間違って壊してしまいそうで怖い…という方は、
『iframe(アイフレーム)』を使って、新着情報を表示させる方法もあります。

トップページのHTML内に直接更新情報を書き込むのではなく
“新着情報用だけ書いたページ”を別に用意して、
トップページに合体表示させるような感じです(?)

■動作サンプル

STEP1.表示させる「中身」を用意する

まずは、フレーム内に表示させるHTMLファイルを準備します。

■新着情報部分のHTML例

[code]<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>新着情報</title>
</head>
<body>
<p>20xx/07/20 <a href=”https://web.syumichuu.com/html/post227.html” target=”_parent”>新着情報の作り方(更新情報を表示させる方法)</a>を公開しました</p>
<p>20xx/07/18 <a href=”https://web.syumichuu.com/” target=”_parent”>ページB</a>を修正しました</p>
<p>20xx/07/09 <a href=”https://web.syumichuu.com/” target=”_parent”>ページA</a>を公開しました</p>
<p>20xx/07/01 <a href=”https://web.syumichuu.com/” target=”_parent”>ホームページを開設しました</a></p>
</body>
</html>[/code]

枠内に表示されているHTML本体だけを表示させてみると、
更新情報だけのシンプル構成になっているのが分かると思います。

ソースコードが簡潔なので、初心者さんでも修正する箇所が分かりやすいですし、
万が一の時にも影響はフレーム内だけで済むので、全体のレイアウトが崩れる心配もありません。

iframe内のリンクは、必ずターゲット(target=””)指定しましょう。
target=”_parent” —- 親ページ(今見ているページ全体)が切り替わる
target=”_blank”  —- 別ページで開く   
targetの指定なし —- iframe内に別ページが表示されてしまう

 

STEP2.埋め込むための「枠」を作る

次に、新着情報を表示させたいページ(トップページなど)のHTML内に、
iframe(アイフレーム)のタグを追加
します。

[code]<iframe src=”whatsnew.html” width=”600″ height=”150″>
インラインフレーム対応ブラウザでご覧いただけます。</iframe>[/code]

「whatsnew.html」の部分は、
Step1で作った「新着情報の中身」のファイル名(URL)に書き換えてくださいね。

ちなみに、width=”600″は枠の横幅、height=”150″は高さを指定しています。
お好みで書き換えてご利用ください。

「インラインフレーム対応ブラウザでご覧いただけます。」の部分は、
古いブラウザなどiframeに対応していない人へのメッセージになります。

枠を埋め込んだページを表示させて、無事、新着情報ページが見れたら完成です。

…ブラウザ上で更新できるようにできないの?

毎回HTML書き換えて、ファイルをFTP転送させるのは面倒…という人は、
CGIやPHPを設置して、新着情報や更新履歴を生成する方法もあります。

システムを設置するのに手間がかかるのと、
システムに対応できる「サーバー」が必要になりますが、
一度作成してしまえば、ブラウザ上で簡単に追加・修正ができるようになるので

更新頻度が高く、毎回の作業時間を省きたい方や、
HTMLやFTPが分からない担当者に、更新をしてほしい時などにオススメです。

ホームページの新着情報更新を簡単にするCGI/PHP