WEB漫画をwordpressで掲載のための埋め込み・プラグイン情報

2014年1月2日2021年5月8日

私がwordpressで同人サイト作った理由は
「画像のアップロードが簡単」
「ブログだけどサイトっぽくできる」
「スマホ・タブレットに対応サイトに簡単にできる」

↑だからです。

ただ、更新するにつれて、ダッシュボードにある「メディア」での画像管理がなんかすっごくめんどうになってきました。
wordpressだと記事ごとに画像を結び付けて管理しているんです。
でも私は記事１枚に対し、漫画を何枚も呼び出すような形をとりたいのです。
そしてできれば漫画用の画像は「何月何日にアップロードしたか」ではなく「漫画フォルダ」で一括にまとめておきたい。
できればページジャンプ機能とシオリ機能もあるのがいいけれど、贅沢はいわないので「次の画像へ戻る・進む」ボタンくらいあればいいな。
あ、画像タップで次へ進むも欲しいな。
欲張ればきりがないですが、とにかく言いたいのは、現在のメディア管理は絵をたくさん投下する私にとっては苦行なんだな、これが。

というわけで、更新でできるだけ楽したい私が、wordpressでのWEB漫画コンテンツ作成にチャレンジするページです。
なんか進展あったら更新上げします。（現在「シオリ機能」「ページジャンプ機能」のついたプラグインは見つかってません。それでもよろしければ）

2013/01/02･･･とりあえずipad7インチで閲覧できそうなサイズで、javascriptをつかって作った。
2013/01/16･･･自分のサイトでepub形式を置いて公開する方法はないだろうかとひらめくが、方法がわからない。転載対策なども含め考え中。
2013/01/25････wordpressの「マルチサイト機能」で作品ごとにwordpressブログを切り分けるのがよさそうだと気づく。今現在挑戦中。
2014/04/07･･･まろやかcgiさんのツール設置してみた。
2014/05/16･･･iflameについての関連記事リンクした。
2014/06/03･･･ワードプレスプラグインでよさそうなものを見つける。実験中。それに伴い記事のタイトル変更し、大規模に記事追加・改編しました

画像をJavascriptで埋め込みする

Frashではなく、Javascriptで作る理由は
iPhone, iPad, Androidというスマホ、タブレットがfrash対応してないから。そんだけです。

参考記事：ジョブズCEO、iPhoneでのFlash非対応について説明 – ITmedia エンタープライズ.

というわけで、Jabascriptで、私でも簡単にいじれて、ちょうどいいものを練習用にお借りしました。

・
・
　

その１・サンプル集を拝借する

JavaScript入門＆サンプル集 | JavaScriptの入門とサンプルプログラム集より、JavaScriptでスライドショー（手動再生）を設置するを参考にしました。

イメージはこんな感じになりました。
解説通りに画像とスクリプトをアップロードしたあと、wordpressの新規記事に、解説ページにあった＜ｉｆｌａｍｅ＞のタグ部分を入れて更新しただけです。iflameは表示サイズびっちり固定なので各端末サイズに合わせようとするにはちょっと難しいかな。（追記：20140603：iflameについて色々wordpressでできないものかとその後試してみたのですが、やはりアイフォン・アンドロイドでの表示は崩れるため、レスポンシブという点ではお勧めはできないようです）

（「進む」「戻る」等の全角文字が文字化けするので、全部半角に修正しました）


ipad（大き目タブレット端末用）動作サンプルはこちら（別窓開き）

最後の画像まで行くと、Img00.jpgに戻ります。しおり機能なしの簡易なスライドショーです。
スクリプト呼び出し時に画像を一気に読み込むので、動作が重くなることを考慮しておきたいところ。
画像の重さと相談して、ページを調整しないといけませんが、簡単に使えるのがいいところです。

◆あわせて読みたい関連記事◆

