【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

page-flip-image-gallery-word

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。

しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので時間やコストがかかってしまいます。

また、カタログの内容を更新する場合なども専門スキルがないと難しかったりします。そこで手軽に制作・管理ができないかと方法を探していたら、なんとWordPressにWEBカタログを作成することができるプラグインがありました。有料のプラグイン(確認したとき40ユーロ:2014年2月19日)ですが、一般的なWEBカタログとして問題なく利用できそうなのでご紹介します。

Page Flip Image Gallery

デモサイトとプラグインの購入はこちらの公式サイトより行うことが出来ます。デモ用のフリーバージョンもありますので実際にプラグインをダウンロードして機能を確認してみることもできます。

pageflipgallery-com

Link:http://pageflipgallery.com/

インストール

プラグインをダウンロードしたら、WordPressへアップロードしてインストール後、有効化します。

プラグインの一覧でみてみると「WordPress FlippingBook」となっています。

page-flip-image-gallery-wordpress-plugin-01

有効化するとメニューに「FlippingBook」の項目が追加されます。

page-flip-image-gallery-wordpress-plugin-02

さっそくWEBカタログを作成

このままWEBカタログが作成できるみたいなので、早速作成してみたいと思います。

「FlippingBook」メニュー内の「Manage books and pages」より「Add New Book」をクリックして、WEBカタログを作ってみます。

ものすごく縦長の設定画面が出てきました。カタログの横幅、縦幅、背景画像、メニューの位置、マウスを置いたときの動作、ページのめくるスピードなど細かく設定ができるようです。ページをめくる音の設定もありました。

最初の「Book name」に「サンプルブック」と入力して、他の項目は初期値のままで作成してみたいと思います。

page-flip-image-gallery-wordpress-plugin-03-01

最後に「Add Book」のボタンをクリックして作成は完了です。

page-flip-image-gallery-wordpress-plugin-03-02

「Manage books and pages」の一覧にさきほど作成した「サンプルブック」が追加されました。カタログっぽいですね。

続けてページを作成していくようなので「Add Page」のボタンをクリックしてページを追加してみます。

page-flip-image-gallery-wordpress-plugin-03-03

ギャラリーを追加してとのことなので、「Create New Gallery」ボタンを押してギャラリーを追加してみます。

page-flip-image-gallery-wordpress-plugin-03-04

ギャラリー名に「sample」を入力して作成してみました。

続けて画像をアップロードするみたいので、「Upload New Images」ボタンをクリックしてみます。

page-flip-image-gallery-wordpress-plugin-03-05

画像をアップロードする方法を選んで、画像をアップロードします。

一度に複数の画像をアップロードしてみたいので「Upload Archive」を選び、Zip形式で圧縮してまとめた複数の画像データをアップロードしてみます。

page-flip-image-gallery-wordpress-plugin-03-06

画像が1枚ずつページとして登録できました。

page-flip-image-gallery-wordpress-plugin-03-07

これで準備はOKのようです。この作成した「サンプルブック」を公開してみます。

公開するときは以下のショートコードを利用します。作成したブックのIDを指定して投稿や固定ページに貼り付けます。

[book id='1' /]

公開プレビュー

公開をするとこのような形でWEBカタログができます。ページの動きもスムーズで部分的な拡大、フルスクリーンモード、印刷もOKです。

Flashで稼動しているのでiOSなどのFlashが利用できない環境では表示できないのが残念ですが、メンテナンスなどもページとして登録する画像を差し替える対応ができて、WEBカタログとしては十分機能しそうです。

page-flip-image-gallery-wordpress-plugin-04

関連記事

【JavaScript】フォームの入力チェックができるライブラリ『Validatr』

お問い合わせフォームなどの入力フォームで入力された値をチェックや未入力をチェックする事ができるJavaScriptライブラリ『Validatr』をご紹介します。 『Validatr』はjQueryをベースに開発され、MIT License にて公開さております。電子メー...続きを読む

2015.02.14HTMLコーディング

ネイルサロンBrillez(ブリレ)様ロゴ制作

ネイルサロン『Brillez(ブリレ)』様のロゴを制作いたしました。Brillez(ブリレ)はフランス語で輝くの意味があります。 お客様のご要望で、店内はランドマークとなるシャンデリアあり、高級感のある大人の女性の雰囲気なので、ロゴも店内の雰囲気に合わせてデザインをして...続きを読む

2015.01.14ロゴ制作

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【WP】ユーザーの一覧、ユーザー別に最新記事を表示する方法

キュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。 今回は、WordPressでユー...続きを読む

2016.07.14WordPress

【無料】商用利用OKシームレステクスチャ「木目(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの柱、床材のような木の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.11シームレステクスチャ