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

関連記事

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

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

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

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

佐藤利音『インサイド・アウトサイダー #バグ式』これまでのお話

  先週 ⇒ランボー 怒りの新規ファイルのアップロードが出来ないWordPressト

記事を読む

いただきものの台湾写真をアニメ風に加工してみた♪ 音井れこ丸先生撮影の台湾写真 夏、月、蛍幻夜、ファンタジーイメージ

お借りした台湾写真をアニメ風に加工してみました♪

写真:音井れこ丸先生期間限定配布の台湾写真 加工:くつきちよこ   登場人物:くつ

記事を読む

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪ 「FireAlpaca」の3Dパースは神!この発想はなかった!!!!2

SAI2始動! 3Dパース定規からバケツの隙間調節まで、クリスタ、FireAlpacaとざっくり比較してみたよ♪

「SAI2」ツールの漏れ出し防止幅は上限100px!スライダーで直感的に使えます♪ &

記事を読む

Nesting boxes by Guillaume Speurt, on Flickr 創作系クリエイターさん向けWp構造をお試しかっ?!

創作系クリエイターさん向けWp構造をお試しかっ?!

  Nesting boxes by Guillaume Speurt, on Flickr

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

Amazon Kindle by Robert Nelson, on Flickr Attribution 2.0 Generic (CC BY 2.0) 投稿者が安心できそうな電子書籍プラットフォームの利用規約(「著作権」のみ)

投稿者が安心できそうな利用規約(著作権)の電子書籍自己出版サービスよっつ

  甥っ子姪っ子を急遽預かることになったり、とあるサイトへの寄稿をはじめたりと、時間的な余裕が

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場