「 さくらだより 」の更新方法

[ さくらだより バックナンバー ] への、「 さくらだより 」 PDF ファイルの追加・更新手順について、見ていきましょう。

更新を行うファイル

「 さくらだより 」一覧ページのアドレスは、ブラウザで確認すると、

https://www.kaigo-sakura.com/sakura/index4.html

です。

そのため、更新対象となるファイルは、以下の HTML ファイルであるとわかります。

  • / sakura / index4.html

準備すべき情報

  • 「 さくらだより 」の PDF ファイル
  • PDF ファイル名

掲載をする「 さくらだより 」の PDF ファイルについては、インターネット用に適切なファイル名をつける必要があります。命名のルールについて、後ほど確認をします。( STEP 1-1 )

編集・更新する箇所

  • sakura / index4.html : 66 行目 付近
<dl class="pink" id="pdf">
<dt>2021年 ( 令和 3 年 )</dt>
<dd>
  <ul>
    <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
    <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
    <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
  </ul>
</dd>
<dt>2020年 ( 令和 2 年 )</dt>
<dd>
  <ul>
    <li><a href="pdf/sakura2009.pdf" target="_blank">令和2年9月号</a></li>
    <li><a href="pdf/sakura2005.pdf" target="_blank">令和2年5月号</a></li>
    <li><a href="pdf/sakura2001a.pdf" target="_blank">新年号(前半)</a></li>
    <li><a href="pdf/sakura2001b.pdf" target="_blank">新年号(後半)</a></li>
  </ul>
</dd>

( 以下略 )

解説

<dt>2021年 ( 令和 3 年 )</dt> <!-- 年の表示部分 -->
<dd> <!-- 1 年のはじまり -->
  <ul>
    <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
    <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
    <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
  </ul>
</dd> <!-- 1 年のおわり -->
  • <dl> <dt> <dd> タグを使用しています

HTML の dl / dt / dd タグの使い方 – 説明リストを作成する ( 外部サイト )
https://code-kitchen.dev/html/dl-dt-dd/

  • <dt> タグで、西暦 + 和暦の見出しを記載します
  • <dd> から始まり </dd> で終わる行のひとかたまりが、年単位の情報のまとまりです

<dd> タグの内容を見てみましょう。

 <dd> <!-- 1 年のはじまり -->
   <ul>
     <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
     <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
     <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
   </ul>
 </dd> <!-- 1 年のおわり -->
  • <dd> タグ内で、<ul> <li> タグを使用しています

ul と li タグで順序なしのリストを作成す ( 外部サイト )
https://code-kitchen.dev/html/ul/

  • <li> タグで 1 つの PDF ファイルに関する情報 を囲って記します
  • <li> タグの中で、<a> タグでにより 表示する文字 を囲い、リンク先の PDF ファイルの存在するアドレスを href 属性で指定します

HTML の a タグ(リンク)コンプリートガイド ( 外部サイト )
https://code-kitchen.dev/html/a/

更新作業 その 1 : 同じ年の中に、PDF ファイルを追記する場合

この例では「 2021年 ( 令和 3 年 ) 」の欄に、新たに 2 つの「 さくらだより 」( PDF ファイル )

  • 2021年 ( 令和 3 年 ) 冬号(前半)」
  • 2021年 ( 令和 3 年 ) 冬号(後半)」

を追加掲載する想定で、更新を行います。

掲載する位置は、すでに存在する「 新年号(1) 」よりも上部(先に)表示することとします。

次の 4 つのステップで、「 さくらだより 」の更新を行います。

  1. 「 さくらだより 」の PDF ファイル名を決定する
  2. PDF ファイルを 「 sakura / pdf / 」フォルダにアップロードする
  3. PDF ファイルのアドレスを確認する
  4. タグ <ul> <li> <a> で、PDF ファイルへのリンクを作成する

更新作業前の HTML ファイル sakura / index4.html は、このような内容です。 ( 66 行目付近 )

<dl class="pink" id="pdf">
  <dt>2021年 ( 令和 3 年 )</dt>
  <dd>
    <ul>
      <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
      <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
      <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
    </ul>
  </dd>

( 以下略 )
STEP
「 さくらだより 」の PDF ファイル名を決定する

ウェブサイトに掲載する PDF ファイルのファイル名については、半角英数字で構成されることが望ましいですが、ここでは、これまでのルールを参考にして命名をします。

  • 例1 : 「 2021 年 ( 令和 3 年 ) 新年号(1)」の PDF ファイル名は sakura2101a.pdf
  • 例2 : 「 2020 年 ( 令和 2 年 ) 新年号( 後半)」の PDF ファイル名は sakura2001b.pdf
  • 例3 : 「 2019 年 ( 令和元年 ) 9 月号 」の PDF ファイル名は sakura1909.pdf

以上のことから、掲載する PDF ファイルの名前は、次のルールに従って命名されることがわかります。

  • sakura ではじまる ( 内容が「 さくらだより 」であることを示す )
  • 2022 年などの西暦のうち、下 2 桁を sakura の次に付与する
  • 発行2 桁の数字で付与する。新年号は 01 としたり、9 月号は 09 としたりしている
  • 当該の「 さくらだより 」の PDF ファイルが複数にまたがる ( 前半・後半 など ) 場合、アルファベットを追記する
  • その後、拡張子である .pdf で終わる

ここでは、2021年 ( 令和 3 年 ) 冬号(前半) 」と「2021年 ( 令和 3 年 ) 冬号(後半)」を掲載し、リンクを行う想定なので、ファイル名は以下のように命名すると、他のファイル名とも揃い、わかりやすくなるでしょう。

  • 冬号を 12 月に発行した場合
    • sakura2112a.pdfsakura2112b.pdf
  • 冬号をわかりやすく winter としてもよいかもしれません
    • sakura21winter1.pdfsakura21winter2.pdf
      • この場合は、a と b で表記していた「 前半 」「 後半 」を「 1 」と「 2 」で表記したほうが視認性が高まりそうです
  • ここまで命名ルールについて学んできましたが、根本的にはファイル名は、拡張子 ( .pdf ) を変更せず、半角英数字で、わかりやすければ、何でもよいです
STEP
「 さくらだより 」の PDF ファイルを 「 sakura / pdf / 」フォルダにアップロードする

「 さくらだより 」の PDF ファイルを、FTP ソフトや ファイルマネージャー を利用して、アップロードします。

リンクすることができれば、ウェブサイト上のどこにファイルを設置しても問題ないわけですが、これまで「 さくらだより 」は下記のフォルダにアップロードしてきましたので、今回もそれに倣ってアップロードを行います。

掲載する「 さくらだより 」の PDF ファイルを、以下のフォルダ内にアップロードしてください。

/home/kaigo-service/www/kaigo-sakura.com/sakura/pdf/

介護サービスさくらのトップページが、
/home/kaigo-service/www/kaigo-sakura.com/index.html
に存在しますので、そこから見ると、このフォルダは、

サブフォルダ sakura/pdf/ の中身であるということになります。

FTP ソフトや、ファイルマネージャーでこのフォルダを見ると、たくさんの PDF ファイルがアップロードされていることが確認できます。

具体的に、どのファイルがいつの「 さくらだより 」の PDF ファイルであるのか、ファイル名の命名ルールから容易に推測が可能でしょう。

STEP
PDF ファイルのアドレスを確認する

「 さくらだより 」一覧ページの HTML のうち、[ 2021 年 ( 令和 3 年 ) ] の箇所を抜き出して見てみます。

  <dt>2021年 ( 令和 3 年 )</dt>
  <dd>
    <ul>
      <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
      <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
      <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
    </ul>
  </dd>

