絵本ブログ絵本のはなし子育て暮らし旅行・おでかけ素材・デザインサイト作りイラスト館お問い合わせよくあるご質問サイトマップ(全ページ一覧)絵本をめくるような動きを再現できるBookBlockをワードプレスのテーマCocoonで動かす方法コピー2020.02.06当サイトは創作絵本サイトです^^オリジナル絵本を作って無料公開しています。印刷できるPDF絵本スクロールして紙芝居のように読める絵本スワイプして読める絵本(スクロール絵本の画像をタッチ)この4通りの形で公開しています。絵本のカテゴリーがあります。www.akaeho.netこの記事を書いている時点で50作品以上の創作絵本がありますが、すべての絵本についてこの4つの読み方ができます。今回ご紹介するのは、1のパラパラめくれるウェブ絵本の作り方についてです。目次BookBlockについてと、このプラグインを使い始めた経緯ワードプレスでも使えるが、Cocoonの場合は少々手間がかかるCocoonで使うために試したことなお私はウェブに詳しい人間ではありません。(最後に)BookBlockについてと、このプラグインを使い始めた経緯これは既存のjQueryプラグインです。pages.tympanus.net複数枚の画像にパラパラとページをめくる動作をつけて、本のように見せることが可能になります。これは本来、CMS(コンテンツ・マネジメント・システム。ブログサービスなどのこと)を使わずにゼロからウェブサイトを作る方向けのプラグインだと思います。詳しい設置方法は、申し訳ないですが本記事内で解説はしません。Point本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。www.start-point.net私のサイトはワードプレスを使用していて、元々はワードプレス向けのプラグインを使用していました。実は、本をパラパラめくるような動きを出せるプラグインは複数あるんです。【9個】電子書籍・Web漫画用WordPress無料プラグイン初心者でも利用できる電子書籍・Web漫画サイトを作るワードプレスプラグイン。スマートフォン対応のレスポンシブ機能、スワイプ・フリックでページをめくる機能など様々なプラグインを紹介。wp-customize.netそもそも、絵本サイトを作るにあたりワードプレスを選んだ理由が、パラパラ本をめくるプラグインが存在したからなんですよね。最初は良かったんですが、テーマを今使っているCocoonに変えたところ、それまで使用していたプラグインが使えなくなってしまったんです。Cocoonは高速化などの対策があらかじめ取られた至れり尽くせりなテーマなんですが、そのせいかプラグインとの相性が悪かった。他のプラグインを色々試したのですが、どれも絵本というより電子書籍向けで、薄い紙をぺらっとめくるような感じなんですよね。それで、あれこれ探してたどり着いたのがBookBlockだったんです。ワードプレスでも使えるが、Cocoonの場合は少々手間がかかるワードプレス内でBookBlockを使う方法も、先ほどご紹介した記事の中に載っています。Point本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。www.start-point.net私はテーマとの相性以前にワードプレスでBookBlockを使う方法がどうしても分からず、これまでワードプレスの外にhtmlファイルを作っていました。今回、↑の記事を書いてくださった方のおかげで、ワードプレスの中で無事に動かすことができました。Cocoon以外のテーマでは。Cocoonは高機能ゆえ、何かが競合しているもよう。テキストエディタに全部入れるとこうなっちゃいます。↓これは画像ですが、このように真っ白になってしまってページも動きません。結論を書くと、CocoonでBookBlockを使う場合は、スクリプトやらをカスタムフィールドで「head_custom」と「footer_custom」に入れればきちんと動く、ということが分かりました。;∀;)/正解は「カスタムフィールドでhead_customとfooter_custom」を使う、でした。ロリポだとWAF無効にしないとカスタムフィールド追加できない。2020カスタムフィールドが投稿画面にもし表示されていなかったら、Gutenbergなら、右上の「...(←これの縦向き)」アイコン→「オプション」クラシックエディタなら、右上の「表示オプション」より、「□カスタムフィールド」にチェックを入れてください。カスタムフィールドに「head_custom」と「footer_custom」を新規追加し、<head>内に書くべきものを「head_custom」へ</body>の直前に読み込ませるものとjQueryを「footer_custom」へあとは、html部分を投稿エディタのカスタムhtml/テキストエディタに入れれば、正しく表示されるはずです。_)mなお、「head_custom」、「footer_custom」は、Simplicity、Simplicity2、Cocoonでは備わっている機能である、と。(ほかは分からないです)【ワテ解説】WordPressのページに自作のJavaScriptプログラムを埋め込む方法WordPressで記事を書いていて、そのページにJavaScriptやjQueryのプログラムを埋め込みたい場合がある。何らかの自作サンプルプログラムを掲載してその解説記事を書く場合に、実際にそのプログラムを実行する機能をそのペーwww.wareko.jp↑こちらの記事を参考にさせていただきました。Loadをオンにしていると、ページをめくったときに一瞬白いページとaltタグにいれた言葉が表示されてしまいます。Loadの利用は諦めました。Loadが標準装備になるという噂なのでちょっと心配。Cocoonで使うために試したことCocoonで使えるようになるまでに、色々と試しました。まっさらな状態で動くかどうか。私の場合、あれこれカスタマイズを加えているので、一切何も手を加えていない状態でも動かないか確認しました。ローカル環境にCocoonを入れてみて、何もいじらずにBookBlockを設置してみる。WordPressのローカル環境を作りバックアップサイトとして活用しよう!ワードプレスのバックアップにBackWPupプラグインを使用していますが、復元できる自信がないので、ローカル環境にバックアップ用サイトを構築しました。www.akaeho.net2019.01.06動かず。src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js...”></script>↑これを削除してみる。↓こちらの記事に書いてあることもダメもとで全部試す。[WordPress]Cocoonでプラグインが動かないときに試すこと初心者向け。Wordpress+CocoonでQwizcardを動かすためにしたこと。Java系のプラグインでは共通する点もあるかもしれません。research-labo.comやはり動かず。フォーム部分には以下のように記載頂いております。「当ページ変更用のjavaScri...wp-cocoon.comこの中で、Cocoonの作者であるわいひらさんが、スクリプトやCSSで特定のファイルを読み込ませる場合は、カスタムフィールドのhead_customを利用した方が良いかと思います。特定固定ページでのみで使用するjsの記載方法についてと回答されていたのを見て、試してみたらできた、という流れです。私はウェブに詳しい人間ではありません。(最後に)最後に、この記事を書いた経緯を少し。無事にCocoon内でBookBlockが動いて、何気ないツイートをしました。できた・・と思う・・・🙃ワードプレス内で絵本をパラパラ、と。2020テストページのURLをつけて、ふーっ、って気持ちで呟いちゃったんです。したら、ブロガー界の凄い方々が反応してくださって。2020最初に引用RTしてくれたぽんひろさん。ひろ.comWebデザイナーが個人で運営するブログ。Web制作、デザイン、WordPressカスタマイズ(Cocoon)、ブログ運営、アフィリエイトに関することを中心に紹介をしていきます!ponhiro.comここからあれよあれよと、私が凄い人みたいな扱いで広まってしまって。(-_-;)肩書を申し上げますと、ただの専業主婦です。絵本サイトを作りたいという執念で、その場その場で必要な情報を集めて付け焼き刃的にこれまでやってきました。カスタマイズ記事も書いていますが、ウェブの勉強をしてきた人間ではありません。;∀;)繰り返しになりますが、BookBlockは既存のjQueryプラグインです。Point本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。www.start-point.net最後までお読みいただき、ありがとうございました。―ちびこママ海外での子育てを経験し、絵本の必要性を感じてウェブ絵本作りを始めました。絵本を無料公開しています。目次BookBlockについてと、このプラグインを使い始めた経緯ワードプレスでも使えるが、Cocoonの場合は少々手間がかかるCocoonで使うために試したことなお私はウェブに詳しい人間ではありません。―ちびこママ海外での子育てを経験し、絵本の必要性を感じてウェブ絵本作りを始めました。絵本を無料公開しています。目次BookBlockについてと、このプラグインを使い始めた経緯ワードプレスでも使えるが、Cocoonの場合は少々手間がかかるCocoonで使うために試したことなお私はウェブに詳しい人間ではありません。PinterestタイトルとURLをコピーしました。