新着情報の作り方|システムを使わず更新情報を表示させる2つの方法

ホームページ作成

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

ワードプレス等を使ってホームページを作る場合は、ページを更新すれば自動的に新着情報がトップページに表示される、という事も可能ですが、PHPなどシステムの知識が必要になるため、少しハードルが高いですよね。

ホームページビルダーや、HTML、ホームページ用のテンプレートなどを使ってサイトを作る場合は、新着を自動で表示させることができませんので、新着情報はそのつど『手動』で更新する必要があります。

今回は、できるだけ簡単で手間がかからない「システムを使わない更新情報を表示させる方法」を2つご紹介していきます。

方法1:HTMLで直接書く

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

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

HTMLソースコードの例

20xx.07.20
<a href="ここにリンクURLを入れる">
ホームページを更新しました
</a>

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

※target(リンクを開くウィンドウを指定)_blank( 新しい空白ページ)

20xx.07.20 
 <a href="ここにリンクURLを入れる" target="_blank">
 ホームページを更新しました
 </a>

記号だらけなHTMLソースの中から、更新する箇所を探すのは意外と大変ですよね。

そんな時は、“コメント(コメントアウト)”を活用しましょう。

<!– ▼新着情報ここから  –>というようなコメントを目印を書いておけば、HTMLソースを見た時に、どこを修正すればいいのか分かりやすくなります。

<!– と –> の間に書いた文字は、HTMLソースの中では見ることができますが、画面上(デザイン上)には表示されない仕組みになっています。

<!-- ▼新着情報ここから  -->
 <p>20xx.07.20 <a href="http://xxxxxxx">更新情報2</a></p>
 <p>20xx.07.20 <a href="http://xxxxxxx">更新情報1</a></p>
 <!-- ▲新着情報ここまで  -->

★ とか ▼ といった「塗りつぶしの記号」は、HTMLソースの中でもとても目立ちます。

「〇行目付近」など覚えておかなくても、すぐに修正すべき場所を見つけることができるので、時間短縮できますよ。

HTMLで新着情報を書きかえる方法は、他のページを更新するたびに、トップページも書き換えなくてはならないというデメリット(手間)がありますが、その分、難しいシステムなどを設置する必要がありません。

一行そのままコピー&貼り付けして、書き換えるだけで済むため、比較的カンタンに更新することができます。

無料配布されているホームページテンプレートを使ってホームページを作っている方も、この方法が一番シンプルでわかりやすいと思います。

方法2:iframeで「新着情報」を表示させる。

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

トップページのHTMLを直接修正するのではなく、“新着情報専用のページを”用意して、トップページに埋め込んで『合体表示』させるようなイメージです(?)

動作イメージ

枠内に表示されているHTML本体だけを表示する

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

まずは、フレーム内に表示させるためのHTMLファイル(中身)を準備します。

■新着情報部分のHTML例

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

ページの中身が更新情報だけという、かなりシンプル構成になっています。初心者の方でも修正する箇所が分かりやすいと思います。

「ちょっと触ったらおかしくなってしまった…」というようなことがあっても、影響はフレーム内だけで済むので、全体のレイアウトが崩れるという心配がなくなります。

iframe内のリンクは、必ずターゲット(target=””)指定しましょう。

target=”_parent” —- 親ページ(今見ているページ全体)が切り替わる
target=”_blank”  —- 別ページで開く   
targetの指定なし —- iframe内に別ページが表示されてしまう

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

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

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

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

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

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

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

ブラウザから簡単に更新できるようにしたい時は?

ホームページ初心者の方に多い悩み「どこを触ったらいいのかわからない」「書き換えたら壊しそう」という悩みを解決する方法を2つご紹介しましたが、

毎回HTMLを書き換えて、ファイルをFTP転送させるのは…やはり面倒ですよね。

もし、少し勉強してもいいから運用時に楽したい!という方は、CGIやPHPを設置して、新着情報や更新履歴を生成する方法もあります。

ブラウザ上で更新できるようになれば、とても便利で時間短縮にもなりますが、システムを設置するのに知識が必要になる事と、『システムに対応できるサーバー』が必要になるというデメリットもあります。

ただ、一度作成してしまえばブラウザ上で簡単に追加・修正ができるようになるので、更新頻度が高く、毎回の作業時間を省きたい方や、HTMLやFTPが分からない担当者に更新をお任せする時などは、システム化するメリットは大きいと思います。

ホームページの新着情報更新を簡単にするCGI/PHP
新着情報をトップページに表示する方法、第2弾です。前回の『HTMLで更新する方法』はこちら“下層ページを追加・更新するたびに、 トップページの「更新情報」も書き換えてアップロード、というのは面倒ですよね。毎回HTMLを手作業で書き換えなくて

 

もっと詳しく学びたい方は、こちらの本もおすすめです。