小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

新着情報(短い一覧)にサムネイル画像を表示する方法

最終更新日: 2015-01-19
新着情報にサムネイル画像を表示
CMS「すぐ使えるCGI」で書き出した「短い一覧」(新着情報、webdir/index_short.html)に、アップロードした画像のサムネイル(縮小版)を表示する方法をご紹介します。

対象製品

以下の「すぐ使えるCGI」製品で新着情報へのサムネイル画像表示が可能です。

設定済の製品

初めから新着情報にサムネイル画像が表示されるように設定されているサンプル製品もありますので。用途に近いものがあればこれらをダウンロードして調整して下さい。

ブログタイプで新着情報のみサムネイル画像を表示

新着情報にサムネイル画像表示(ブログタイプ)

ブログのように詳細ページのある「画像付 ウェブページ更新ツール 大容量版」で、画像サイズ調整方法を説明するためのサンプルとして公開しているものです。

新着情報にサムネイル画像が表示されます。目次(全一覧)にはサムネイル画像を表示していませんので、必要な場合は追加して下さい。

表示オンラインデモ 詳細とダウンロード

ブログタイプで目次と新着情報の両方にサムネイル画像を表示

目次と新着情報の両方にサムネイル画像を表示

これもブログのように詳細ページのある「画像付 ウェブページ更新ツール 大容量版」で、「小規模ネットショップサイト作成用」としてサンプルとして公開しているものです。

新着情報にサムネイル画像が表示される他、全一覧(目次)にもサムネイルが表組風に表示されます。

表示オンラインデモ 詳細とダウンロード

タイムラインタイプでメインページと新着情報の両方にサムネイル画像を表示

新着情報にサムネイル画像表示(タイムラインタイプ)

これは1ページに次々と内容を表示していくタイムラインタイプです。「画像付 ニュース更新ツール」を使ったサンプルで、「アイフレーム内へリンクする」という説明のサンプルとして公開しているものです。

新着情報にはサムネイル画像が1つ、記事本体である全一覧には登録した画像がすべて表示されます。

表示オンラインデモ 詳細とダウンロード

サムネイル画像の表示設定の流れ

目的に合う編集済製品が無かった場合は、ダウンロードした製品のテンプレートを以下の手順で編集して下さい。どの製品の場合も設定手順は同じで下記の通りですが、バージョンによって編集方法が異なります。具体的なテンプレートファイルの変更内容は「設定方法」をご覧になりながら、以下の手順で設定して下さい。

1.デザインテンプレートの編集

デザインテンプレート templates/article/short_list.txt を後述のように編集します。

2.アップロード

編集したファイルをサーバに上書きアップロードして下さい。

3.再構築

管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

4.確認

ブラウザのキャッシュを一旦クリアして表示の確認を行って下さい。

設定方法

新着情報(短い一覧)用のデザインテンプレートファイルは templates/article/short_list.txt です。このファイルをテキストエディタで開いて、下記の画像タグを足して下さい。

赤字の「#」は画像の番号(1から5)に置き換えて下さい(2か所あります)。画像の番号が何番まであるかはバージョンによって異なります。

青字部分はサイトのトップディレクトリから書き出しディレクトリ(webdir/)までのパスを指定して下さい。

画像サイズなどのスタイル指定や画像タグ以外のHTMLタグは自由に編集して下さい。Ver. 4.4 以上とそれ未満では画像の src 属性の指定の仕方が変わります。それぞれお使いのバージョンのサンプルコードを選んで下さい。

Ver. 4.4 以上の製品のサムネイル用画像タグ

<img src="/webdir/%_d_%/%_thumbnail_escaped_#_%" alt="%_imagetext_#_%">
もし画像が大きく表示されてしまう場合は、CSS などで表示サイズを設定して下さい。画像のサイズ設定について詳しくは下記ページをご覧下さい。

画像の縮小をする方法

「画像付 ニュース更新ツール 大容量版 Ver. 4.4」の特記事項

「画像付 ニュース更新ツール 大容量版」の Ver. 4.4 にはサムネイルだけを表示できないバグがあるので、画像タグのに加えて画像の番号に対応したHTMLコメント(下記例)をテンプレートに含めて下さい。

<!-- %_imagename_escaped_#_% -->

Ver. 4.3 以下の製品のサムネイル用画像タグ

Ver. 4.3 以下の製品ではサムネイル画像の自動縮小機能が無いので、小さく表示するためのサイズの指定を必ず含めて下さい(黒太字部分)。

<img src="/webdir/%_d_%/%_imagename_escaped_#_%" alt="%_imagetext_#_%" style="width: 100px;">

関連リンク

さらに詳しく