サムネイル付スライドショーギャラリー jQueryプラグイン-Galleriffic

サムネイルが付いた画像スライドショーのjQueryプラグインです。サムネイルがフォーカスされた時に大きい画像を読み込む為、画像が大量にあっても読み込みに時間がかかりません。

オプションも豊富で、ページャー、画像タイトルやキャプションを同時に表示させることもできます。 スライドショーのオンオフやページ送りをつけることも可能です。

Galleriffic配布先

Galleriffic

jQueryプラグイン-Galleriffic

opacityrolloverが同包されておりサムネイル画像がフェードされるようになっています。
配布先の●Examplesのところよりサンプルが一式もダウンロードできます。

サンプルデモ“も作りました。

使い方

head内またはbodyタグ直前でjQuery本体とgalleriffic.js、opacityrollover.jsを読み込みます。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/js/jquery.galleriffic.js"></script>
<script src="/js/jquery.opacityrollover.js"></script>

続けて以下のようにopacityrollover.jsとgalleriffic.jsの呼び出しとオプション設定を指定します。

<script type="text/javascript">
jQuery(document).ready(function($) {

	// opacityrollover のオプション設定
	var onMouseOutOpacity = 0.67;  // マウスアウト時の透明度
	$('#thumbs ul.thumbs li').opacityrollover({
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0,
		fadeSpeed:         'fast',
		exemptionSelector: '.selected'
	});

	// Galleriffic のオプション設定
	var gallery = $('#thumbs').galleriffic({
	delay: 5000, // 画像が切り替わる時間
	numThumbs: 10, // 1画面に表示させるサムネイルの数
	preloadAhead: 10, // プリロードする画像数
	enableTopPager: false, // サムネイルの上部のページャーを出す/出さない
	enableBottomPager: true, // サムネイルの下部のページャーを出す/出さない
	maxPagesToShow: 5, // ページの最大値
	imageContainerSel: '#slideshow', // スライドショー画像部分のid名
	controlsContainerSel: '#controls', // コントロール部分のid名
	captionContainerSel: '#caption', // キャプション部分のid名
	loadingContainerSel: '#loading', // ローディング部分のid名
	renderSSControls: true, // trueでスライドショー画像の上部にスライドショーのオンオフボタン表示
	renderNavControls: true, // trueでスライドショー画像の上部に画像送り戻しのボタン表示
	playLinkText: 'Slideshowを再生する', // コントローラーのplayのテキスト変更
	pauseLinkText: 'Slideshowを停止する', // コントローラーのPauseのテキスト変更
	prevLinkText: '&amp;amp;amp;amp;lsaquo; 前の画像', // コントローラーの前の画像へのテキスト変更
	nextLinkText: '次の画像 &amp;amp;amp;amp;rsaquo;', // コントローラーの次の画像へのテキスト変更
	nextPageLinkText: 'Next &amp;amp;amp;amp;rsaquo;', // コントローラーの次ページへのテキスト変更
	prevPageLinkText: '&amp;amp;amp;amp;lsaquo; Prev', // コントローラーの前ページへのテキスト変更
	enableHistory: false,
	autoStart: false, // 自動再生するかしないか
	syncTransitions: true,
	defaultTransitionDuration: 900,
	onSlideChange: function(prevIndex, nextIndex) {
	// 'this' refers to the gallery, which is an extension of $('#thumbs')
	this.find('ul.thumbs').children()
	.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
	.eq(nextIndex).fadeTo('fast', 1.0);
	},
	onPageTransitionOut: function(callback) {
	this.fadeTo('fast', 0.0, callback);
	},
	onPageTransitionIn: function() {
	this.fadeTo('fast', 1.0);
	}
	});
});
</script>

HTMLは以下のようにスライドショー部分と、サムネイル部分を記述します。
スライドショー部分のコントローラーなどが必要なければ、なしでも大丈夫です。
画像はサムネイルとスライドショーサイズと2種類用意します。

<!-- スライドショー部分ここから -->
<div id="gallery" class="content">
	<div id="controls" class="controls"></div>
	<div id="nav" class="controls"></div>
	<!-- ↑コントロラー(次へ前へボタンなど)表示部分 -- >
	<div class="slideshow-container">
	<!-- ↑スライドショー画像表示部分 -->
	<div id="loading" class="loader"></div>
	<!-- ↑ローディング表示部分 -->
	<div id="slideshow" class="slideshow"></div>
	<!-- ↑スライドショー画像表示部分 -->
</div>
<div id="caption" class="caption-container"></div>
<!-- ↑キャプション部分 キャプション付けたい時記入する -->
</div>
<!-- スライドショー部分ここまで -->

