回答日: 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