「トップページ」の画像の更新方法

2022 1/17

2022年1月1日 2022年1月17日

トップページ・上部に表示されるメイン画像の更新手順について、見ていきましょう。

更新を行うファイル

/ index.html

準備すべき情報

掲載する画像ファイル

編集・更新する箇所

index.html: 98 行目付近

<!-- スライダーの編集方法 -->
<!-- ###############################################################################################
■ 下記の[ID:mainVisual]内に記述されている[img]タグを書き換えることで、画像を変更する事ができます。
■ 画像のサイズは横:1200px、縦500pxで全画像統一のサイズとなっております。
■ 画像ファイルの場所は、初期状態 [img] > [sliderImages]の中に入れております。
■ 同じ場所にアップロードする場合は、[slide_〇〇.png]の部分を変更すれば、簡単に変更する事ができます。
　 また、画像枚数を増やす(又は減らす)には、下記のコメントアウトした[li]のように、[li]タグを増減させて
　 あげることで、自動的にスライダーに追加・削減されます。
■ スライダーの使用をやめる場合は、下記の[div]タグごとコメントアウト(又は削除)し、21行目～50行目の
　 読み込みファイルもコメントアウト(又は削除)してください。
############################################################################################### -->
<div id="mainVisual">
  <ul>
    <li><img src="img/sliderImages/slide_03.png" width="1200" height="500" alt="ランチ"></li>
    <!-- li><img src="img/sliderImages/slide_04.png" width="1200" height="500" alt="習字教室"></li -->
    <li><img src="img/sliderImages/slide_02.png" width="1200" height="500" alt="3ショット"></li>
    <li><img src="img/sliderImages/slide_01.png" width="1200" height="500" alt="建物外観"></li>
    <li><img src="img/sliderImages/slide_05.png" width="1200" height="500" alt="施設看板"></li>
    <li><img src="img/sliderImages/slide_06.png" width="1200" height="500" alt="デイサービス"></li>
    <!--<li><img src="img/sliderImages/slide_07.png" width="1200" height="500" alt="aa"></li>-->
  </ul>
</div>

上記のように、index.html のファイル内にも、コメントとして編集方法が記されています。

解説

<div id="mainVisual">
  <ul>
    <li><img src="img/sliderImages/slide_03.png" width="1200" height="500" alt="ランチ"></li>
    <!-- li><img src="img/sliderImages/slide_04.png" width="1200" height="500" alt="習字教室"></li -->
    <li><img src="img/sliderImages/slide_02.png" width="1200" height="500" alt="3ショット"></li>

( 以下略 )

トップページのメイン画像として表示する画像は、FTP ソフトやファイルマネージャー上では、以下のアドレス・フォルダに設置されています。

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

<li> から始まり</li> で終わるひとかたまりが、メイン画像１枚に関する情報です

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

一番初めの <li> である、「ランチ」という画像が最初に表示され、次に「 3 ショット」の画像が表示されます

「習字教室」の画像は、コメントアウトされているため、表示されません
よって、この 1 行を削除しても問題ありません

掲載する画像の変更

掲載する画像ファイルを、横幅 1200 ピクセル・縦幅 500 ピクセルで用意をします
img/sliderImages/ に、掲載する画像ファイル slide_a1.png と slide_a2.png をアップロードします ( ファイル名は例です )
<div id=”mainVisual”> の箇所に、下記のように HTML を記載することで、指定の画像が表示されるようになります

<div id="mainVisual">
  <ul>
    <li><img src="img/sliderImages/slide_a1.png" width="1200" height="500" alt="新画像１"></li>
    <li><img src="img/sliderImages/slide_a2.png" width="1200" height="500" alt="新画像２"></li>
  </ul>
</div>

このような HTML を保存した場合に、メイン画像の箇所には最初に slide_a1.png の画像が、次に slide_a2.png の画像が表示されます。

掲載する画像の表示する順番の変更

上記の 2 枚の画像について、表示する順番を逆にしたい場合には、HTML の <li> タグの記述順を変更することで、表示する順番を変更することができます。

<div id="mainVisual">
  <ul>
    <li><img src="img/sliderImages/slide_a2.png" width="1200" height="500" alt="新画像２"></li>
    <li><img src="img/sliderImages/slide_a1.png" width="1200" height="500" alt="新画像１"></li>
  </ul>
</div>

以上の手順で、トップページに表示されるメイン画像を編集・掲載することができます。

「新着情報」の更新方法

「 トップページ 」の画像の更新方法