トップページ・下部 左側に表示される [ 新着情報 ] の更新手順について、見ていきましょう。
更新を行うファイル
- / index.html
準備すべき情報
- 掲載日 ( 日付 )
- 掲載する文章
- リンク先 ( リンクする場合のみ )
編集・更新する箇所
- index.html: 190 行目 付近
<div id="index_midl">
<div id="midl_com">
<!--新着情報-->
<div id="new" class="flexcroll">
<div class="midl_ttl"><img src="img/new.png" width="340" height="70" alt="新着情報"/></div>
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->
<div class="top_info">
<dl>
<dt>2020年2月6日</dt>
<dd>
<p class="noImages">居住支援セミナー開催の報告を掲載しました。<br>
詳しくは、<a href="kyoju/index.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div>
<div class="top_info">
<dl>
<dt>2020年2月6日</dt>
( 以下略 )解説
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->- <div class=”top_info”> から始まり</div> で終わるひとかたまりが「 新着情報 」の１つの情報単位です
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->- <dl> <dt> <dd> タグを使用しています
- <dt> タグで 掲載日 ( 日付 ) を記します
- <dd> タグで 掲載する文章 を記します
- リンクをはりたい箇所がある場合には、通常通り <a> タグで囲い、リンク先のアドレスを href 属性で指定します
更新作業
更新作業前の例
<!-- ここに、下記ブロックを丸ごとコピー（複製）します。その後、内容を編集します -->
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->STEP
１つの情報のかたまりとなる HTML をコピー
前出の HTML を例とすると、全 10 行を一括してコピーします
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->STEP
コピーした内容を、その直前に貼り付け
コピーした内容を、コピーした箇所のさらに上部に貼り付けます。
HTML としては、上にある記載が上方に表示されますので、この場合には、より最近の情報として上部に表示されます。
<!-- ここにコピーをしました。コピー直後は、同一の情報が 2 つ並ぶことになります -->
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->
<!-- 下は、コピー元の内容です -->
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->STEP
貼り付けた内容を編集
上のかたまりのうち、以下の点について情報を更新します
- 日付
- NEW アイコン
- 下のかたまりで、表示する必要がなくなった場合には、 <span>NEW</span> を削除
- 本文
- <dd> タグ内の、<p> タグ内のテキストを編集
- リンク <a> タグの記載
- [例] さくらだよりへのリンク : <a href=”sakura/index4.html”>こちらから</a>
<!-- こちらのかたまりの内容を編集して、「 新着情報 」として掲載する -->
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2022年1月1日<span>NEW</span></dt>
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->
<!-- 下は、コピー元の内容です -->
<div class="top_info"> <!-- 注記 : ここから、１つの情報のかたまり -->
<dl>
<dt>2021年2月8日</dt> <!-- <span>NEW</span> を取る -->
<dd>
<p class="noImages">さくらだより最新号を掲載しました。<br>
詳しくは、<a href="sakura/index4.html">こちらから</a>どうぞ。</p>
<br>
</dd>
</dl>
</div> <!-- 注記 : ここまで、１つの情報のかたまり -->STEP
保存後、ブラウザで表示を行い確認
STEP 3 の HTML をブラウザで開くと、以下のように表示されるでしょう。下記の点を確認します。
- 2021年2月8日 よりも上部に 2022年1月1日 の新着情報が掲載されている
- NEW のアイコンは、2021年2月8日には表示されなくなった
- STEP 3 で <!- – – -> で囲うことによりコメント化したため
- 2022年1月1日には NEW のアイコンが表示されている
以上の手順で、新着情報欄に新しい情報を掲載することができます。
