男のガレージ、カメラや自転車など GARAGE-M > WordPress > サイト運営 > WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

wordpress

WordPressで写真のギャラリーを探していたのですが、中々試してみたいものが見つからなかったのですが、これは良いかもと思い「FlippingBook Gallery」を設定してみました。

これはデジタルカタログで使われているような、かなり凝ったプラグインだと思います。

さて、設定していくとどうなるでしょうか?

 

 ギャラリープラグイン「FlippingBook Gallery」インストール

 

プラグインの「新規追加」では「FlippingBook Gallery」とは表示されずに「Page Flip Image Gallery 」と検索結果に出てきます。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

インストール後には「FlippingBook Gallery」となるので、新規追加の検索時の「Page Flip Image Gallery」で、「インストール済みプラグイン」や通常インストールしたプラグインが格納される「設定」を探しても見つからずに少し戸惑ったよ。

このプラグインは「設定」には格納されずに、左側のダッシュボートの下の方に新しく出現していますよ。

迷うよね~

 

ギャラリープラグイン「FlippingBook Gallery」設定

 

まずは、画像をアップロードしますので、「Images」からページに入り「Create New Gallery」をクリックして新規ギャラリーを作成します。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

それでは画像を、まずはアップロードするので「Upload Images」クリックしてから、画像を選択してアップロードします。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

アップロードが完了するとこのように今回は「test」としていますので「testギャラリー」が増えますので、「Create Book」をクリックして先に進みましょう。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

 

ここでは細かい設定を行えますが、今回は「背景」だけ変更して進みました。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

上の設定画面は英語ですが、私は普段、大体の内容が分かれば良いと思っているので、ブラウザに「Google翻訳」を追加しているので、ポチっとします。するとこんな感じになります。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

 

設定内容を保存した後に、どんな感じになっているか「Preview」で確認できます。ありゃらまだ横画僧が縦落としのページに縦横比が崩れて入ってしまったりしていますね。

細かい修正は後回しにして、これをページに入れる方法を説明しましょう。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

上のキャプチャーをご覧くださいね。「ID」番号が振られているのが分かりますよね。

その番号が重要になります。

下記のショートコードに「ID」番号を入れて、ページに貼り付けると表示されるようになります。

 

また、投稿や固定ページのツールにアイコンが増えていますので、クリックするだけで「ID」以外のショートコードは貼り付けられるので、「ID」番号だけを覚えておけばスムーズに作業が進められますよ。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

基本的な設定は以上になります、細かい設定はしなくても十分デフォルトでも大丈夫でした。

 

ギャラリープラグイン「FlippingBook Gallery」細かい設定

 

デフォルトで大丈夫といっても、そうそう画像が縦横比がおかしくなって崩れていました。

その辺も含め設定方法を追記しますね。

「Page Editor」をクリックします。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

するとブックギャラリーのレイアウト調整が出来る画面が開きます。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

ここでは、ページのレイアウトとそこにはめ込む画像の細かい設定ができます。

 

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

赤枠:ページを選択する
青枠:ページのレイアウトが選べます。
緑枠:レイアウトの中に流し込む画像を選択します(画面中央にドラッグ&ドロップで流し込めます)
ピンク枠:設定を保存

 

上記で調整をすると、公開しても恥ずかしくない程度になりましたね。

なるほど、見開きで一枚の横画像を見せるには、あらかじめ半分ずつにした画像を用意する必要があるようです。

縦落としの画像だとピッタリマガジン風でカッコいいですね。

でも、これテキストなども画像にあらかじめ入れておくと、プリント機能もあるので、間違いなくデジタルカタログ、雑誌も制作可能ですね。

素晴らしい。

サーバーの容量も関係しますけど、ロリポップ!でも1画像20Mまでいけるように設定しているので、D800で撮影した画像はA1印刷まで対応しているので、雑誌サイズなら楽勝だ!

なんて、素晴らしいのだろう。

 

さらに、背景画像やスキン、音源まで「Book Properties」では、設定ができるようですよ。

私はそこまで細かくは設定しませんでしたが。

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

ちなみに私が修正した項目です。

Width:幅(ピクセル単位)
Height:高さ(ピクセル単位)
Dynamic Scaling:表示画面に合わせて動的サイズ調整をする
Preserve Proportions:縦横比を維持するかの選択
Hardcover:表紙の紙質を選択できます(すぐ戻してしまいましたが)

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

WordPressデジタルカタログの様な素晴らしいギャラリープラグイン「FlippingBook Gallery」設定

 

項目の「Dynamic Scaling」に気が付くまでに、画像を綺麗に見せたくて、すぐ上の「Width:幅(ピクセル単位)」と「Height:高さ(ピクセル単位)」を一生懸命変更していましたが、何とすぐ下に「Dynamic Scaling:表示画面に合わせて動的サイズ調整をする」があってガッカリ。

でも、おかげで好みの設定が分かったので、写真は「1440*1080」で上げてるので、それに合わせて「Width:1440」と「Height:1080」にして、「Dynamic Scaling:Yes」であっけなく解決しました(笑)

 

そんなこんなでこんな感じで完成!

残念なことにフラッシュなので、iphone達では見れませんでした。

 

ギャラリーページを早速、固定ページで作って置いてみましたよ。
     


コメントを残す