CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

サムネイルが表示されない(2) (No. 1757)

回答日: 2015-11-26

質問

不動産情報更新ツール  Ver 4.8

ご回答ありがとうございます。
JavaScript と<ul id="pikame">の件は問題ありませんでした。

>画像タグは上記リスト配下の <li> に挟む必要があり、、、
ソースを見ましたら
templates/article/article.html  に<li>はありませんでした。

最初にダウンロードした元ファイルにもありません。
ソースをコピペします。
---------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<meta name="description" content="%_summary_%">
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<link rel="contents" href="%_index_filename_%">
<link rel="prev" href="%_to_prev_%">
<link rel="next" href="%_to_next_%">

<!-- 画像の下にサムネールを配置する時はこちら -->
<link type="text/css" href="css/bottom.css" rel="stylesheet">

<!-- 画像の右にサムネールを配置する時はこちら -->
<!-- link type="text/css" href="css/right-without.css" rel="stylesheet" -->

<style type="text/css">
body {
    padding:  10px 30px 10px 25px;
}
.filelink {
    padding-left: 20px;
    margin-right: 10px;
    background: url(./icons/general.gif) no-repeat top left;
}
.doc {
    background-image: url(./icons/doc.gif)
}
.pdf {
    background-image: url(./icons/pdf.gif)
}
.ppt {
    background-image: url(./icons/ppt.gif)
}
.img {
    background-image: url(./icons/img.gif)
}
.txt {
    background-image: url(./icons/txt.gif)
}
.xls {
    background-image: url(./icons/xls.gif)
}
.zip {
    background-image: url(./icons/zip.gif)
}

/* カテゴリ表示の設定ここから */
/* 位置指定 */
.title {
    background-repeat: no-repeat;
    background-position: left center;
}
/* カテゴリ画像の指定 */
.new {
    padding-left: 45px; /* 表示するカテゴリの幅+余白 */
    background-image: url(./images/new.png);
}
.category-1 {
    padding-left: 45px; /* 表示するカテゴリの幅+余白 */
    background-image: url(./images/category-1.png);
}
.category-2 {
    padding-left: 45px; /* 表示するカテゴリの幅+余白 */
    background-image: url(./images/category-2.png);
}
.category-3 {
    padding-left: 45px; /* 表示するカテゴリの幅+余白 */
    background-image: url(./images/category-3.png);
}
/* カテゴリ表示の設定ここまで */

/*
カテゴリの種類を追加する場合は以下のように指定して下さい。
.newcategory {
    padding-left: 25px;
    background-image: url(./images/newcategory.png);
}
なお、画像 url の場所は変更して構いません。
例: background-image: url(/images/newcategory.png);

さらに、追加したクラス名が管理画面から選べるように以下のファイルを
編集して下さい。
templates/admin/2.html
*/

/* 詳細情報テーブル */
.itemlist {
    border-collapse: collapse;
    width: 100%;
}
.itemlist td
,.itemlist th
,.itemlist tr {
    border: solid gray 1px;
}
.itemlist td
,.itemlist th {
    padding: 6px 8px 6px 8px;
}
.itemlist th {
    text-align: left;
    white-space: nowrap;
    width: 5em;
}
.itemlist p {
    margin: 0;
}

</style>
</head>

<body bgcolor="#ffffff" style="padding: 20px">

<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="%_index_filename_%">↑トップ一覧へ</a></td>
<!-- <td align="center"><a href="%_to_index_%">↑一覧へ</a></td> -->
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

<div style="width: 756px; margin: 10px auto;"><!-- コンテナ -->

<h1><span class="title %_linetext1_%">%_subject_%</span></h1>
<div align="right">
<p>%_yyyy_%/%_mm_%/%_dd_% (%_dayname_%)</p>
</div>

<!-- ファイルの表示 -->
<div class="pikachoose">
    <ul id="pikame">
    <!-- メイン画像の表示: generated from article_image_1.txt -->
    %_article_image_1_%
    <!-- attached files : generate from article_file.txt -->
    %_file_list_%
    </ul>

</div>

<div style="clear: both;"></div>

<div style="margin-top: 30px;margin-bottom: 30px;">
%_body_%
</div>

