固定画像(ファイル)の表示方法の選択(Ver. 6.0 以上)

Ver. 6.0 以上の「すぐ使えるCMS」では、デザインテンプレートファイルに固定画像(ファイル)の表示を指定する方法を、後述の2つから選べるようになりました。このページでは、2つの表示方法の違いをご説明します。

2つの固定画像(ファイル)表示方法の選択肢

「すぐ使えるCMS」のVer. 6.0 以上では、すべての記事ページテンプレートで以下の2つの方法が固定画像(ファイル)の表示のために使えるようになりました。

  1. タグセット
  2. 画像(ファイル)タグ指定

タグセット

「タグセット」とは、決められたコメントで挟んだHTMLコードの塊を表します。「すぐ使えるCMS」Ver. 6.0で導入されました。具体的には、sugu_image_#_begin と sugu_image_#_end のコメントのペアです。#は数字で、この数字が画像の連番を指定しています。

固定画像(ファイル)用タグセットの例

コピー
<!-- sugu_image_1_begin -->
    <div>
    <img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%">
    </div>
<!-- sugu_image_1_end -->

これは1番画像を表示するためのタグセットです。1番画像がアップロードされなかった場合には <!-- sugu_image_1_begin --> と <!-- sugu_image_1_end --> の間のHTMLコードがこのコメント自体を含め全て削除されます。

番号(上記コード赤字部分)は1から5まであり、それぞれの画像(ファイル)に対応しています。

画像(ファイル)用タグセットの使いどころ

画像(ファイル)用タグセットは、例えば画像があった時だけキャプションを表示したい場合や、画像があった時だけ詳細情報を付記したい場合などに使って下さい。

例えば、下記コードはカスタム項目 blocktext3 に画像3の説明を記載している、という想定です。

コピー
<!-- sugu_image_3_begin -->
<!-- 画像3 -->
<div>
    <img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%">
    <p>%_blocktext3_%</p>
</div>
<!-- sugu_image_3_end -->

%_blocktext3_% が含まれている <p> タグは <!-- sugu_image_3_begin --> と <!-- sugu_image_3_end --> に挟まれたタグセット内に入っていますので、画像3がアップロードされなかった場合は、blocktext3 の入力有無に関わらずこのHTMLコードが全て削除されます。

画像(ファイル)タグ指定

もう一つの表示方法、画像(ファイル)タグ指定の場合は、画像ごとに定められている src 属性や href 属性用のテンプレート変数を使って、<img> タグや <a> タグを指定します。

画像タグ指定の例

コピー
<img src="%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">

ファイルタグ指定の例

コピー
<a href="%_d_%/%_imagename_escaped_1_%">%_imagetext_1_%</a>

画像(ファイル)タグの削除の仕様

上記のように <img> タグや <a> タグを指定した場合、当該画像(ファイル)がアップロードされなかった場合にはこれらのタグが削除されます。しかしながら、<a> タグで挟まれているものが当該画像やファイルの以外の入力内容の場合は、<a>タグは取り除かれた状態で内容が残ります。

一例は下記のとおりです。

テンプレートでの指定削除されるか表示例
<p><a href="%_d_%/%_imagename_escaped_#_%">%_subject_%</a></p>残る<p>入力した記事タイトル</p>
<p><a href="%_d_%/%_imagename_escaped_#_%">%_imagetext_#_%</a></p>削除<p></p>
<p><a href="%_d_%/%_imagename_escaped_#_%">拡大画像はこちら</a></p>削除<p></p>
<p><a href="%_d_%/%_imagename_escaped_#_%">%_yyyy_%-%_mm_%-%_dd_%</a></p>残る<p>2021-06-10</p>
<div><a href="%_d_%/%_imagename_escaped_1_%"><img src="%_d_%/%_thumbnail_escaped_1_%"></a></div>削除<div></div>

詳細は下記ページをご覧下さい。
ファイルのリンクが削除される仕組み

使い分けの指針

上記例に示す通り、画像やファイルをタグ指定した場合、<a> タグの外側にあるHTMLコードは、画像がアップロードされなかった場合も残ってしまいます。

このため、画像やファイルへのリンクを他の入力項目に設定(例えばタイトルからの添付ファイルへのリンク)している場合以外は、タグセットを使うのがお勧めです。

関連記事

ファイルのリンクが削除される仕組み

応用マニュアル ホームページ画面
ファイルがアップロードされなかった時に、<a> タグごと削除されるか、中身の要素が残るのかの基準のご説明。

画像欄にファイルをアップロードする方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」の Ver. 4.4 以降では、画像アップロード欄をファイルアップロード用に切り替えて使う事ができます。テンプレートを編集して切り替えを行う方法のご紹介。

画像の追加(画像を増やす)方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」はテンプレートの編集でアップロードできる画像の個数を増やすことができます。画像の追加方法のご説明。

広告