Canon HTML Tag Sample / SHOOTING REPORT

画像の大きさは、ブラウザのウィンドウサイズに応じて可変（縮小）するので、サイズ指定は不要です。入れても基本的に無視されます。その代わり、IMGタグをくくるPタグにclass属性で表示したい横幅を指定してください。例えばPYの最大サイズ横幅960pxで表示したい場合は「class="w960"」となります。

( Photography & Text : Naz )

サブタイトルはこれまで同様H2タグで記述します

Retina用の1920pxの画像でも、非Retina用の960pxの画像でも、「class="w960"」を入れてもらえれば、同じように表示されます。

縦位置画像のサンプル。縦長画像でも、class属性で指定するのは表示したい横幅です。この画像の場合は800x533pxで表示させたいので、「class="w533"」となります。

縦長画像を左寄せにしたい場合は、「class="w533l"」としてください。このとき、Pタグを閉じずにIMGタグに続けてテキストを入力すると、このように左寄せとなった画像の右側にテキストを表示します。

なお、複数のPタグを画像の横には配置できないため、段落を分けたい場合はBRタグを挿入して対処してください。

縦長画像を右寄せにしたい場合は、「class="w533r"」としてください。このとき、Pタグを閉じずにIMGタグに続けてテキストを入力すれば、このように右寄せとなった画像の左側にテキストを表示します。

なお、ブラウザの横幅が一定サイズを下回ると、テキストの回り込みは解除され、画像の下にテキストを表示します。

画像のみをclass="w533l"を加えたPタグでくくり、テキストは別のPタグでくくった場合は、画像の下にテキストを表示します。ただしこの場合は、画像のテキストの間に大きくスペースが入ってしまいますので、画像を右寄せまたは左寄せにした場合は、テキストは画像の下ではなく横に表示しましょう。
下のような区切り線を入れたい場合はHRタグを記述してください。

縦方向のサイズは画像の横幅に合わせて縦横比を維持したまま縮小される（いわゆる成り行き）ので、画像の縦横比は意識する必要がありません。なお、この画像は縦横800pxで表示する画像ですので、「class="w800"」を指定しています。なお、横幅960pxで表示しない画像として指定できる（事前に定義済みの）サイズは以下の通りです。

w300, w330, w450, w455, w460, w466, w467, w490, w506, w507, w519, w520, w521, w530, w531, w532, w533, w534, w535, w540, w562, w563, w572, w573, w599, w600, w638, w639, w640, w641, w642, w643, w644, w645, w660, w700, w720, w800

この中の数字であれば、class="w300l" や class="w300r" のような右寄せ・左寄せが使えます。

正方形の画像でも画像の右寄せ・左寄せは行えますが、画像を大きく表示するほど余白が小さくなりテキストが読みにくくなりますので、あまり大きな画像では使わない方がいいでしょう。その場合は素直にセンタリングしてテキストは画像の下としましょう。

機能解説のような、小さな画像の場合でも「class="w450l」のようにPタグに入れることで、画像を左寄せにしてその右側にテキストを配置することができます。

クリックして拡大画像を表示するようなサムネイル表示も可能です。ただしスマートフォンのような幅の小さい画像だと横に2枚以上並べるとサムネイルが小さくなってしまうため、横に並べられるのは2枚のみとなります。また、文中で「右の画像は…、左の画像は…」と書いても大丈夫なように画像は常に横2枚の配置となります。この機能を使う場合は、リストタグ（ULタグ）に「class="w2p"」の属性を加えてください。なお、画像の横幅と画像と画像の間に入る余白の大きさは指定できません。

サブタイトルはこれまで同様H2タグで記述します

縦画像も同じように並べられますが、横幅固定となるため、縦位置はなりゆきとなります。このように横幅に合わせて横位置の画像よりも大きく表示されます。

縦位置の画像と横位置の画像を混在させる場合は、縦位置の画像だけ余白をつけて、横位置の画像と同じ縦横比にすると縦方向の大きさを揃えられます。

リスト項目（LIタグ）のIMGタグに続けてテキストを書くことで、サムネイル画像それぞれにキャプションを加えられます。
キャプションの文字は本文より小さいフォントで表示します。

カコミはBLOCKQUOTEタグで再現できます。カコミの中にテキストを書く場合は、Pタグでくくってください。

SPANタグに「class="red"」とすれば文字は赤色になります。
SPANタグに「class="gray"」とすれば文字は灰色になります。

カコミの中に画像を入れる場合は、Pタグに「class="w300l"」のように属性を加えてください。右寄せの場合は「class="w300r"」です。

サブタイトルはこれまで同様H2タグで記述します

タグの基本的な記述方法は以上です。あとはCMS側が色々やってくれます。画像クリックで等倍のクロップ画像をトグル表示したとか、連写した画像をパラパラと表示させたい場合などは、その都度埋め込みをリクエストしてください。なお、現在のところ画像のアップロードにはFTPアクセスが必要なので、画像のアップロードについてもリクエストしてください。※HTMLタグや属性は小文字で書いてください。

( 2018.01.10 )