<table class="itemlist">
<tr>
<th>参考資料</th>
<td>%_article_image_3_%</td>
</tr>
<tr>
<th>所在地</th>
<td>%_linetext2_%</td>
</tr>
<tr>
<th>構造</th>
<td>%_linetext3_%</td>
</tr>
<tr>
<th>交通</th>
<td>%_linetext4_%</td>
</tr>
<tr>
<th>費用</th>
<td>%_blocktext1_%</td>
</tr>
<tr>
<th>間取り</th>
<td>%_blocktext2_%</td>
</tr>
<tr>
<th>設備</th>
<td>%_blocktext3_%</td>
</tr>
<tr>
<th>地図</th>
<td>%_blocktext4_%</td>
</tr>
<tr>
<th>特記事項</th>
<td>%_blocktext5_%</td>
</tr>
<tr>
<th>問合せ先</th>
<td>%_linetext5_%</td>
</tr>

</table>

</div><!-- /コンテナ -->


<div align="center">

<table border="0" width="90%">
<tr>
<td width="20%"><a href="%_to_prev_%">←前へ</a></td>
<td align="center"><a href="%_index_filename_%">↑トップ一覧へ</a></td>
<!-- <td align="center"><a href="%_to_index_%">↑一覧へ</a></td> -->
<td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
</tr>
</table>

</div>

<script type="text/javascript" src="js/jquery-1_8_2-min.js"></script>
<script type="text/javascript" src="js/jquery-pikachoose-full.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
    function (){
        $("#pikame").PikaChoose({

            autoPlay: true, /* 自動アニメーションをしないなら false */
            speed: 5000, /* 切り替わりのスピード(1個の画像あたりの時間) */
            animationSpeed: 600, /* 切り替わりの素早さ */

            showCaption: true, /* 画像説明を表示しないなら false */

            IESafe: false, /* IE6/7に対応させるなら true */

            thumbOpacity: 0.5, /* サムネールのぼやけ具合。0-1で数値が大きい方がくっきり  */
            hoverPause: true, /* マウスオーバーしてもアニメーションを止めないなら false  */
            stopOnClick: true /* クリックした後もアニメーションを続行するなら false  */

        });

    });
</script>
</body>
</html>
投稿日時: 2015-11-25 19:54

回答

(このご質問は以下の続きです。)
http://sugutsukaeru.jp/bbs/1756/

■ソースに <li> が無い件について

早速詳細ご確認ありがとうございました。しかしながら、こちらのご説明不足がありましたので、もう一度下記の点のご確認をお願い致しますが、templates/article/article.html のソースに <li> が無い点については問題ありません。

というのは、記事ページ(webdir/1.html, 2.html, ...)は、templates/article/article.html の他、いくつかのテンプレートの組み合わせで構成されるからです。<li> については、別のテンプレートファイルにあるのが正常です。その点のご説明が抜けていまして申し訳ございません。

テンプレートファイルの組み合わせ方法については、以下の説明書をご参照下さい。
「添付ファイル付 ウェブページ更新ツール 大容量版 テンプレート対応図」
http://sugutsukaeru.jp/products/P092-G0-A9/template_map.html


■再度の確認のお願い

さて、上述の通り、記事ページは templates/article/article.html の他いくつかのテンプレートファイルの組み合わせで構成されますので、これらのファイルから要素を消してしまっていると記事ページにそれが表示されなくなるのですが、お送り頂いた templates/article/article.html を拝見すると編集の跡がありませんので、他のファイルもおそらく問題ないものと思います。

しかしながら表示の問題が出ているという事ですので、先に記事ページ(webdir/1.html, 2.html, ...)のソースに、下記の要素が書き出されているか確認して下さい。

- <ul id="pikame">
- 上の <ul> 内に <li> で挟まれた画像
- JavaScript タグがある事
- JavaScript タグの src 属性で指定されているファイルに、ブラウザからアクセスできる事。(FTPなどでファイルの存在を確認するだけでなく、ブラウザでその .js ファイルが表示できる事を確認して下さい。)
- (追加確認) JSと同様に、<link type="text/css" href="css/bottom.css" rel="stylesheet"> というタグで読み込んでいる css ファイルにもアクセスできる事を確認して下さい。

■うまく行かない場合

1.
上記が全てあるのに表示がうまく行かない場合は、同じブラウザで下記のデモのサイトにアクセスして見て下さい。
http://sugutsukaeru.jp/sample/221-thumbnail-animation/webdir/2.html

デモサイトでもサムネイルが小さく表示されない場合は、ブラウザの設定(JavaScriptの制限など)が問題になっている可能性がありますので、設定を確認して下さい。


2.
デモサイトは期待通りにサムネイルが小さく表示される場合、何らかの個別の原因があると考えられます。差し支えなければ、設定中のテストサイトでこちらから拝見できるページURLをご連絡頂けますか?
回答日: 2015-11-26