最新情報をRSSリーダーで読めます
Jimdoを使ってホームページをはじめるには、まずは下のプランから選んで登録します
※Free版は無料です（広告表示あり) Pro版,Business版（広告表示なし） Free版からPro版,Business版へのグレードアップもカンタンにできます
コメントをいただけるととても嬉しいです。
※Free版は無料です（広告表示あり) Pro版,Business版（広告表示なし） Free版からPro版,Business版へのグレードアップもカンタンにできます
コメントをいただけるととても嬉しいです。
コメントをお書きください
ポプシクリップ。 (金曜日, 06 4月 2012 16:02)
はじめまして。私もjimdoでjqueryを使っています。
ようやくスライドショーの表示まではできるようになりましたがいかんせん、その画像にリンクを設置したいのですがそこでつまづいています。何かいい方法をご存知でしたら教えていただくことはできないでしょうか？
ポプシクリップ。 (日曜日, 08 4月 2012 07:18)
お返事誠にありがとうございます。
試したところうまくいった部分といかなかった部分があります。
以前自分でも「aタグ」をいれてみたのですが、うまくいかなくて。ただそのときは「<div class="n j-htmlCode">」をいれていなかったので、これをいれることで動くと思ったのですが駄目でした。
正確には上記のとおりやってみると確かに４枚ある画像のうち１枚目と４枚目の画像が表示されて、それにはリンクがされるようにはなりました。その後フェードアウトして画面が真っ白になってしばらくたってからまた画像が４枚フェードインアウトを繰り返しながら表示されるのですがそちらはリンクがされていない状態になっていました。
つまり挙動がおかしくなっておりまして、本来４枚の画像が順番にリンクつきで表示されなければいけないのですが、何故か１枚目と４枚目が最初に表示され、２枚目と３枚目が表示されないですし、リンクつきで表示されたのは1回だけで、以降はリンクなしでループして表示します。
実行部分のjavascriptやcssに問題があるのでしょうか？
------------ココカラ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script><script type="text/javascript">
//<![CDATA[
$(function(){
var setImg = '#topviewer';
var fadeSpeed = 1500;
var switchDelay = 5000;
$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
//]]>
</script>
-------------ココマデ
アドバイスいただいたおかげで、一部リンクができるようになりましたので一歩近づいたと思っています。差し支えなければ引き続きお気づきの点があれば教えていただければ幸いです。
また大変申し訳ないのですが都合上先にコメント頂いた上記htmlタグのソースコードは削除いただいてもよろしいでしょうか？（このコメントに記載したjavascriptは問題ありませんので掲載しています）
よろしくお願いいたします。
0225 (日曜日, 08 4月 2012 15:03)
ポプシクリップ。さん
ご返事ありがとうございます^^
私がコメントしたものを削除いたしました。
念のため、前後関係をあわせるためソースコードを削除したコメントをここに掲載しておきます。
-----------
(日曜日, 08 4月 2012 01:58) にコメントしました
ポプシクリップ。さん
はじめまして。コメントありがとうございます！
webサイトを拝見させていただきました。
お書きになられているスライドショーに当たるソースコードをみさせていただいたのですが、おそらく以下のところだと思われます。
----
この部分のソースコードを削除しました
----
「画像にリンクを設置」ということですので、
----
この部分のソースコードを削除しました
----
といったように、画像を表示されている箇所を、例えば「aタグ <a href=""></a>」で囲んでいただけるとお好みのリンクが表示されると予想しているのですが、一度お試しいただくことは可能でしょうか。（※リンクは任意です。yahooでしたら、<a href="http://www.yahoo.co.jp/">画像</a>といったように""の中にurl指定します。）
もし、私がご質問されている意図がずれておりましたらご指摘くださいませ。
また、上記ソースコードは文字で表現させるとなると今現在の具体的な設定に対する変更をご説明差し上げた方が理解していただけやすいのでは・・・と思い、転載させていただきました。こちらにつきましては、不都合がございましたらこのコメントごと削除いたします。
よろしくお願いいたします。
-----------
0225 (日曜日, 08 4月 2012 15:14)
ポプシクリップ。さん
後もう少し、だと思いますね。
ご対応としましては、最後までお付き合いさせていただきたいとは思っています。
jQueryのスライドももちろんなのですが、今回ご質問いただいたWEB制作等を正式にご依頼いただいた作業を優先しております。
ですのでご回答に少しお時間をいただくかもしれません。こちらはご了承くださいませ。
もしお急ぎで、また、導入されているjQueryスクリプトにこだわらないのであれば、このサイトにも入れているスライドの導入方法を公開していますので、こちらをご参考いただけますと幸いです。
【みんビズ jimdoでインタラクティブなjQueryスライドショーを入れる】これでjimdoサイトもちょっとはかっこよくなるかな
http://www.imamura.biz/blog/web/1814
よろしくお願いいたします。
ポプシクリップ。 (火曜日, 10 4月 2012 06:27)
お気遣いありがとうございます。自分でももう少し色々調べてみます。
0225 (月曜日, 16 4月 2012 17:19)
ポプシクリップ。さん
スライドショーの件なのですが、すこし乱暴な表現になりますが、今設置されている満足に動かないものについて編集うんぬんをされるよりは、すでに満足に動いているものをご利用いただいたほうが、後のメンテナンスも含め効率が良いと思っています。
ポプシクリップ。さんのご要件を満たす
・フェードイン
・フェードアウト
・リンク設定
以上ができるスライドショーを、Jimdoに設置する方法を私のブログに書きました。
【みんビズ Jimdoでもう少し柔軟なjQueryスライドショーを入れる】jQuery Cycleを使ってシンプルなスライドを導入
http://www.imamura.biz/blog/cms/jimdo/3922
現在お使いになられているスクリプトの変更という形でご回答はしてはいないのですが、もしかすると余計なお節介かもしれませんが、この方がより良い方法だと思っています。
もし、ご興味ございましたらお試しくださいませ。
よろしくお願いいたします。
ポプシクリップ。 (土曜日, 21 4月 2012 00:43)
ご好意誠にありがとうございます。
早速新しいやり方で試したのですが、うまく表示できませんでした・・・
もちろん現在使っているjqueryの記述はすべて削除しても駄目でした。
何故なんでしょう？
うーん、なかなかうまくいかないですね。
0225 (土曜日, 21 4月 2012 03:33)
ご覧いただきましてありがとうございました。
そうですね・・・私が手引きを差し上げるにしても、
具体的に、
・どこまでできているのか
・全くできていないのか
・何がダメだったのか
などといった現状を把握する必要があります。
私が掲載した内容については、Jimdoサイトで動作検証したもの（現在も動作中）を掲載していますので、手順通りでうまくいきます。
実際、私の記事を参考にされて導入しているサイトを数例お知らせいただき、把握しています。
ご自身でもうこれ以上は技術的には難しい、時間もかけれない。だけどどうしてもこれは入れたい、と感じられていらっしゃるのでしたら、正式に外部（業者）にご依頼されるのがよろしいかと思います。もちろん私でなくても結構です。
また、技術情報にしましても、ご参考例としてという意味での掲載ですので、こちらもご理解下さい。
どうぞよろしくお願いいたします。
ポプシクリップ。 (土曜日, 21 4月 2012 12:09)
何度もありがとうございます。この週末にもう一度トライしてみたいと思います。ちなみに0225さんのサイトTOPのスライド、左下に数字が、１，２，３，４とあるものもかっこいいなと思っていますので、どちらかができるようにはしたいと思っています。
ポプシクリップ。 (日曜日, 22 4月 2012 07:44)
何度かやってみた結果、なんとか表示できるようになりました。
http://popsicleclip.jimdo.com/
ただそのままではうまくできず、jacascriptの記述をヘッダに書いたときは、切り替えたい画像が縦にずらっとならんでしまって、４枚の画像が縦に並んだままフェードインアウトを繰り返していました。
そこでヘッダに書いていた記述をページのhtml（画像とリンクを指定している部分）の直前においたところ、動くようになりました。
ただ１点問題がありまして、jqueryで切り替え表示している画像がその下に記載している記事、コンテンツの上にオーバーラップして表示されてしまうのです。取り急ぎhtmlで適当に改行を追加することで、PCでの見た目上は違和感ないようにはしていますが、
heightの設定だと思うのですが、htmlやjavascriptの記述を見る限りはどこが悪いのかよくわかりません。なぜオーバーラップ表示になるのかが理由がわからないのです。
とはいえ、おかげさまで一応リンク付で切り替え表示ができるようになったのは喜ばしいことです。
本当にありがとうございました。もし上記についてまたわかりましたら度々恐縮ですがアドバイスいただければ幸いです。
0225 (日曜日, 22 4月 2012 15:49)
コメントありがとうございます。
サイト拝見させていただきました。
表示されていますね！大変、お疲れ様でした。
お困りの点ですが、そうですね、とりあえず一番手軽な方法ですと、スタイルシート(CSS)で高さを指定されるのがよろしいかとおもいます。
独自レイアウトのCSSの記述で、例えば高さを画像の高さ300pxとさせたい場合でしたら、
.slideshow{
height:300px;
}
と書いていただければ大丈夫かとおもいます。
お時間がございましたら、おためしくださいませ。
ポプシクリップ。 (日曜日, 22 4月 2012 16:47)
何度もありがとうございます。
CSS側の調整で無事対応できました。
この度は本当にありがとうございました。
0225 (日曜日, 22 4月 2012 23:19)
おお・・！よかったです。
こちらこそ、お付き合いくださいましてありがとうございました。
また何かありましたらこのサイトやブログで記事を書こうと思いますので、もし興味がある話題がありましたら、覗いてやってくださいませ。
0225 (日曜日, 22 4月 2012 23:57)
あっ、私のブログをポプシクリップさんのブログ記事に取り上げていただいたのですね！
今ほど気づきました。本当に、とても嬉しいです！
ポプシクリップ。 (土曜日, 28 4月 2012 12:02)
こちらこそお世話になりました！
今後ともよろしくお願いいたします。