<!-- サムネイル部分ここから -->
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
	<li>
	<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
	<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
	</a>
	<div class="caption">Description</div>
	</li>
	.
	.(略)
	.
</ul>
</div>
<!-- サムネイル部分ここまで -->

<h4>!追記 2014/12/06</h4>
<p>CSS についてコメント頂きました。「<a href="#li_comment-16365">コメント中のコード</a>」も合わせてご確認下さい。<br>コメント中のコードを指定しないと、実装に不具合がでる可能性があるようです。</p>

<h3 id="sampledemo">作ってみたサンプルデモ</h3>
<p>汎用性がありそうなExample2を使ってみました。<br>"<a href="https://memocarilog.info/memocarilog-demo/galleriffic-demo/">Galleriffic demo| memocarilog</a>"</p>

<h5>サンプルデモのhtml</h5>

<div class="content">
        <div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div id="nav" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>

        <div id="thumbs" class="navigation">
        <ul class="thumbs noscript">
          <li>
            <a class="thumb" href="images/p01.jpg"><img src="images/s/p01.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p02.jpg"><img src="images/s/p02.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p03.jpg"><img src="images/s/p03.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p04.jpg"><img src="images/s/p04.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p05.jpg"><img src="images/s/p05.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p06.jpg"><img src="images/s/p06.jpg" alt=""></a>
          </li>
        </ul>
        </div>
      </div>
サンプルデモのjs




Related Article