HTML5のSEO－マークアップで注意すべき３つのポイント | HTML5Experts.jp･･･iflameについて、ＳＥＯ的にどうなの？ということに触れてます

HTML5/埋め込み/iframe要素 インラインフレームを作る – TAG index Webサイト

iframeで読み込むページの高さを取得して、heigthに代入する方法 – Eiji.

　
　

その２　javascriptで埋め込み可能なCGIを拝借する

（2014/04/07追加）
（2016/11/30　現在提供修了状態のため、記事を削除します）
まろやかPHP（旧まろやかCGI）さんのCGIを設置してみました。
cgiをjavascriptで埋め込みできて、アップロードも簡単なフリーcgiです。一番最新のアップロード画像が先頭に来るみたいです。
呼び出し時出力する画像数は「増やしすぎると重くなるかも」とのこと。やはり一気に画像を読み込むようです。
1コマ漫画とか、トップページを簡単に更新するためにおくとか、ブログパーツとかで活躍できそうだなーと思いました。

*************************
◆外部から呼び出す方法を使うメリット◆
wordpressのプラグインを使ってもいいんですが、wordpressは頻繁にバージョンアップしているため、ものによっては最新版wordpressで非対応になり、動作しなくなってしまう場合もあります。自前で用意してるもので動かしてるなら、そういったリスクを回避できます。
しかしそれを踏まえても、プラグインでやってみたい！というかたは以下へどうぞ。
*************************

・
・
　

wordpress　プラグインを利用する

その１　Slideshow

中編・小編むき。
直感的に一番良かったのがこのワードプレスプラグイン「Slideshow」で、操作がわかりやすく、ｃｓｓ知識があるのであればいまどきっぽいデザインにぐりぐり変えられます。
使い方は
カルーセルも！マルチなスライドショー/WPプラグイン「Slideshow」 | 楽々WordPressプラグイン.
に、のってます。ただ、使うテンプレートによってはプラグインが上手く動かない可能性あり。
PC・アンドロイドスマホ・タブレット端末で動作は確認済。閲覧者のペースでクリックしてもらうように、自動で画像が変わるオプションはきったほうがいいかも。

　
　

その１　NextGEN Gallery

中編・長編向き。
画像ファイルを専用フォルダにアップロードし、メディア一覧に出ないようにしてくれる。画像一括アップロードも可能なので画像をたくさん管理する人ならこっちのほうがいいと思う。使い方は「Slideshow」より難易度上がりますが、

NextGEN Galleryプラグインの使い方 – AdminWeb.

↑こちらで丁寧に解説されていますので参考にしながら設置しました。
いろんな形式で画像を表示できるので、イラストアルバム・漫画アルバムと分けることもできるし、漫画の続きを更新する時に、いまあるギャラリーに追加することもできるというすぐれものです。

*************************
◆プラグインを使うメリット◆
画像をレスポンシブにできる。これが一番魅力的。それと「おしゃれ」「今時」「スタイリッシュ」にしたいならプラグインのほうが断然キレイです。
*************************

　
・
・
・
　

いまのところこんなんです。
（後日、管理人がwordpressで漫画サイトを立ち上げるためにやったことはこちらで紹介してます）
（更に年数を経て、簡単なタグだけでページ切り替えする方法をようやく発見しました。プラグイン無くてもできた方法の紹介はこちら）
　

昨今のライトユーザー層はゲームだってサイト閲覧だって通販だってスマホ、タブレット端末で済ましてます。インターネット楽しむだけならわざわざパソコン買う必要がない時代、WEB漫画をサイトで公開するのは古いかな？
いえいえ、まだまだいけるっしょ！携帯端末ユーザーが見やすい環境作ってみて反応試してみようぜ。

おまけ。端末別推奨画像サイズ　参考記事

Androidアプリーリソース画像サイズ＆種類ー : Excite Designer’s Blog

iPhone, iPad, iPod touchの画面サイズまとめ | noriaki blog.