1-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 基本編

くつキッチュ!アイコン wordpressカテゴリへ くつキッチュ!SCRAPス アイコン creator-help創作支援)カテゴリへ くつキッチュ!アイコン-e-book-電子書籍

 

追記:「WordPressの更新後、『FlippingBook Gallery』の表示に不具合が出るようになりました。」

現在、ご覧いただいている環境で不具合が出るという方は、ブログに縦書きテキストを埋める、BiB/iなどご利用になられると良いかと思います。

詳細 ⇒ 創作家さんに朗報!電子書籍の試し読みも出来る電書ちゃんのtumblr無料テーマがなまらスゴイ!

 

 

一昨日簡単にページめくり効果を入れられるFlippingBook Galleryをちろっとだけご紹介させていただきましたが…

今回はFlippingBook Galleryの基本編ということで、大まかな流れや基本設定についての記事となります。

※記事が長くなってしまったので本日は概要のみということで、実際のBookの作成は明日以降となります。

Spanish dictionary pages up into the air by Horia Varla Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方Spanish dictionary pages up into the air by Horia Varla

もくじ

Bookの作成方法はいくつかあるのですが、今回は「イメージギャラリーを作る」 ⇒ 「イメージギャラリーからBOOKを作る」の説明となります。

※WordpressプラグインFlippingBook Gallery(プラグイン名はPage Flip Image Galleryがインストールしてある前提での説明です。

先にBookのサンプルを見たい方は⇒コチラ

イメージギャラリーの作り方

まずはBookに作成に必要な『新規イメージギャラリー』を作ります。

Page Flip Image Galleryプラグインをインストールすると、ダッシュボードに『FlippingBook』という設定項目が表示されますので…

1.ダッシュボード⇒設定⇒FlippingBook⇒images⇒よりGalleriesに入ります。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :設定画面へ

2.新規ギャラリーを作ります。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :Create New Gallery

Galleriesで[Create New Gallery]をクリック⇒[Gallery Name]が開きます。

3.[Gallery Name]に任意の名前を入力します。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :Create New Gallery GalleryNameを入力後、Add Gallery

[Gallery Name]に後で自分がわかりやす名前を入力し、⇒[Add Gallery]をクリック

※今回は『sample』としました。

新規Galleryに画像を追加する。

『新規Gallery(sample)ができましたので、ギャラリーにBookで表示したい画像を追加していきます。

1.新規ギャラリー『sample』の[Upload images]をクリックします。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :作成されたGalleryに画像を入れていきます

2.新規ギャラリーへの画像の追加方法を選択します。

20140411-k-kizi8_mini

◆画像追加方法◆

  • 新規アップロード
  • アーカイブ(zip)をアップロード
  • 画像URLを入力
  • FTPの画像フォルダのURLを入力

ここでは、Add From URL (画像URLを入力)を選びました。

3.「メディアを編集」から画像URLと画像タイトルを入力します。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :『メディアを編集』などから画像URLを入力

[Upload]をクリックするとGalleryに画像が追加されています。

20140411-k-kizi10_mini

同じ手順で、Bookで表示したい画像を追加しておきます。

新規ギャラリーからBOOKを作成

作成したギャラリーからBOOKが作成出来ます。

1.追加された新規ギャラリー『sample』のメニューから[Create Book]をクリックします。

20140411-k-kizi10_mini

2.BOOKの基本設定画面が開きますので、各種項目を入力します。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 :BOOKの基本設定画面

最後に[Add Book]をクリックすると、設定が保存されます。

Preview(プレビュー)で確認

FrippingBook⇒Manage books and pages⇒作成したBookの[Preview]

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 基本編 プレビュー

で、Book表示を確認できます。

基本設定項目[BookProperties]について

基本設定の項目は結構大量にあります…;;

20140411-k-kizi12_mini

一応全部調べたのですが、すべてを説明するとなるとかなり冗長になってしまうので、下記の表以外の設定に関しては説明は省いています。

◆おおまかな設定表◆

◆Book name ブックの名前
◆Width・Height デフォルト 縦480 横640(見開き)
◆ブック背景設定 デフォルト背景Or背景無し
◆Background Color 背景色
◆Background Image 背景イメージの有無
◆Upload Background Image オリジナル背景画像アップロード
fit⇒ブックに合わせる
center⇒中央配置
centerleft⇒左上配置
◆Smooth Pages ページめくりをスムースに※重くなる
◆Rigid Page Speed ページめくりスピード
◆Preloader Type 読み込み中アイコンの種類
◆Flip on Click クリックでページをめくるかどうか
◆Flip Sound オリジナルのページめくり効果音をアップロード
◆Upload Sound ページめくり効果音
◆Zoom Enabled ズーム許可、不許可
◆Zoom On Click クリックでのズーム許可、不許可
◆Zoom Image Width ズーム時の横幅
◆Zoom Image Height ズーム時の高さ
◆Print Enabled プリントボタン表示、非表示
◆Download Enabled ダウンロードボタン表示、非表示

デフォルトのままでもめちゃくちゃ使い勝手が悪いというわけでもないので、まずは「デフォルトの設定のまま作成し、気になる箇所があればいじる」という感じでよろしいかと思います。

必要に応じて随時説明は追加していきますが、気になる方は設定ページで詳細をご確認下さいませ。

 

明日は実践&ズーム関係、その後は見開きや透過画像について

というわけで、ページめくり効果が簡単に導入できるプラグイン『FlippingBook Gallery』の大まかな使い方と基本設定でした。

明日は実践編ということで、いよいよ実際に画像をBookにしてみたいと思います。

こんな感じに表示されます↓

※表紙の薔薇画像はファイルサイズをBookに合わせて設定しておりませんので、縦横比が崩れております。
※金魚の見開き絵に関しては404.gif sorry-100 illust by s.sS.S作です。

もくじへ戻る↑

先ほど設定はデフォルトでも使えないことはないと申し上げましたが、それでもいくつか微妙な箇所があります。

明日は実践でのBook作成の他、基本設定の中で特に引っかかったズームに関する説明まで(できたら)します。(←長くなりすぎて出来なかったら明後日になります…(;´∀`))

その他、透過画像や、見開きなどの説明も随時更新する予定です♪

でっは~(*´∀`*)ノシ

ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

お世話になっているのに、忘れがちな「ブログ村」のぷちメンテ♪「(関連)画像メンテナンス」と「関連キーワード確認・変更」 該当記事とは関係ない「ドナルド」と「ミクさん」が表示されている場合など[再取得]をクリックします。 ※または、ドナルドを[代表表示]したい場合は、ドナルドにチェックを入れ直しておきます。

お世話になっているのに、忘れがちな「ブログ村」のぷちメンテ♪「(関連)画像メンテナンス」と「関連キーワード確認・変更」

なぜかどの記事にも頻繁に出没する記事にぜんぜん関連してない、ド+ルド  

記事を読む

Who Invented Twitter? by Grant Stantiall, on Flickr Some rights reserved

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ!

Who Invented Twitter? by Grant Stantiall, on

記事を読む

2016 あけましておめでとうございます。  その他、イントロ論文-『「見るなのタブー」についての一考察』 からはじまる小説のお知らせ。 自作伊達巻き。梅の形というより雲?

2016 あけましておめでとうございます。  その他、イントロ論文-『「見るなのタブー」についての一考察』 からはじまる小説のお知らせ。

だてまき   登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

とある電書の宣材画像 サンプルB

電子書籍プロモーションにオススメ!とある電書の宣材画像♪

タイトル(宣材画像)回収↓   宣材画像(テキスト+イメージ画像) &nbs

記事を読む

架空の商品、店、サービス等の設定進捗状況+オマケ 架空グルメアニメ【えんたんぐるめんと!】ロゴ

架空の商品、店、サービス等の設定進捗状況+Tumblrのあれ

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』【1】登場予定の架空グルメアニメロゴ Sto

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

クリスタのライン抽出ツールがスゴい! まず早い! 適当背景

クリスタのライン抽出ツールがスゴい! まず早い! 漫画を描いたことのない私が一瞬で背景をつくってみました♪

  CLIP STUDIO-EX(クリップスタジオEX) 作成時間:約2

記事を読む

トレス自体は合法ですよ!誤解されがな「トレス」「模写」と「トレパク」の違い

トレス自体は合法ですよ!誤解されがちな「トレス」「模写」と「トレパク」の違いについて

Tapping a Pencil by Rennett Stowe, on Flickr

記事を読む

『異世界』要素についてgdgd談義 ファンタジーには「ハイ」と「ロー」がある? アイキャッチ画像 illust by ss

『異世界』要素についてのgdgd談義 異世界モノと呼べるのはハイファンタジーだけ?

  最近の小説に欠かせない『異世界』要素について再考してみました。  

記事を読む

キャラクターの作り方 ※ネタ アイキャッチ画像 illust by ss effect&design by 92ki

魚介類などを利用したキャラクターの作り方 ※ネタ記事です。

  SSにキャラクターの作り方を聞いたところ、「魚とかを参考にする…」という思いもかけない答え

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune