【この記事を読むのに必要な時間は約 13 分です。】
画像や指定範囲（divBOX）をフリップさせたい。FlipさせるJqueryやCSSのサンプルは数多く紹介されているが、私のように中途半端なCSSやJavaScriptの知識しかないと、結局、自分のブログやサイトで利用したいときにうまくカスタマイズできない。
1週間以上様々なサイトをさまよった結果、私レベルでも自分の望むようにカスタマイズできそうなものを見つけたので紹介する。
目次
Jqueryプラグイン「Sponsor Flip Wall」と「QuickFlip 2」
今回のJqueryプラグインの選定条件は、以下の3つ。
1)自分レベルの知識でもカスタマイズが簡単にできること。
2)画像や指定範囲（divBOX）全体で、動作させられること。
3)クリックとマウスオーバーどちらでもFlipできるように設定できること。
この条件にあうものを２つ見つけた。Jqueryプラグイン「Sponsor Flip Wall」と「QuickFlip 2」だ。
「Sponsor Flip Wall」プラグインは本来パネルを多数配置してクリックでFlipし、phpファイルで管理するような全体構成になっているが、チュートリアルがわかりやすく、自分の望むようにカスタマイズできた。このプラグインについては、次回紹介したい。
今回は、より簡単にカスタマイズできた「QuickFlip 2」プラグインの利用方法を説明する。
「QuickFlip 2」のダウンロードとサーバーへのアップロード
ダウンロード
「QuickFlip 2」プラグインのホームページがこちら。
ページ中ほどの「Download QuickFlip 2」をクリックしてファイルをダウンロードする。
ダウンロードファイル：QuickFlip2.zip
必要ファイルのアップロード
必要ファイルはjquery.quickflip.min.jsだけなので、解凍して取り出し、サーバーにアップロードする。
必要ファイル：jquery.quickflip.min.js
「QucikFlip 2」の設置
step1-Jquery本体とQuickFlip 2の呼び出し
ヘッダー部分（<head>～</head>の間）に以下のとおり記載する。
なお、Jquery本体は、Google AJX APIのホスティングサービスを利用している。
<!-- jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery -->
<!-- quickflip -->
<script src="http://（アップロード先URLを記載してください。）/js/quickflip2/jquery.quickflip.min.js" type="text/javascript"></script>
<!-- /quickflip -->step2-QuickFlip 2の動作設定
クリックでFlipの場合とマウスオーバーでFlipの場合の2種類。
step1の記載に続けて、ヘッダー部分（<head>～</head>の間）に以下のとおり記載する。
クリックでFlipさせる場合
<!-- quickflip setting -->
<script type="text/javascript">
$(function() {
$('.quickFlip').quickFlip({
closeSpeed : 200, //スピード調整
openSpeed : 150 //スピード調整
});
});
</script>
<!-- /quickflip setting-->上記では、開くスピードと閉じるスピードを記載しているが、以下のように何も記載しなくてもよい。
<!-- quickflip setting-->
<script type="text/javascript">
$(function() {
$('.quickFlip').quickFlip();
});
</script>
<!-- /quickflip setting-->マウスオーバーでFlipさせる場合
<!-- quickflip setting -->
<script type="text/javascript">
$(function() {
$('.quickFlip').quickFlip();
$('.quickFlip').hover(function(ev) {
var $target = $(ev.target);
if ( !$target.hasClass('quickFlip') ) $target = $target.parent();
$target.quickFlipper();
}, function() {});
});
</script>
<!-- /quickflip setting -->step3-動作させたい対象の設定
クリックでFlipさせる場合
1)上記QuickFlip 2の動作設定で指定したクラス「quickFlip」で全体を包む。
2)その中に表と裏をそれぞれdivタグで指定する。クラス名は自由。
（今回は、flip1とflip2にした。）
3)画像や指定範囲（divBOX）のどこをクリックしてもFlipするように設定。
この手順と条件で、ボディ部分（<body>～</body>の間）の設置したい場所に以下のように記載する。なお、ハイライトさせた部分が必須部分。
<div class="quickFlip">
<div class="flip1">
<p class="quickFlipCta">（好きな文章を記載）</p>
<a href="#" class="quickFlipCta"></a>
</div>
<div class="flip2">
<h2 class="quickFlipCta">（好きな文章を記載）</h2>
<p class="quickFlipCta">（好きな文章を記載）</p>
<a href="#" class="quickFlipCta"></a>
</div>
</div>マウスオーバーでFlipさせる場合
基本的な構成はクリックでFlipさせる場合と一緒だが、aタグとクラス指定「quickFlipCta」が必要なくなる。
ボディ部分（<body>～</body>の間）の設置したい場所に以下のように記載する。なお、ハイライトさせた部分が必須部分。
<div class="quickFlip">
<div class="flip1">
<p>（好きな文章を記載）</p>
</div>
<div class="flip2">
<h2>（好きな文章を記載）</h2>
<p>（好きな文章を記載）</p>
</div>
</div>step4-cssファイルの設定
「QuickFlip 2」を動作させるために最低限必要なCSSの設定を行う。
ヘッダー部分（<head>～</head>の間）に以下のように記載する。なお、マウスオーバーでFlipの場合は、ハイライト部分が必要なくなる。
<!-- for quickflip css -->
<style type="text/css">
.quickFlip {
positon: relative; /*必須ではない*/
width: 300px; /*枠全体の幅（必須）*/
height: 200px; /*枠全体の高さ（必須）*/
}
.quickFlip a {
display: block; /*枠全体にaタグ（必須）*/
width: 100%; /*枠全体にaタグ（必須）*/
height: 100%; /*枠全体にaタグ（必須）*/
position: absolute; /*枠全体にaタグ（必須）*/
top: 0; /*枠全体にaタグ（必須）*/
left: 0; /*枠全体にaタグ（必須）*/
cursor: default; /*カーソル表示をdefaultに*/
}
.flip1 {
background:url(http://(アップロードした画像のURL)); /*画像を指定・・・画像なしの場合は必要ない*/
background-color: #b0c4de; /*表枠の色 lightsteelblue・・・画像を指定した場合は必要ない*/
border: solid 1px #696969; /*枠の指定 dimgray*/
border-radius: 5px; /* CSS3角丸指定 */
-moz-border-radius: 5px; /* Firefox用角丸指定 */
-webkit-border-radius: 5px; /* Safari,Chrome用角丸指定 */
}
.flip2 {
background:url(http://(アップロードした画像のURL)); /*画像を指定・・・画像なしの場合は必要ない*/
background-color: #ee82ee; /*裏枠の色 violet・・・画像を指定した場合は必要ない*/
border: solid 1px #696969; /*枠の指定 dimgray*/
border-radius: 5px; /* CSS3角丸指定 */
-moz-border-radius: 5px; /* Firefox用角丸指定 */
-webkit-border-radius: 5px; /* Safari,Chrome用角丸指定 */
}
</style>
<!-- /for quickflip css -->なお、今回は、直接、HTMLファイルのヘッダー部分（<head>～</head>の間）へ記載しているが、CSSファイルとして作成し、呼び出して利用しても問題ない。
<head>
<!-- for quickflip css -->
<style type="text/css">
・・・・・・・スタイルを記載
・・・・・・・スタイルを記載
</style>
<!-- for quickflip css -->
</head>
↓（上の部分を例えばsetting.cssファイルとして呼び出してもよい）↓
<head>
<link rel="stylesheet" type="text/css" href="http://（アップロード先URLを記載してください。）setting.css" />
</head>step5-cssファイルで一般的な装飾
この部分は完全に任意に記載してもらえばよい。今回のサンプル（デモ）用に用意したもの。
ヘッダー部分（<head>～</head>の間）に以下のように記載している。
<!-- for common css -->
<style type="text/css">
.flip1 p {
text-align: center; /*中央に*/
line-height: 150px; /*だいたい中央に*/
margin:20px; /*マージン*/
font-size:32px; /*フォントサイズ*/
color:#ff0000; /*フォントの色 red*/
cursor:default; /*カーソル表示をdefaultに*/
}
.flip2 h2 {
text-align: center;
margin:20px; /*マージン*/
font-size:24px; /*フォントサイズ*/
line-height:1.2em; /*行の高さ*/
color:#2f4f4f; /*フォントの色 darkslategray*/
cursor:default; /*カーソル表示をdefaultに*/
}
.flip2 p {
margin:20px; /*マージン*/
font-size:16px; /*フォントサイズ*/
line-height:1.2em; /*行の高さ*/
color:#2f4f4f; /*フォントの色 darkslategray*/
cursor:default; /*カーソル表示をdefaultに*/
}
</style>
<!-- /for common css -->これで表示されているはず。
デモ
上記を組み合わせて実際に作成したもの。
クリックでFlip-ボックスのみ
クリックでFlip-ボックスとテキスト
クリックでFlip-画像のみ
クリックでFlip-画像とテキスト
クリックでFlip-画像とボックスとテキスト
マウスオーバーでFlip-ボックスのみ
マウスオーバーでFlip-ボックスとテキスト
マウスオーバーでFlip-画像のみ
マウスオーバーでFlip-画像とテキスト
マウスオーバーでFlip-画像とボックスとテキスト
是非おためしを！
なお、今回どこをクリックしてもFlipするように設定しているが、クリックする場所を指定してFlipさせるのが、デフォルトの「QuickFlip 2」の仕様だ。cssファイルの「.quickFlip a」を削除して、クリックさせる部分を「quickFlipCta」で個別に指定してやればよい。
以上
画像や指定範囲をクリックやマウスオーバーでFlip（裏返し）するJqueryプラグイン「Sponsor Flip Wall」の記事を作成したのでこちらも参考にして欲しい。
