WordPressでページめくり「ページピール(page peel)」を5分で入れる

WordPress

もうずいぶん前から流行ってはいますが、ページ右上とかによくある、ページめくり（ページピールと呼びます）の表現って結構興味ありませんか？

このページピールの使い方によっては、バナーなどを用意するよりもすごくインパクトがあって、クリック率も高いとも言われていますね。

というわけで、これをWordPressに導入してみます。やってみたら5分くらいでできました（もっと早かったかな・・・）。 この記事を書くのに1時間。

ではでは、ご紹介しますね。

１．ファイルをダウンロード＆解凍をします

参考サイトはこちら。　やり方をほぼなぞっています。このサイトからファイルをダウンロードしましょう。で、解凍。次は、自分用にjsファイルをちょっとだけ変更します。

２．jsファイルのコードをちょっといじくってからアップロード

peel.jsファイルをテキストエディタなんかで、開きましょう。

javascript

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://gplus.to/imamurabiz'); //クリックされると飛ぶURLを指定
 jaaspeel.small_path = 'https://www.imamura.biz/blog/ファイルアップした場所/small.swf'; //マウスオーバー前のflashファイルの場所を指定
 jaaspeel.small_image = escape('https://www.imamura.biz/blog/ファイルアップした場所/small.jpg'); //small.swfのゆらゆら状態のときに表示する画像を指定
 jaaspeel.small_width = '100'; //smallの時の横幅
 jaaspeel.small_height = '100'; //smallの時の縦幅
 jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'https://www.imamura.biz/blog/ファイルアップした場所/large.swf'; //マウスオーバー時の時のflashファイルの場所を指定
 jaaspeel.big_image = escape('https://www.imamura.biz/blog/ファイルアップした場所/large.jpg'); //large.swfの時の画像を指定
 jaaspeel.big_width = '650'; //largeの時の横幅
 jaaspeel.big_height = '650'; //largeの時の縦幅

上のような感じで、それぞれご自身の環境に合わせて解釈してください。変更が終わったらFTPソフトなどでアップロードしましょう。

３．WordPressのヘッダー部にコードを入れる

それでは、ヘッダーにページピールのスクリプトを読み込みます。

WordPressの管理画面から、テーマ編集、header.phpをクリック。

<head>～</head>

の間に下の一行を入れましょう。

html

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/peel/peel.js"></script>

ファイルを更新して終わりです。

４．サンプルです

こんな感じになります。

めくれてますねぇ～。

５．まとめ

海外サイトとかでよくあった、ページがめくれてるのってどうやんだろ？と思ってた方もいらっしゃるかと思います。

ページピール（pagepeel）と呼ぶのも知りました。

今回はWordPressで実装してみましたが、今回はまじで楽勝でしたね。実際、やり方はいくつかあります。ただ、flashのほうが、スムーズに動いているような気がしますね。

もちろん、ご使用の環境にもよるんでしょうがね。swfファイルって読み込み遅いイメージがあるんですが、肝心なのはファイルサイズであって、jsファイルでもサイズが大きいものは読み込みも遅いし。それによってページが重くなることだってありますから。

どのファイルをどう使うか、というのはもちろん人それぞれ。ですね。

というわけで、WordPressでのページピール（page peell）の導入方法でした。

著者:bouya Imamura