Home > FC2ブログ > プラグイン > Gallery-Slide共有プラグイン 画像やテキストをスライド表示

Gallery-Slide共有プラグイン 画像やテキストをスライド表示

 画像やテキストなどのコンテンツをスライド表示するプラグインです。画像表示エリアにカーソルを合わせるとテキストを表示します。

 リンクを指定すればサムネイルや商品画像のクリックでジャンプすることも可能です。

配布スクリプトコード

 設置したい場所に次のコードを貼り付けてください。FC2ブログのプラグインに追加するときは公式プラグインのフリーエリアをダウンロードしてHTMLに貼り付けます(Galleryプラグインの中身を入れ替えてもOK)。FC2ブログの記事本文に設置する時は専用コードをご利用ください。

 最初にある「<style type="text/css">~</style>」までのコードは切り取って利用しているテンプレートのスタイルシートに貼り付けてください。

 FC2ブログに設置する時は<head>内に次のmetaコードがなければ追加してください。basic_whiteは既にあるので追加の必要はありません。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 上記部分に「IE=9」などと「edge」以外の値が設定されている場合はそれを「edge」に書き換えてください。

 FC2ブログ以外のサイトに設置する時は画像をすべて自分のサーバーに差し替えてください

スライドさせる画像などの追加・指定方法

 このプラグインはスライドさせる全体を「<div class="kizGalleryS ms6500-r-0">」で囲み、その中に内包された「<div class="kizelm">」を一つのブロックとしてスライドします。

<div class="kizGalleryS ms6500-r-0">

<div class="kizelm">
【1】ここに入れた画像やテキストなどがスライドされます。
</div>

<div class="kizelm">
【2】ここに入れた画像やテキストなどがスライドされます。
</div>

</div>

 上記のようにすると【1】【2】の中身が入れ替わりで表示されます。数を増やす時はkizelmのブロックをコピーして増やしてください

<div class="kizGalleryS ms6500-r-0">

<div class="kizelm">
【1】ここに入れた画像やテキストなどがスライドされます。
</div>

<div class="kizelm">
【2】ここに入れた画像やテキストなどがスライドされます。
</div>

<div class="kizelm">

【3】ここに入れた画像やテキストなどがスライドされます。
</div>

</div>

 逆に不要な画像などがある場合はそのkizelmのブロックを丸ごと削除してください。

 デフォルトではkizelmの中身は次のようになっています。

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
画像を重ねた時に表示する文章など
</div></div>
</div>
</div>

 kizelmの中身を上記のようにすることで画像表示エリアにカーソルを重ねた時にkiznodeの中身が画像の上に表示されるようになります。

 画像や表示文章を入れ替える時は、その画像のアドレス・横幅・高さを上書きし、kiznodeの中身の文章を書き換えてください。

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
テキスト
</div></div>
</div>
</div>

 テキストにリンクを入れると画像を重ねた時にリンクが表示されるようになります。

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
* * * メニュー * * *<br />
<a href="URL">面白かった記事</a><br />
<a href="URL">どうでもいい記事</a>

</div></div>
</div>
<!--/1--></div>

 リンクの文字色を変更する時はスタイルシートに以下のコードを加えてください。