50 Comments & Tracbacks

  • よこ 2013-05-14 12:22 PM

    始めまして、この記事を参考にGallerifficを設置してみました。一つ質問なのですが、デモのように表示画像のサイズを変えたいのですが、画像サイズを変えるとサムネイルと重なるように表示されてしまいます。
    例えば600×400の横型画像があり、その下にサムネイルが並ぶようにするにはどうすればいいのでしょうか?

    Reply

    • saori 2013-05-14 9:06 PM

      よこ さま

      初めまして。ソースコードを拝見していないのでなんとも言えませんが、おそらくCSSの問題ではないでしょうか…。
      サムネイルが橫並びだと↓のデモが近いでしょうか。

      ダウンロードできるファイルにはこのデモのファイルも含まれているので、そちらを確認頂くとわかりやすいと思います。

      Reply

  • テル 2013-08-04 2:01 PM

    はじめまして。
    質問なのですが、サムネイルを1列のみで表示したいのですが、どうすればいいのでしょうか。

    Reply

    • saori 2013-08-04 8:36 PM

      テル さま
      はじめまして。
      ul.thumbs li の float をなしにすればサムネイルを縦一列にできると思います。橫一列にされるなら親ボックスの長さを変更するとよい思います。

      Reply

      • Ebony 2016-07-20 7:12 PM

        I thought I’d have to read a book for a disrovecy like this!

        Reply

  • マンサム 2013-08-09 6:24 PM

    初めまして。
    質問なのですが、サイドにサムネイルが設置されていますが、表示画像の下部に表示することは可能でしょうか??

    Reply

    • saori 2013-08-10 9:35 AM

      マンサム さま
      初めまして。サムネイル部分の div#thumbs をスライドショー部分の下にCSSで配置すれば大丈夫だと思います。
      よろしくお願いします。

      Reply

  • tomi 2013-09-05 2:53 PM

    はじめまして、初心者ですがご質問させて頂きます。
    記事を参考に設置させて頂きましたがサムネイルは表示されるのですが、サムネイルをクリックしてもイメージが表示させません。

    どうぞ宜しくお願いいたします。

    Reply

  • tomi 2013-09-05 3:02 PM

    何度も申し訳ありません。

    先ほどの質問はクリアできましたが、デモページのようには表示されません。
    CSSなどあるのでしょうか?

    ちなみに私はHTML4.01です。
    お願いいたします。

    Reply

    • saori 2013-09-05 9:00 PM

      tomi さま

      初めまして。
      galleriffic のサンプルをダウンロードするとCSSフォルダの中に、サンプルで使われているCSSファイルがいろいろはいっているかと思います。( )ご希望されているレイアウトに近いCSSファイルを読み込んでそこからカスタマイズしていくとやりやすいと思います。
      私が作ったデモのCSSは以下のアドレスから確認できます(きれいなコードではありませんが…)。
      http://orientalpage.heteml.net/memocarilog/memocarilog-demo/css/style.css

      Reply

  • 君島 2013-10-15 2:49 PM

    初めまして、この記事を参考にGallerifficを設置してみました。とても分かりやすく、Galleriffic自体は正常に設置することができたのですが、一つ質問があります。サムネイルをカテゴリー分けして表示することは可能なのでしょうか?
    例えばCreating a “Filterable” Portfolio with jQueryの機能をサムネイル部のみに適用するような方法を探しています。可能であれば教えて頂きたいです。よろしくお願い致します。

    Reply

    • saori 2013-10-16 10:26 AM

      君島 さま

      初めまして。コメントありがとうございます。
      ご質問の件ですが、オプションとしては並び替え機能は用意されていないようなので、独自でコードを書くか、”Creating a “Filterable” Portfolio”のコードに手を加えてギャラリー機能を加えるか(少しみただけですが、こちらは並び替えしているのではなくカテゴリ以外の画像は見えなくしているだけなので、なんだか難しそうですね…)という感じでしょうか…。

      私は使ったことがないのですが、以下のプラグインならソート機能もあるギャラリーが作れるようです。
      http://www.digicrafts.com.hk/components/JSThumbnailGallery

      探せば他にもソート機能つきプラグインがあるかも知れないので、他のものを使うというのも手かもしれませんね。

      Reply

  • 亜紀 2014-03-29 3:29 PM

    とても素晴らしいものだったのでお借りします。

    質問なのですが、スライドショーを再生するボタンを記号か画像を使用することはできませんか?
    そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

    特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

    宜しくお願いします。

    Reply

  • 亜紀 2014-03-29 3:29 PM

    とても素晴らしいものだったのでお借りします。

    質問なのですが、スライドショーを再生するボタンを記号か画像を使用することはできませんか?
    そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

    特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

    教えて頂けませんでしょうか?

    Reply

    • saori 2014-03-30 2:05 PM

      亜紀 さま

      ご質問の件の返答です。よろしくお願いします。

      > スライドショーを再生するボタンを記号か画像を使用することはできませんか?

      playLinkText オプションが用意されていますので、以下のような箇所の ‘ ‘(シングルクォーテーション)内を表示したい画像タグまたは、記号を入力して頂ければ変更できるはずです。

      playLinkText: 'Slideshowを再生する',
      

      > そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

      alt属性かtitle属性が入っていると思いますので、その部分を削除してみて下さい。

      > 特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

      caption を設定した場合のことですか?caption 部分はエンティティ化して入力してもちゃんと表示されました。具体的な箇所を教えて頂けますか?

      Reply

    • saori 2014-03-30 4:02 PM

      亜紀 さま

      たびたびすみません。ご質問の意味がわかりました!すべて ”スライドショーを再生するボタン” についてのことですよね? playLinkText オプションに「▶」を入れてみたら、タイトル属性が自動で入り、エンティティ化されて表示されました。ここのタイトル属性は、jquery.galleriffic.js の 900行目

      .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');

      ↑の箇所の title の部分(以下の部分)を削除、

      title="'+this.playLinkText+'"

      同じく jquery.galleriffic.js の 388行目の以下の部分を削除すると、HTML上のタイトル属性も削除できます。

      .attr('title', this.playLinkText)

      よろしくお願いします。

      Reply

      • 亜紀 2014-03-31 2:38 PM

        saoriさま

        解答ありがとうございます!
        説明が足らず申し訳ありません…
        無事うまくいきました♪
        また分からないことがあれば質問させていただきます><

        ありがとうございました!

        Reply

        • 亜紀 2014-03-31 2:45 PM

          度々すみません…;
          先程のスライドショー再生ボタンのタイトルの件なのですが、最初にこのスライドショーのページを開いたときのみ再生ボタンのタイトルがでてしまいます…

          一度その再生ボタンを押すとそれ以降の停止ボタンと再生ボタンにタイトルは出なくなりました。

          最初だけタイトルがでてしまう現象をどうにかできませんでしょうか;?
          教えて頂いた通り、title=”‘+this.playLinkText+'”と.attr(‘title’, this.playLinkText)は消しています。

          宜しくお願いします;

          Reply

          • saori 2014-03-31 3:24 PM

            亜紀 さま

            こんにちは。停止ボタン側のタイトル属性も削除する必要があるみたいでした。よく考えればそうですね…。
            停止ボタン側のタイトル属性を削除するには、jquery.galleriffic.js の 403行目(以下の部分)を削除、

            .attr('title', this.pauseLinkText)

            同じく jquery.galleriffic.js の 897行目

            .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'" rel="nofollow">'+this.pauseLinkText+'</a></div>');

            ↑の箇所の title の部分(以下の部分)を削除してみて下さい。

            title="'+this.pauseLinkText+'"

            これでたぶん大丈夫ではないでしょうか??

  • 亜紀 2014-03-31 3:48 PM

    あわわ;すみません…ちゃんと保存できてなかっただけのようです;
    お騒がせいたしました><;

    Reply

    • saori 2014-03-31 3:50 PM

      そうですか(笑)出来ていたらとりあえずよかったです(^O^)

      Reply

      • 亜紀 2014-03-31 4:58 PM

        別の質問をしても宜しいでしょうか。
        縦の画像がある場合、自動で大きい画像の方を縦にしたりは出来ますでしょうか?

        横と縦の画像があるので、どうすればいいものか…;
        何度もきいてしまい申し訳ありません;

        Reply

        • saori 2014-03-31 8:51 PM

          亜紀 さま

          縦画像は自動的に縦方法に読み込んでくれたと思います。
          よろしくお願いします。

          Reply

          • 亜紀 2014-04-01 10:41 AM

            一応縦に表示はされるのですが、下が切れてしまいます。
            #main_containerにhtightを指定すると表示したのでこれは解決しました。
            しかし縦画像が中央に行ってくれません。(左詰めになる)

            div.slideshow imgを縦用にdiv.slideshow img.testを作り、positionとleftを削除し、margin-left: auto; margin-right: auto;をいれました。

            div.slideshow img {
            vertical-align: middle;
            border: 1px solid #ccc;
            position: absolute;
            left: 0;
            }

            div.slideshow img.test {
            vertical-align: middle;
            border: 1px solid #ccc;
            margin-left: auto;
            margin-right: auto;
            }

            これを縦のimgのところにclass指定して入れたのですがimgにclassが反応してくれません。
            中央にするにはどうすればよいでしょうか。

          • saori 2014-04-01 3:37 PM

            亜紀 さま

            HTMLファイルの画像タグにclassを振ってもたぶんスライドショー部分の画像には反映されないんじゃないかなと思います…。Gallerifficのこの→「Galleriffic | Thumbnail rollover effects and slideshow crossfades」サンプルだと縦でも中央揃えになっているのでこのサンプルのスタイルを参考にされてみてはいかがでしょうか。こちらのページの「Galleriffic | A jQuery plugin for rendering fast-performing photo galleries」のダウンロードのところで、ここで公開されているサンプルのファイルを一式ダウンロードできますよ。

  • 亜紀 2014-04-10 10:20 AM

    お返事遅れまして申し訳ありません;
    無事作成できました!!ありがとうございます^^
    何度も質問してしまい申し訳ありませんでした;
    そのたびに丁寧なご返答とても感謝しております!
    ほんとうにありがとうございました^^

    Reply

    • saori 2014-04-10 7:59 PM

      亜紀 さま

      いえいえ、お礼のコメントありがとうございます!お役に立てたならうれしいです( ^ω^ )設置できてよかったです。

      Reply

  • sukesan 2014-06-05 12:06 PM

    saori様

    ソース参考にさせていただきました!
    一点質問なのですが、ie7とie8では正常に表示されないようですが、jQueryのバージョンが対応していないのでしょうか?

    Reply

    • saori 2014-06-06 12:12 PM

      sukesan さま

      ご参考ありがとうございます。
      jQuery の最新バージョンで Galleriffic を使用した事がなく詳しくはわかりませんが、1.9 以上だと使えなくなっているメソッドなどがあるため 1.8 系のjQuery本体で使用されてみてはいかがでしょうか?古い jQuery 本体では IE6 以上で対応していたと思います。よろしくお願いします。

      Reply

  • hddx 2014-07-17 12:08 PM

    こちらのjqueryをサイトで使用したいと思っております。
    現在大きな画像をクリックすると、次、次と切り替わっていきますが、こちらの大きな画像のリンク先を設定・変更する方法はお分かりになりますでしょうか。
    例えば画像の詳細ページ等に遷移させるなど。

    以上、よろしくお願いいたします。

    Reply

    • saori 2014-07-17 11:11 PM

      hddx さま

      はじめまして。そういったカスタマイズを行ったことがないため思いついただけの回答になりますが…。
      data 属性などで飛ばしたいアドレスを img またはサムネイル部分に追加して、大きい画像部分の click イベントを data 属性で追加したアドレスへ移動させてみるコードと差し替えてみてはいかがでしょう?

      Reply

    • Greta 2016-07-20 7:46 PM

      I found just what I was needed, and it was eneiitarntng!

      Reply

  • hddx 2014-07-18 3:52 PM

    saori様

    ご回答いただきありがとうございます。
    一度そういった方法で試してみます。

    Reply

    • Beatrice 2016-07-20 7:23 PM

      Kudos to you! I hadn’t thhogut of that!

      Reply

  • micc 2014-12-05 3:14 PM

    こんにちは、こちらの記事大変参考になりました。

    しかし、下記cssの記述が漏れると、画像の切り替えがスムーズでなかったり、キャプションが切り換えで2重に表示されたりと、デモ通りには表示されずハマりました。


    .slideshow-container {
    position: relative;
    overflow: hidden;
    }

    .caption-container {
    position: relative;
    clear: left;
    }

    div.slideshow span.image-wrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    }

    span.image-caption {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    }

    Reply

    • saori 2014-12-06 12:02 PM

      micc さま
      コメントありがとうございます。
      教えて頂いたことを記事に追加させて頂きます。
      ご指摘ありがとうございました!

      Reply

  • yuyuka 2015-04-23 4:17 AM

    初めましてサムネ画像のページを切り替えるとバグで一番最後の画像が他のページにも付いてきてサムネアイコン10個指定のところが11個になったりするのですが原因はなんなのでしょうか?

    Reply

  • yuyuka 2015-04-24 3:55 AM

    お返事ありがとうございます
    その後いろいろためしていたところ他のスライドショーなどで使っていたファイルとの相性がわるかったためということがわかりました。
    ご迷惑おかけしました。
    またもう一つ質問なのですが
    サムネ枠を2個つくることはできるでしょうか?
    左の蘭に 植物枠 建物枠 のように二種類写真ごとにカテゴリーわけして
    右に表示されるようにしたいのですが方法ありましたら
    教えていただけないでしょうか。

    Reply

    • saori 2015-04-24 6:46 PM

      yuyuka さま

      1つ問題が解決してよかったですね。

      > サムネ枠を2個つくることはできるでしょうか?
      こちらのご質問ですが、オプションでそういったものは用意されていないため、プラグイン自体のカスタマイズが必要になるかと思います。

      Reply

      • yuyuka 2015-04-26 1:39 AM

        お返事ありがとうございます。
        簡単にはできなそうということで自分の技術では無理そうなので諦めることにします。

        Reply

  • momo 2015-06-13 7:54 PM

    いきなりの質問失礼致します。
    こちらのギャラリーの同一ページ内に、複数設置をすることは可能でしょうか。
    色々と試したのですがどうも上手く行きませんでした。

    Reply

    • saori 2015-06-16 1:01 PM

      momo さま

      うーん、複数設置したことがないので不明なのですが、ID で設置だと上手くいかないかもしれませんね…。

      Reply

  • Shiniciro 2016-05-17 4:40 AM

    こんにちは。コメント失礼します。色々勉強になりました。
    全然初心者ですが、なんとか設置と画像の配置まではたどり着けました。
    ありがとうございます。
    元々あった画像の位置にサムネイルや画像のサイズを変えてコピペで増やしているやり方です。
    ちなみに質問なのですが、現在サムネイルが12個ずつで配置されていまして(タグは変えてないので初期設定のままですが、、、)、その後サムネイルのページを切り替わる様にしたいのですが、どのようにすれば出来るのでしょうか?
    もしタグなど教えていただければ有り難いです。

    Reply

  • snowy 2016-07-30 5:47 AM

    はじめまして、こちらのサイトの説明の方、「galleriffic」のギャラリーについて丁寧に詳しく解説してありましたので、初心者の私でも理解できて助けられました。

    本当にどうもありがとうございます。
    感謝いたします。m(_ _)m

    今、もう1歩進歩してみて、
    こちらのように、

    http://www.twospy.com/galleriffic/example-3.html

    右側の大きい画像の下の部分に、
    「Title」と「Description」を入れたいと思っているのですが、
    なかなかうまくいきません。。

    もし、ご助言をいただけましたら、幸いです。。

    Reply

    • saori 2016-07-31 8:14 PM

      snowy さま

      はじめまして。ご参照ありがとうございます。

      ソースコードを見てみると以下のように、Title は  ”image-title” Description は ”image-desc” というクラスが振られているようなので、そのようにマークアップされてみてはいかがでしょうか?

      <li>
      <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
      <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
      </a>
      <div class="caption">
      <div class="download">
      <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
      </div>
      <div class="image-title">Title #22</div>
      <div class="image-desc">Description</div>
      </div>
      </li>
      

      それでも、うまく表示されないようでしたら参考先として貼っていただいているページのソースコードの js の指定方法などを確認されるとよいと思います。
      よろしくお願いします。

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS