【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

関連記事

藤枝おんぱく『着物でまちあるき』(4/25)

藤枝おんぱく『着物でまちあるき』(4/25)満開の藤が咲く蓮華寺池公園まで、お気に入りの着物で「まちあるき」をするプロジェクトです。八百年の歴史ある「熊谷山 蓮生寺」での着付け体験に加え、「匂い袋づくり」「着物とマナーの話」と盛り沢山の様子のフォトレポートをお届けします。 ...続きを読む

2015.05.01フォトギャラリー

美容室グランディール様WEBサイト制作

富士宮市にある『美容室グランディール』様のWEBサイトを制作いたしました。グランディール様の店内のイメージであるナチュラルで癒される空間をWEBサイト上でも感じていただけるようにデザインをいたしました。 [gallery link="file" columns="4...続きを読む

2015.02.14WEBサイト制作美容室

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

【デザイン】印象に残るビジネスカードデザイン第2弾

以前に「印象に残るビジネスカードデザイン」をテーマにアイディアにあふれるビジネスカード(名刺)をご紹介しました。今回は第2弾目です。 今回もちょっと変わった、もらうと印象に残るビジネスカード(名刺)の事例をご紹介します。 TAM Cargo:Box Busines...続きを読む

2015.04.16インスピレーション

インクジェットプリンタでクリーニング機能を実施しても印刷が汚れてしまう

みなさんはインクジェットプリンタで写真などを印刷したときに、印刷した面がインクで汚れていたという経験はございませんか? 写真などをキレイに印刷するため光沢紙を使ったときにインクの汚れがついてしまうとやりきれない気持ちになります。 印刷した面がインクで汚れてしまう場合、インク...続きを読む

2018.03.05プリンタ印刷