2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

公開日: : 最終更新日:2016/03/22 FlippingBook Gallery, WPプラグイン, Wp小技, ワードプレス, 創作支援, 電子書籍

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

 

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

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

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

 

昨日は新規ギャラリーからBOOKを作成するところまででしたが、本日は作成したBookををブログに表示させる方法です。

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方Numbers by SamahR, on Flickr

もくじ

Bookの作成方法はコチラをご覧ください⇒Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 基本編

作成したBOOKをブログ記事内で表示

作成したBookをブログの記事内で表示します。

BookのIDを確認する

ダッシュボード⇒設定⇒FlippingBook⇒Manage Books and pages

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 記事でBOOK表示する2

表示したいBookのIDを確認します。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 記事でBOOK表示する

WordPress編集画面でタグにIDを入力する

FlippingBook GalleryをインストールするとWordpressの編集画面にBookアイコンが表示されるようになります。

Bookアイコンをクリックするとタグが表示されますので、『”』の間に先ほど確認したBookのIDを入れます。

例えば、sampleの場合はBookIDが14でしたので’14’と入力します。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 記事でBOOK表示する3

Book ID:14↓

Bookの記事での表示方法は以上です。

プロパティBook propertiesで詳細設定

Book propertiesでは、ページめくり音、Bookの表示サイズ、開始ページ設定などの詳細項目を設定できます。

Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方 Bookの詳細が設定できるBook properties

◆おおまかな設定表◆

◆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⇒『Book properties』で該当する項目を探してみてください。

 

ズーム率の設定

先ほども申しましたが、デフォルトのままでもめちゃめちゃ使い勝手が悪いわけではありません。

しかし、Book properties中でちょっとだけ気になった&設定に手こずったのが『ズーム』です。

FlippingBook Galleryは、ユーザーさん側でズームの割合を調節してもらうことが出来ないようです。

ですので表示は、原寸もしくはズーム設定値のどちらかだけで中間は選べません。

例えば、デフォルトのデータ原寸横幅は640px(見開き)、同じくデフォルトのズームの設定値は800px(片面)です。
(このデータは見開きの数字で、ズームは片面というのもややこしいのですが…(;・∀・))

この場合見開きでは

  • 原寸640px*480px
  • ズームでは1600px*1200px

のどちらかしか選べないということです。 ※片面の場合は、原寸320px*480px、ズームで800px*1200px

中間が選べないのも痛いですが、こちらは致し方ないとして、デフォルトのズーム設定値が大きすぎます。

スマホやタブレットも考慮するとあまり大きな数値にも出来ませんので、『Zoom Image Width』『Zoom Image Height』だけは適宜数字を変更しておいたほうが良さそうです。

サンプルでは初期値よりやや小さめの『Zoom Image Width』600px、『Zoom Image Height』900pxに設定しておりますが、これでもまだちょっと大きすぎな気もします。

サンプル:初期値1600(800)px*900pxの場合

サンプル:600px*900pxの場合

 

まとーめ

昨日に引き続きFlippingBook Galleryの使い方『BOOKを記事で表示』とズーム設定についてでした。

◆まとめ◆

  • BookをWp記事内で表示するにはBookのIDをタグに入力する。
  • ズームの初期値が大きすぎるので調整したほうがよさげ。

ところでズームについてもうひとつ。

FlippingBook Galleryのズームは、中間の値で表示出来ないだけでなくズーム中ページめくりが出来ないんですよっ∑(´∀`;)

ズーム中に次のページを読みたいと思ったら、いったん原寸に戻してページをめくらなくてはいけないんです。

この操作でストーリーへの集中力が途切れますので、かなり痛いですね;;

と言っても、これが出来てしまったら電子書籍となんら変わりなくBook表示が出来てしまうので、これはこれで微妙ですが…

今は、場(プラットフォーム)ごとに使えるツールも様々…

というわけで当ブログでは、今回のWpプラグイン『FlippingBook Gallery』以外にも、『縦書き文庫』や『ブクログ』など、いくつかコンテンツ表現のツールをご紹介させて頂いておりますが…

しかしながら、創作に大事なのはとにかくにもコンテンツの中身です。

いくら便利なツールをたくさんご紹介させて頂いてもそれ単体では金棒でしかありません。

ですのでくつき的には、こういったツールのご紹介が、どなたかの鬼(コンテンツ)に金棒としてお役に立てていただけるのが一番の幸いでございます。

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

Book自体の表示を小さくしたり、見開きデータの簡単な作り方、透過ファイルの表示の仕方などはまたのちほど…

 

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

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

関連記事

簡単!『ファイヤーアルパカ』で動くイラスト作成しよ!オニオンスキンモードでラクラク作画! 4:うっすら透けて見える前の絵を確認しながら、絵を描きます。

簡単!『ファイア アルパカ』で動くイラスト作成しよ!オニオンスキンモードでラクラク作画!

  Firealpaca(ファイア アルパカ) で、素材作成 ⇒ GIF

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

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

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

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

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

電子書籍出版進捗「やらないとわからないこと」、その他プロモーションのお話

電子書籍出版進捗「やらないとわからないこと」、その他プロモーションのお話

  Guess where we are... by Chuck Coker, on Flickr

記事を読む

2014-10-03 17.25.44 by sstrieu, on Flickr

実在の商品名、店舗名、人物名を小説などを創作作品に登場させた場合の一インディーズ作家の対応メモ

2014-10-03 17.25.44 by sstrieu, on Flickr  S

記事を読む

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

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

  Nesting boxes by Guillaume Speurt, on Flickr

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

Venice Muscle Beach by Lin Mei, on Flickr 『ArtPose』がAndroidで使えないとお嘆きの皆様へ(*´∀`*)つ筋肉モデルサイト『BOYS POSE.COM』という男の園へようこそ♪

筋肉モデルが少ないとお嘆きの皆さまへ『ArtPose』のキャプチャ画像を利用した筋肉モデルサイト『BOYS POSE.COM』へのいざない

Venice Muscle Beach by Lin Mei, on Flickr So

記事を読む

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です。』宣伝回:その3 「イメージ:デバッグ用スマホ」挿絵用クリスタの「素材をさがす」スマートフォン(携帯電話) illust by @310104o design by 92ki

佐藤利音『宇宙(セカイ)をデバッグする、簡単なお仕事です。』宣伝回:その3「セルシス素材」の凄まじさを語る!

  ※ラフ案:佐藤利音 デザイン:くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 

記事を読む

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

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

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