【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

関連記事

【フォト】第41回金比羅山・瀬戸川桜まつり

2019年3月25日(月)~4月7日(日)に開催された第41回金比羅山・瀬戸川桜まつり。藤枝市の中心を流れる瀬戸川沿いの両岸と金比羅山は、約800本以上ものソメイヨシノがあり、桜の名所として知られています。今年の桜の開花は4月に入ってからが満開でした。今回撮影したのは、夕暮れの瀬...続きを読む

2019.04.15フォトギャラリー

【フォト】吉田町川尻海岸『幸福呼ぶ鳥居~初日の出~』

静岡県吉田町にある川尻海岸では年始の期間限定で『幸福呼ぶ鳥居』がお目見えします。鳥居に朝日が昇る様子は幻想的です。初日の出の日は、多くの方々でにぎわっていました。 フォトギャラリー ※写真をクリックすると拡大表示します。 [gallery link="file" col...続きを読む

2017.01.01フォトギャラリー

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

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

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

2018.09.14シームレステクスチャ

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