.kizGalleryS .kizimg .kiztext .kiznode a:link,
.kizGalleryS .kizimg .kiztext .kiznode a:visited {color: #ffff33;}
.kizGalleryS .kizimg .kiztext .kiznode a:hover {color: #ffffff;}

 色の指定が反映されない時は「;」の前に「 !important」を加えてください。

#ffff33 !important;

スライドが切り替わる時間を変更する

 「ms6500-r-0」の6500の部分が切り替わる時間です。「6500」は6.5秒毎に切替えます。

<div class="kizGalleryS ms6500-r-0">

 1000で1秒です。次のようにすれば9秒毎に切り替わります。

<div class="kizGalleryS ms9000-r-0">

 もっと速く切り替えたい場合は数値を減らして「4000」などに書き換えてください。

スライドの順番を指定する

 デフォルトではランダムに順番が決定され、以後その順でループします。

<div class="kizGalleryS ms6500-r-0">

 「r」の部分を「0」に変更すると上から並べられた順に表示されるようになります。

<div class="kizGalleryS ms6500-0-0">

<div class="kizelm">
【1番目に表示】
</div>

<div class="kizelm">
【2番目に表示】
</div>

<div class="kizelm">
【3番目に表示→1番目に戻る】
</div>

</div>

画像表示エリアにカーソルが重なっている時はスライドを止める

 デフォルトでは画像表示エリアにカーソルが重なっていてもスライドは止まりません。

<div class="kizGalleryS ms6500-r-0">

 「0」の部分を「1」に変更するとスライドが停止します。

<div class="kizGalleryS ms6500-r-1">

 カーソルをエリアから出すとスライドが再開します。

* * * メニュー * * *
面白かった記事
どうでもいい記事
【空】天馬空を行く

画像にリンクをつける

 通常のリンク指定と同じように「kizimg」内にあるimg要素をa要素で囲みます。

<div class="kizelm">
<div class="kizimg">
<a href="URL"><img src="画像アドレス" alt="" width="横幅" height="高さ" /></a>
<div class="kiztext"><div class="kiznode">
画像を重ねた時に表示する文章など
</div></div>
</div>
</div>

 別タブで開く時は「target="_blank"」を指定します。

<a href="URL" target="_blank">

 テキストもリンクに含める場合は次のように「</a>」の位置を変更し、

<div class="kizelm">
<div class="kizimg">
<a href="URL"><img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
画像を重ねた時に表示する文章など
</div></div></a>
</div>
</div>

 スタイルシートに以下を加えてください。

.kizimg a {display: block;}


 a要素の中にdiv要素があるのが気になる時はdivをspanに変更し、

<div class="kizelm">
<div class="kizimg">
<a href="URL"><img src="画像アドレス" alt="" width="横幅" height="高さ" />
<span class="kiztext"><span class="kiznode">
画像を重ねた時に表示する文章など
</span></span></a>
</div>
</div>

 スタイルシートに以下を加えてください。

.kizimg span {display: block;}

レイアウト・デザインについて

画像の枠線のスタイル

 「#ddd」が線の色、「#fff」が線の内側の背景色です。

.kizGalleryS .kizimg img {
 margin: 0 !important; padding: 5px !important;
 border: 1px #ddd solid !important; background: #fff !important;
 box-shadow: 1px 2px 3px 1px rgba(120,120,120,0.1) !important;
}

テキストのスタイル

 画像表示エリアのテキストを中央寄せにするにはstyleの「.kiznode」の「left」を「center」に変更します。文字サイズは「11px」の部分の数値で変更できます。

.kiznode {padding: 0.6em 1.3em; text-align: center; font-size: 11px;}

 画像表示エリアの背景と文字色は「.kiztext」の「background」「color」を変更してください。

.kiztext {
  display: none; position: absolute; left: 0; bottom: 0;
  width: 100%; opacity: 0.8; background: #000000; color: #ffffff;
}

 スタイルが反映されない時はその項目の末尾に「!important」を付けます。

color: #ffffff !important;

複数の画像を表示する

 「kizelm」の中にある「kizimg」ブロックを二つに増やせば、その二つ画像が表示されます。

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
文章
</div></div>
</div>
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
文章
</div></div>
</div>

</div>

 画像と画像の間隔を広げる時は「.kizimg」のスタイルに「margin: 0 0 3px;」を追加してください。3の数値を増やすと間隔が広がります。

.kizimg {position: relative; min-height: 1px; margin: 0 0 3px; text-align: center;}

スライドを複数設置する

 1を行ってから2の手順で設置してください。FC2ブログ以外に設置する場合は1の代わりにFC2ブログ以外での設置方法を行ってください。

1:スクリプトの移動・設置

 コード内の次の部分を切り取って削除し、

<script type="text/javascript">document.write(unescape("%3Cscript src='http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/kizGallerySlide"+((typeof jQuery=='undefined')?"-jquery":"")+".js' type='text/javascript'%3E%3C/script%3E"));</script>

 テンプレートの「</head>」の前に貼り付けます。

<script type="text/javascript">document.write(unescape("%3Cscript src='http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/kizGallerySlide"+((typeof jQuery=='undefined')?"-jquery":"")+".js' type='text/javascript'%3E%3C/script%3E"));</script>
</head>

 またはスクリプトのファイルを直に置いてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/kizGallerySlide.js"></script>

</head>

2:スライドさせる画像などの設置

 新たな「kizGalleryS」のブロックを作ります。設置場所に以下のような形式で追加してください。

<div class="kizGalleryS ms6500-r-0">

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
文章
</div></div>
</div>
</div>

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
文章
</div></div>
</div>
</div>

<div class="kizelm">
<div class="kizimg">
<img src="画像アドレス" alt="" width="横幅" height="高さ" />
<div class="kiztext"><div class="kiznode">
文章
</div></div>
</div>
</div>

</div>

 カーソルを重ねた時にテキストを表示する画像が必要ない時は次のような形式で追加してください。

<div class="kizGalleryS ms6500-r-0">

<div class="kizelm">
スライドしたいコンテンツ
</div>

<div class="kizelm">
スライドしたいコンテンツ
</div>

<div class="kizelm">
スライドしたいコンテンツ
</div>

</div>

 スライドが切り替わる時間などは追加したkizGallerySブロックのms6500の数値を変更してください。個別に設定することができます。

FC2ブログの記事本文内に設置する場合

 記事を投稿する際の『改行の扱い』が『自動改行』の場合はコードの途中に改行が強制挿入されてしまうので、これを回避して設置する必要があります。

1. スタイルシート

 利用中のPCテンプレートのスタイルシートに以下のコードを加えてください。スマートフォン用のテンプレートにも同じように追加します。

2. HTML

 利用中のPCテンプレートHTMLの最初の方にある</head>の前に以下のコードを加えてください。スマートフォン用のテンプレートHTMLにも同じように追加します。

<script type="text/javascript">document.write(unescape("%3Cscript src='http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/kizGallerySlide"+((typeof jQuery=='undefined')?"-jquery":"")+".js' type='text/javascript'%3E%3C/script%3E"));</script>

</head>

3. 記事本文

 記事内に次の形式で設置するとスライドショーが機能します。

 

<div class="kizGalleryS ms6500-0-0 kizbr">

<div class="kizelm"><div class="kizimg">
<img src="画像アドレス" alt="" />
<div class="kiztext"><div class="kiznode">
テキスト
</div></div>
</div></div>

<div class="kizelm"><div class="kizimg">
<img src="画像アドレス" alt="" />
<div class="kiztext"><div class="kiznode">
テキスト
</div></div>
</div></div>

<div class="kizelm"><div class="kizimg">
<img src="画像アドレス" alt="" />
<div class="kiztext"><div class="kiznode">
テキスト
</div></div>
</div></div>

</div>

 [1][2]のカスタマイズを行った状態で、記事の外(プラグインやテンプレートHTML)にスライドショーを設置する時は1行目にある「 kizbr」を削除した[3]のコードを設置してください。冒頭の配布スクリプトコードを別に設置する必要はありません。

<div class="kizGalleryS ms6500-0-0 kizbr">

<div class="kizGalleryS ms6500-0-0">

 PCやスマートフォンのテンプレートを変更した際は[1][2]のコードを追加し直してください。

 改行する時は「<br />」の代わりに「<br class="brbr" />」を使うか「<div></div>」で改行したい部分を囲ってください。

FC2ブログ以外でのスクリプト設置方法

 コード内の次の部分を削除します。

<script type="text/javascript">document.write(unescape("%3Cscript src='http://blog-imgs-59.fc2.com/f/c/2/fc2blogtemplates/kizGallerySlide"+((typeof jQuery=='undefined')?"-jquery":"")+".js' type='text/javascript'%3E%3C/script%3E"));</script>

 「kizGallerySlide.js」のファイルを保存し、利用しているサーバーなどにアップロード。
 「</head>」前に以下のファイルを置いてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="アップロードしたファイルのアドレス"></script>
</head>

 既にjQueryファイルを設置している場合は以下を削除してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

補足

 jsファイルのコードを別のjsファイルに移す時は冒頭の「// may(c) 日付 http://fc2blogtemplate.com/」も一緒に貼り付けてください。

  • 13-12-24…記事公開

 不具合等があればコメントにてご連絡ください。プロフィールに書かれている通り、コードの転載・再配布はご遠慮ください。カスタマイズ後も同様です。noscript要素については削除しても構いませんが、当サイトへのリンクをどこかに入れてもらえれば嬉しいです(強制ではありません)。

関連記事
スポンサー リンク
コメント
#173 : No title
fc2ブログの中にスライドショーを入れたくてやっとここにたどり着いてやってみたのですが
画像を2つ入れているのですが、1つが繰り返し現れます。

<div class="kizGalleryS ms6500-0-0">

<div class="kizelm">
<div class="kizimg">
<img src="<a href="http://blog-imgs-69.fc2.com/k/i/k/kikukiku7/6_20140321002030499.jpg" target="_blank"><img src="http://blog-imgs-69.fc2.com/k/i/k/kikukiku7/6_20140321002030499.jpg" alt="6_20140321002030499.jpg" border="0" width="469" height="137" /></a>
<div class="kiztext"><div class="kiznode">
</div>

<div class="kizelm">
<div class="kizimg">
<img src="<a href="http://blog-imgs-69.fc2.com/k/i/k/kikukiku7/7_20140321002032f94.jpg" target="_blank"><img src="http://blog-imgs-69.fc2.com/k/i/k/kikukiku7/7_20140321002032f94.jpg" alt="7_20140321002032f94.jpg" border="0" width="469" height="139" /></a>
<div class="kiztext"><div class="kiznode">
</div>

私が触ったところだけコピーしました。[あとは省いています)どうしてだかわかりません。
アドバイスをお願いしたいとコメントさせていただきました。よろしくお願いします。
#176 : 1つが繰り返し現れる
コンバンハ。
元のコードから必要な</div>を削除しすぎているので全体のレイアウトが崩れているのだと思います。
説明にもある通り、他のコードは触らずに変更する部分だけ入れ替えるようにします。

テキストを表示せずリンク付きの画像だけ表示する場合は以下のようにしてください。
<div class="kizGalleryS ms6500-0-0">

<div class="kizelm">
<div class="kizimg">
<a href="省略" target="_blank"><img src="省略" alt="" border="0" width="469" height="137" /></a>
</div>
</div>

<div class="kizelm">
<div class="kizimg">
<a href="省略" target="_blank"><img src="省略" alt="" border="0" width="469" height="139" /></a>
</div>
</div>

テキストが必要な場合は次のような形式で入れます。
<div class="kizelm">
<div class="kizimg">
<a href="省略" target="_blank"><img src="省略" alt="" border="0" width="469" height="137" /></a>
<div class="kiztext"><div class="kiznode">
お気に入りの写真
</div></div>
</div>
</div>
#177 : No title
おはようございます。昨夜遅くまでかかってブログにアップしましたが、表示はできたのですが、×が出てしまい悩んでいました。ソース表示が勉強不足ですみません。さっそくの回答ありがとうございました。回答通りやってみました。×もなくできました。感激です。これからいい季節になり庭の花のスライドショーをたくさんアップさせたいと思います。ありがとうございました。
#178 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#182 : #178:記事内にスライドショーを設置した場合の不具合
コンバンハ。
遅くなり申し訳ございません。
プラグインやテンプレートではなく、blog-entry-266.htmlのような投稿記事内に設置する場合は少しコードを変更する必要があります。
このページに記事内に設置するための手順とコードを追加(up)いたしましたのでそちらをご参考くださいませ。

テキストは表示しないようなので、[3]のコードについては「画像上にテキストを表示しない」をチェックしてコピーしてください。<img src="画像アドレス" alt="" />の部分をリンク付きのコードに差し替えると正常に動作するかと思います。

また既に設置されているリンク付き画像部分のコードですが、「<ahref=<a hre」のように「<a href=」が重複している部分は余計なのですべて削除してください。
<a href=<a href="画像アドレス" target="_blank">
↓修正
<a href="画像アドレス" target="_blank">
#187 : No title
mayさんのようにアフィ目的で使いたい場合、画像アドレスもアフィリンクも2つ貼らなければいけないってことでしょうか?

あと現在は上下で表示されてますが、スペース的に一つで十分なので、そうしたい場合はどこを削ればいいんでしょうか?せっかくランダムに表示できるので。
#189 : Re: No title
コンバンハ。
こちらのGallery Slideは説明にもある通り、<div class="kizelm">~</div>の中に入れた画像などのコンテンツをスライド表示させるものです。
その中にリンク付きの画像を一つ入れて、それを複数個設置すれば一つずつ表示されます。

また何らかの情報を自動で取得するような類のものではなく、kizelmの中に貼り付けるコンテンツに制限などはありません。
サンプルは複数のkizelmの中にリンク付き画像を二つずつ入れているという状態です。

<div class="kizelm">~</div>の数については最低でも二つないとスライドの意味がなく、Galleryプラグインの方も同様に['画像アドレス', "",'リンク'], が1件あるだけでは機能いたしません。
利用方法については本ページのスライドさせる画像などの追加・指定方法をご覧くださいませ。
#308 : 質問です
初めまして、ブログのスライドショーを探していてたどり着きました。
上にあるソースをそのままコピーペーストして動作するか確かめようとしたのですが、
動作する気配がございません。
なにか原因があるんのでしょうか?

初歩的なご質問で大変申し訳ございません。
#317 : スマホでの動作について
初歩的な質問で申し訳ありません。

お陰様で当方のブログに、素敵なスライドショーが設置できました。
ありがとうございます。

ただ、スマホ版(プラグイン対応可)のフリースペースに設置しようとすると、文字数制限(?)に引っ掛かってしまい、動かすことができません。

こういう場合、全体のほとんどを外部jsにして動かすのかな、と思うのですが、初心者につき、どのようにすれば良いかわかりません。

ご教授頂けると嬉しいです。
#351 : レスポンシブ対応版の場合のスライドショー設置方法に関しまして。
現在レスポンシブ対応版のテンプレートFC2版を使用しております。

この場合のスライドショーのタグはどのように成りますでしょうか、又

スライドショーの停止秒・スライドショーの速さを指定するにはどうすれば良いのでしょうか。
#355 : スライド画像が上下します
fc2のブログの本文にスライドショーを設置したく検索して貴HPにたどり着きました。

説明通りスタイルシート、HTMLにコピペして本文に3画像を入れてみますと

上下に3段階にずれながら表示されます。

同じ位置に3画像を表示するにはどのようにしたらよいのかご教授お願い致します。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered