watanabe 様
はじめまして。
先ほど新規インストールで試して現象の再現を確認しました。
baserCMSアップデートに伴い、メソッドで出力されるタグが変更になったためではないかと思います。
●原因と経緯
元々、BcBaserヘルパーのmainImageメソッドはチュートリアル同梱のindex.htmlファイルに記述されているものと同じく
<ul id="MainImage">
<a href="/index.php/" title="コーポレートサイトにちょうどいい国産CMS"><img src="img/main_image_1.jpg" alt="コーポレートサイトにちょうどいい国産CMS" /></a>
<a href="/index.php/" title="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。"><img src="img/main_image_2.gif" alt="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。" /></a>
<a href="/index.php/" title="標準的なWebサイトに必要な基本機能を全て装備"><img src="img/main_image_3.jpg" alt="標準的なWebサイトに必要な基本機能を全て装備" /></a>
<a href="/index.php/" title="デザインも自由自在にカスタマイズ可能！"><img src="img/main_image_4.jpg" alt="デザインも自由自在にカスタマイズ可能！" /></a>
<a href="/index.php/" title="質問・ご相談はユーザーズフォーラムへ"><img src="img/main_image_5.jpg" alt="質問・ご相談はユーザーズフォーラムへ" /></a>
</ul>
とul要素の直下にa要素を吐き出す仕様だったと記憶しています。
ただこれはあまりよろしくない記述なので、ユーザーフォーラムで以下の指摘がありました。
引用：
これに伴いBcBaserヘルパーのmainImageメソッドの出力は
<ul id="MainImage">
<li><a href="/index.php/" title="コーポレートサイトにちょうどいい国産CMS"><img src="/theme/corp/img/main_image_1.jpg" alt="コーポレートサイトにちょうどいい国産CMS" /></a></li>
<li><a href="/index.php/" title="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。"><img src="/theme/corp/img/main_image_2.gif" alt="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。" /></a></li>
<li><a href="/index.php/" title="標準的なWebサイトに必要な基本機能を全て装備"><img src="/theme/corp/img/main_image_3.jpg" alt="標準的なWebサイトに必要な基本機能を全て装備" /></a></li>
<li><a href="/index.php/" title="デザインも自由自在にカスタマイズ可能！"><img src="/theme/corp/img/main_image_4.jpg" alt="デザインも自由自在にカスタマイズ可能！" /></a></li>
<li><a href="/index.php/" title="質問・ご相談はユーザーズフォーラムへ"><img src="/theme/corp/img/main_image_5.jpg" alt="質問・ご相談はユーザーズフォーラムへ" /></a></li>
</ul>
と変わっています。この結果、corp.jsとcorp.cssにおける要素の指定が上手くいかなくなったというわけです。
●解決策
この変更にあわせてcorp.jsとcorp.cssの記述も修正します。
基本的にはa要素を指し示す部分をli要素に総置換ということになります。
・corp.js 4箇所の文字列 'a' を 'li' に置換
$(function() {
var imgBox = $('#MainImage');
var fadeSpeed = 1000;
var switchDelay = 2000;
imgBox.find('li').hide(); // ←(1)
imgBox.find('li:first').stop().fadeIn(fadeSpeed); //←(2)
setInterval(function(){
imgBox.find('li:first-child').fadeOut(fadeSpeed) //←(3)
.next('li').fadeIn(fadeSpeed) //←(4)
.end().appendTo(imgBox);
},switchDelay);
});
・corp.css １箇所 a を li に置換
#MainImage {
position:relative;
height:342px;
}
#MainImage > li{ /*←ここ*/
display :block;
position :absolute;
top :0px;
}
以上、ご確認ください。
スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/16 19:47
Re: スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/16 23:49
Re: スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/17 8:26
