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

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

事前準備

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

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

photo1.jpg photo2.jpg photo3.jpg
photo1-mini photo2-mini photo3-mini

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

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

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

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

20130821y

URLは、私のサイトの場合は、http://pcmanabu.xtwo.jp/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="http://pcmanabu.xtwo.jp/wp-content/uploads/photo1.jpg" /></li>
	<li><img alt="photo2" src="http://pcmanabu.xtwo.jp/wp-content/uploads/photo2.jpg" /></li>
	<li><img alt="photo3" src="http://pcmanabu.xtwo.jp/wp-content/uploads/photo3.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

実際に動かした画面

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

20130823b

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

※animationを "fade"にするだけ

どうでしょう!簡単でしょ!

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

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

ケース1:写真の縦横比が崩れる

20130823c

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

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

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

ケース2:IEで動かない

日本語の解説サイトに、あったものを参考に作ったら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;
}

まとめ

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

関連書籍

本が好きな方は、38ページに詳しく書いてありますので、参照ください。

書籍版 Kindle版

関連URL

Flashの代わりに使える!?FlexSliderを使ってみよう

Google Adsense「ブラウザのキャッシュを活用する」のアラーム問題を解決する方法

BackWPupの使い方 詳細(WordPressのバックアップ)

   このエントリーをはてなブックマークに追加