写真・画像について
全てのタイプの写真・画像に共通ですが、そのページで使用する画像は001からの連番とし、ページディレクトリ内のimagesディレクトリに格納してください。
子ページの場合は連番の前に３桁のページ番号を付加して親ページのimagesディレクトリに格納してください。
例、5番目の子ページの3番目の画像であれば、005003.jpgのようになります。
写真や画像の取得は、以下の１〜４の優先順位です。
つまり、pptデータは優先度が最も低いので、既存サイトの該当ページを確認し、無い場合のみpptから切り出します。
各ページで使用する写真、イラスト等は以下に大別されます。
- 写真やイラストデータとして提供されているもの
- 写真やイラストデータとして今後提供される予定のもの
- 既存サイトから抜き出すもの
- pptデータなどから抜き出すもの
写真やイラストデータとして提供されているもの
基本的にそのまま使用しますが、表示サイズに対してあまりに大きなデータは（表示幅が300程度なのにデータが幅2000など）、Photoshopでサイズを適切に修正してください。
画像には可能な限りalt属性を付けますが、適切なaltが判断つかない場合などは空欄で構いません。
写真やイラストデータとして今後提供される予定のもの
今後提供されるであろう画像については、連番と「写真挿入」のalt属性をつけたコードのみを記述してください。
これにより、写真未添付の画像を一括して検索することができ、写真提供時に何番の画像とすれば良いかがわかります。
<img decoding="async" src="images/001.jpg" alt="写真挿入" />
既存サイトから抜き出すもの
既存サイトからコピペして連番を付与してください。
pptデータなどから抜き出すもの
ppt上で拡大し（サイト表示サイズより少し大きい程度）、連番を付与して格納してください。
画像を横並びにする場合
最初にまず「スマホではどのように表示するか」を検討してください。
PCもスマホも横並び
rowクラスとcolクラスを使用します。
（rowとcolの基本は、カラムレイアウトのページを見てください）
基本パターン（PCもスマホも一列に配置）
<div class="row"><div class="col">イメージ</div><div class="col">イメージ</div><div class="col">イメージ</div></div>
変則パターン例（PCは一列、スマホは2カラム配置）
<div class="row"><div class="col-md col-6">イメージ</div><div class="col-md col-6">イメージ</div><div class="col-md col-6">イメージ</div></div>
変則パターン例（PCは4カラム、スマホは2カラム配置）
<div class="row"><div class="col-md-3 col-6">イメージ</div><div class="col-md-3 col-6">イメージ</div><div class="col-md-3 col-6">イメージ</div></div>
さらに中央揃えの場合
divタグにimgCenterクラスを設定します。
※基本的に中央揃えとしてください。
PCは横並びでスマホは縦並び
画像を囲むdivタグにgalleryType1クラスを設定します。
<div class="galleryType1"><img decoding="async" src="../images/001001.png" class="img-row" alt=""><img decoding="async" src="../images/001002.png" class="img-row" alt=""></div>
さらに中央揃えの場合
画像を囲むdivタグにimgCenterクラスを設定します。
※基本的に中央揃えとしてください。
<div class="galleryType1 imgCenter"><img decoding="async" src="../images/001001.png" class="img-row" alt=""><img decoding="async" src="../images/001002.png" class="img-row" alt=""></div>
写真下にキャプション
<figure><img decoding="async" src="images/001.jpg" alt="">
<figcaption>キャプション</figcaption>
</figure>
行中央に大きな画像
パワポで拡大切り出しした画像等、大きくなりすぎないように中央配置で最大幅50%とする。（スマホでは100%）
<img decoding="async" src="images/001.jpg" class="imgCenter max-md-50" alt="">
