WordPressで超簡単にFlash風サイトを作ってみよう【FlexSlider】

2013年8月23日

昨日は、FlexSliderを使用して、Flash風のアニメーションを簡単に実現できることを説明しました。読者のご要望により、超簡単に自分のWordPressの記事に、FlexSliderを導入する方法について記載します。

事前準備

同じサイズの画像を3枚準備します。

私は、Photo1.jpg,Photo2.jpg,Photo3.jpgを準備しました。

photo1.jpg	photo2.jpg	photo3.jpg

面倒な方は、このphotos.zipこちらをご利用ください。

作業1:画像ファイルのアップロード

普段ブログに投稿するように、「画像の挿入」ボタンを押して投稿してください。

ファイル名は、重複さえなければ、アップロードしたファイルと同じ名前になります。

20130821y

URLは、私のサイトの場合は、https://pcmanabu.com/wp-content/uploads/photo1.jpgになります。

ブラウザで、表示されるか確認してください。

自分のブログのURL　+?/wp-content/uploads/ + 写真ファイル名

20130821z

作業2:必要ファイルのアップロード

必要なファイル

・「fonts」フォルダ一式
・flexslider.css
・jquery.flexslider.js

だけです。これらのファイルは、http://flexslider.woothemes.com/にあります。

クリックしてダウンロードしましょう

20130821v

このZIPファイルを開くと、以下のようになっています。この3つのファイルをFFFTPなどを使ってサイトのルートにコピーします。

20130823

作業3:記事に記述する

あとは、普通に投稿するだけです。赤の部分が人によって異なる部分ですね。

20130823a

<link href="flexslider.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<div class="flexslider">
<ul class="slides">
	<li><img alt="photo1" src="https://pcmanabu.com/wp-content/uploads/photo1.jpg" /></li>
	<li><img alt="photo2" src="https://pcmanabu.com/wp-content/uploads/photo2.jpg" /></li>
	<li><img alt="photo3" src="https://pcmanabu.com/wp-content/uploads/photo3.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

実際に動かした画面

FlexSlider実装サンプル　スライド(https://pcmanabu.com/?p=8600)

20130823b

FlexSlider実装サンプル　フェード(https://pcmanabu.com/?p=8626)

※animationを "fade"にするだけ

どうでしょう！簡単でしょ！

ご参考:私が、ハマッタ3箇所

私は、実装するとき、三か所が上手く動きませんでした。情報共有します。

ケース１：写真の縦横比が崩れる

20130823c

原因、imgタグにheight属性をつけると表示が崩れます

//誤り</pre>
<ul>
	<li><img alt="photo1" src="https://pcmanabu.com/wp-content/uploads/photo1.jpg" width="640" height="404" /></li>
</ul>
<pre>

//正しい</pre>
<ul>
	<li><img alt="photo1" src="https://pcmanabu.com/wp-content/uploads/photo1.jpg" /></li>
</ul>
<pre>

ケース2：ＩＥで動かない

日本語の解説サイトに、あったものを参考に作ったらIEで動きませんでした。?flexsliderで検索すると初めに表示される日本語サイトです。

//誤り
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
//正しい
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

ケース3：画像の左側の表示が変

20130823d

CSSの設定が原因でした。

//誤り
#MAIN UL{
 padding:10px 50px;
}

//正しい
#MAIN UL{
 padding:0px 0px;
}

まとめ

思ったよりも、簡単に実装できて驚きです。ぜひ、みなさんもチャレンジしてください。