「さくらとは」の更新方法

2022 1/31

2022年1月1日 2022年1月31日

[ さくらとは ] の更新手順について、見ていきましょう。

更新を行うファイル

/ sakura / index.html

準備すべき情報

見出しの文章
掲載する文章・情報
掲載する写真の画像ファイル

上記のような、更新する箇所の情報を準備しましょう。

「理事長経歴」を編集

ここでは、見出し「理事長経歴」以下の箇所の HTML を例に、更新方法をみていきます。

sakura/index.html: 71 行目付近

<h3 class="pink" id="anc3">理事長経歴</h3>
<p><img src="img/face.jpg" alt="理事長" class="face"/>介護サービス「さくら」は、くらし助け合い活動や介護保険事業などを通し、地域に貢献し、より豊かな市民社会の実現を目指します。</p>
<ul class="pink">
  <li>NPO法人介護サービスさくら　理事長</li>
  <li>一般社団法人市民協あいち名古屋副理事長</li>
  <li>日進市福祉有償運送運営委員</li>
  <li>公益財団法人さわやか福祉財団　インストラクター </li>
  <li>認定NPO法人市民福祉団体全国協議会　常務理事</li>
  <li>一般社団法人市民事業支援機構　理事</li>
  <li>住民参加型在宅福祉サービス　名古屋代表</li>
  <li>日進市第二層生活支援コーディネーター</li>
</ul>

( 以下略 )

ウェブページの表示画面と、HTML タグとの対応関係は以下のようになります。

パーツごとの更新方法の解説

この箇所について、次のパーツの更新が考えられるでしょう。

見出し「理事長の経歴」<h3 class=”pink”> ～ </h3>
通常の段落「介護サービス～の実現を目指します。」<p> ～ </p>
箇条書き <ul class=”pink”><li>箇条書き・その１</li><li>箇条書き・その２</li></ul>
写真画像 <img src=”” alt=”” class=”face”>

解説１・見出し

トップページ以外のページでは、テキストを <h3> タグに pink クラス ( class ) を付与して囲むと、行頭に桜のマークが表示され、ピンク色の下線が引かれる見出しを表示することができます。

具体的には、

理事長経歴

というテキストを、

<h3 class="pink">理事長経歴</h3>

と記載することで、

このように表示されます。

テキスト「理事長の経歴」を変更する場合には、直接テキストを更新します。

解説２・通常の段落

通常のテキストは <p> タグの中に記載します。

ワープロソフトで文章を修正するように、文章を編集・更新することができます。

<p>くらし助け合い活動や介護保険事業などを通し、地域に貢献し、より豊かな市民社会の実現を目指します。</p>

また、<span> タグ等を利用して、装飾を加えることも可能です。ここでは例として、上記の文章を一部を太字にします。

<p><span style="font-weight: bold;">くらし助け合い活動</span>や介護保険事業などを通し、地域に貢献し、より豊かな市民社会の実現を目指します。</p>

このように、太字にしたい箇所を <span> タグで囲み、style 属性に CSS を記載することで、

CSS で指示した内容の通りに表示されます。ここでは CSS として font-weight を bold と指定しました。

テキストを太字で表示する方法については、書籍「これからはじめる HTML & スタイルシートの本」P. 110 の第 6 章 CSS で文字を装飾しよう [ 09 特定の段落を太字にしよう ] に解説が掲載されています。

解説３・箇条書き

<ul> と <li> タグを利用して、箇条書きを表示することができますが、この際に <ul class=”pink”> と pink クラスを付与することで、行頭にピンク色の印を表示することができ、読みやすさがあがります。

具体的に比較をしてみましょう。

<ul>
  <li>通常の箇条書き１</li>
  <li>通常の箇条書き２</li>
</ul>

上記 HTML は以下のように表示されます。

クラスの指定がない場合の <ul> + <li> の表示

一方で、

<ul class="pink">
  <li>pink クラスの箇条書き１</li>
  <li>pink クラスの箇条書き２</li>
</ul>

このように class=”pink” を <ul> に含めることで

pink クラスの指定を行った場合の <ul> + <li> の表示

このように行頭にピンク色の印が表示されます。

解説４・写真画像

写真・画像ファイルを差し替える場合、2 つの方法があります。

既存の img/face.jpg の画像ファイルに対して、差し替える画像を「上書き保存」する
差し替える画像を別の場所にアップロードして、<img> の src 属性を書き換える

1. 既存の画像ファイルに対して、差し替える画像を「上書き保存」する

最も単純な方法です。

上書き保存を行うと元の画像ファイルは消えてしまいますので、上書き前の画像ファイルを事前にダウンロードするなど、バックアップ保存を行いましょう

画像の更新時には、現在表示している画像と同じ横幅 ( 350 ピクセル ) に編集した画像を用意し、差し替えを行うと、レイアウトが崩れることがないでしょう。

対象となる画像は、FTP ソフトやファイルマネージャー上では、以下のアドレスに設置されています。

/home/kaigo-service/www/kaigo-sakura.com/sakura/img/face.jpg

この画像ファイルに対して、FFFTP などの FTP ソフトやファイルマネージャーで、新しい画像を上書き保存して、更新を行います。

FFFTP を利用した HTML ファイルや画像ファイルのアップロード方法については、書籍「これからはじめる HTML & スタイルシートの本」P. 160 の第 8 章 Web サイトをアップロードしように解説が掲載されています。

2. 差し替える画像を別の場所にアップロードして、<img> の src 属性を書き換える

こちらの更新方法では、既存の画像ファイルを消さずに、別の名前で新たに画像ファイルをアップロードし、そのファイルを表示します。

まずは、以下のフォルダ内に、新たに表示したい画像ファイルをアップロードします。

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

例えば今回の例では、face2022.jpg というファイル名の画像を表示するとします。

その場合は、既存の以下の HTML コードを、

<img src="img/face.jpg" alt="理事長" class="face"/>

次のように更新します。

<img src="img/face2022.jpg" alt="理事長" class="face"/>

sakura/index.html をアップロードした後に、ブラウザで画像が新しいものに差し替わったか、確認を行います。

もし、画像が差し替え前のままの場合には、キャッシュをクリアするために、再読み込みを行ってみてください。

画像が表示されなくなった場合は、src 属性に正しく画像へのアドレスを記述しているか、確認をしてください

画像を表示する方法については、書籍「これからはじめる HTML & スタイルシートの本」P. 54 の第 3 章 HTML で画像や表を配置しよう [ 03 画像を配置しよう ] に解説が掲載されています。

以上の手順で、[ さくらとは ] に新しい情報を掲載することができます。

「 さくらとは 」の更新方法