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

ホームページのページを更新・追加した時、トップページに『新着情報』として表示すると、より多くの人に見てもらいやすくなります。

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

もし、ワードプレス等でホームページを作るのであれば、トップページに自動で新着情報を表示させることも可能ですが、システムを使う場合はPHPなどプログラミングの知識が必要になってしまうので、

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

→ 未経験から最短3カ月でプログラマーへ！！【０円スクール】

▼もくじ

方法1：HTMLで直接書く
方法2：iframeで「新着情報」を表示させる。
1. STEP１．表示させる「中身」を用意する
2. STEP２．埋め込むための「枠」を作る
ブラウザから簡単に更新できるようにしたい時は？

方法1：HTMLで直接書く

更新するたびに、トップページ（index.htmlなど）のHTMLファイルを直接修正する方法です。

ホームページビルダーなどがあれば、文字の書き換えやリンクは簡単ですが、ホームページソフトを持っていない場合は、テキストエディタを使って、HTMLを手作業で追加・修正する必要があります。

HTMLソースコードの例

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

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

「target」は、リンクを開くウィンドウを指定するタグで、「_blank」は、新しい空白ページを開くという指示になります。

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

ゴチャゴチャしたHTMLソースの中から、更新箇所を見つけるのって、ちょっと面倒だな・・・

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

<!–　～　–>　の間に書いた文字は、実際のホームページ画面上には表示されない『コメント』という扱いになります。

<!--　▼新着情報ここから　 -->

このようなコメント＝目印を書いておけば、HTMLソースを見た時に「どこを修正すればいいのか」見つけやすくなります。

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

★　とか　▼　といった「塗りつぶしの記号」は、HTMLソースの中でもとても目立つので、修正箇所を見つける手間が省けます。

〇メリット
コピー＆書換えだけなので、システムやHTMLの知識がない人でも比較的カンタンに更新できる。

△デメリット
他のページを更新するたび、手作業でトップページを修正しなくてはならないため手間がかかる。

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

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

HTMLを修正すると、間違って壊してしまいそう・・・怖いから、あまり触りたくないなぁ・・・

そういう場合は『iframe（アイフレーム）』を使って、新着情報を表示させる方法もあります。

トップページのHTMLを直接修正するのではなく、

『新着情報専用のページ』を別に用意しておいて、トップページに埋め込み表示させるようなイメージになります↓

これなら、ホームページ全体を壊してしまう心配もありません。

実際の動作イメージ

インラインフレーム対応ブラウザでご覧いただけます。

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

STEP１．表示させる「中身」を用意する

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

■新着情報部分のHTML例（whatsnew.html）

<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/hp-whatnew/" target="_parent">新着情報の作り方(更新情報を表示させる方法)</a>を公開しました</p>
 <p>20xx/07/18 <a href="https://web.syumichuu.com/" target="_parent">ページＢ</a>を修正しました</p>
 <p>20xx/07/09 <a href="https://web.syumichuu.com/" target="_parent">ページＡ</a>を公開しました</p>
 <p>20xx/07/01 <a href="https://web.syumichuu.com/" target="_parent">ホームページを開設しました</a></p>
 </body>
 </html>

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

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

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

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

STEP２．埋め込むための「枠」を作る

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

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

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

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

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

枠（iframe）を埋め込んだトップページをブラウザで表示させて、無事に新着情報欄がに文字が表示されていたら完成です。

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

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

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

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

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

ただ、一度作成してしまえばブラウザ上で簡単に追加・修正ができるようになるので、

サイトの更新頻度が高く、作業時間をできるだけ省きたい方
HTMLやFTPが分からない担当者に更新を任せたい時

などは、システム化するメリットの方が大きいと思います。

使いこなせるようになりたい方は、

現役Webデザイナーが案件の挑戦まで徹底サポートしてくれるスクールなどで、一度しっかり体系的に学んでみるのがおすすめです。