ここでは、「 新年号(1) 」「 新年号(2) 」「 新年号(3) 」のPDF ファイルのリンク先を、

  • pdf/sakura2101a.pdf
  • pdf/sakura2101b.pdf
  • pdf/sakura2101c.pdf

と指定していることがわかります。

STEP
<ul> タグ内に <li> タグと <a> タグで、PDF ファイルへのリンクを作成する

上記 STEP 1-3 の HTML タグを参照しながら、今回掲載をする「 2021年 ( 令和 3 年 ) 冬号 」の前半後半の PDF ファイルへのリンクを作成してみましょう。

PDF ファイルの名前は、STEP 1-1 を参考に

  • sakura2112a.pdf
  • sakura2112b.pdf

とします。

リンク先の指定としては、それぞれ、

  • pdf/sakura2112a.pdf
  • pdf/sakura2112b.pdf

となります。

これを <a> タグと <li> タグで囲むと、次のようになるでしょう。

<li><a href="pdf/sakura2112a.pdf" target="_blank">冬号(前半)</a></li>
<li><a href="pdf/sakura2112b.pdf" target="_blank">冬号(後半)</a></li>

この 2 つの号については、すでに存在する「 新年号(1)」よりも前に表示を行うことから、



       <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>

の直前に記述を行います。

[ 2021年 ( 令和 3 年 ) ] の箇所について、冬号前半後半を含む、更新後の HTML を見てみましょう。

  <dt>2021年 ( 令和 3 年 )</dt>
  <dd>
    <ul>
      <li><a href="pdf/sakura2112a.pdf" target="_blank">冬号(前半)</a></li>
      <li><a href="pdf/sakura2112b.pdf" target="_blank">冬号(後半)</a></li>
      <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
      <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
      <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
    </ul>
  </dd>

この HTML を保存し公開すると、以下のように表示されます。

「 新年号(1) 」より先に、「 冬号 」の前半・後半へのリンクが表示されている

更新作業 その 2 : 新しい年を作成し、PDF ファイルを追記する場合

これまでの更新方法を踏まえ、「 年 」を追加する方法を次に例示します。

「 年 」を <dt> タグで記載します
<dt>2022年 ( 令和 4 年 )</dt>
<dd>
<!-- ここに、その年の「 さくらだより 」へのリンク情報を記載する -->
</dd>

<dt>2021年 ( 令和 3 年 )</dt>
<dd>
  <ul>
    <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
    <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
    <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
  </ul>
</dd>
( 以下略 )

過去の「 年 」の記載行をコピー・貼り付けて再利用するのがよいでしょう。

「 2022 年 ( 令和 4 年 ) 」を新設し、「 2022 年 新年号 」を掲載する場合には、[ 2021 年 ] の <dt> タグよりも上に、次のように HTML タグを記載します。

<dt>2022年 ( 令和 4 年 )</dt>
<dd>
  <ul>
    <li><a href="pdf/sakura2201.pdf" target="_blank">新年号</a></li>
  </ul>
</dd>

<dt>2021年 ( 令和 3 年 )</dt>
<dd>
  <ul>
    <li><a href="pdf/sakura2101a.pdf" target="_blank">新年号(1)</a></li>
    <li><a href="pdf/sakura2101b.pdf" target="_blank">新年号(2)</a></li>
    <li><a href="pdf/sakura2101c.pdf" target="_blank">新年号(3)</a></li>
  </ul>
</dd>

( 以下略 )

この HTML を保存し公開すると、以下のように表示されます。

「 2021 年 ( 令和 3 年 ) 」より先に、「 2022 年 ( 令和 4 年 ) 」の見出しが表示され、その新年号へのリンクが表示されている

以上の手順で、[ さくらだより バックナンバー ] ページに、新たな「 さくらだより 」を掲載することができます。

目次

参考情報

最後に、ウェブページの表示画面と、HTML タグとの対応関係について、簡略した図解を以下に示します。

<dd> タグ内の <ul> <li> <a> については、記載を省略しています。
目次
閉じる