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

HTML・CSS

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

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

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

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

スポンサーリンク

方法1:HTMLで直接書く

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

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

無料で使いやすいフリーの『テキスト エディタ』
ホームページの作成・修正には「テキストエディタ」が必要になります。Windowsに付属の「メモ帳」でも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">更新情報2</a></p>
 <p>20xx.07.20 <a href="http://xxxxxxx">更新情報1</a></p>
 <!-- ▲新着情報ここまで  -->

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

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

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

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

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

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

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

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

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

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

実際の動作イメージ

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

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

まずは、フレーム内に表示させるための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">ページ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>

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

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

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に対応していない人へのメッセージになります。

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

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

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

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

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

ホームページの新着情報更新を簡単にするCGI/PHP
新着情報をトップページに表示する方法、第2弾です。 前回の『HTMLで更新する方法』はこちら↓ 下層ページを追加・更新するたびに、 トップページの「更...

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

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

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

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

インターネット上でも学習はできますが情報が断片的なので、もっと詳しく学びたい方は、初心者向けの本を1冊読んでみるのもおススメです。

速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

HTML・CSS
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
ホームページの作り方