WordPressで自作の漫画や同人誌を公開する方法

漫画用WordPressプラグインは存在するのか？

最近ふと、昔描いた漫画をブログで公開してみたいなと考えるようになりました。

実際に探してみた結果

「どうせWordPressなら、漫画公開に便利なプラグインくらいあるんでしょ？」と軽い気持ちで検索してみたのですが……意外なことに、これだ！と思えるものがまったく見つかりません。

コミック用のプラグイン自体はいくつか存在するにはするのですが、

  • 長い間更新が止まっている（海外の方制作）
  • 実際に使ってみるとうまく動かない
  • そもそも日本の漫画・同人誌とは仕様が異なる可能性？（ページ送りとか

といったものばかりで、どうにも実用的とは言い難い状況でした。
あまりの惨状に「そもそもブログで漫画公開するような発想自体がアレなのか？」と漠然とした不安が…

デザインブロックを試す

気を取り直しつつアプローチを変え、WordPress標準のデザインブロックを試すことに。
画像ギャラリーやスライドショーなど色々触ってみたのですが、これもまたどこか使い勝手が悪く、当初イメージしていた Kindle や Kobo のようなWebビューワー的な操作感や見栄えには程遠く、なかなか近づきません。

今回の解決方法

そうなると選択肢は二つです。

  • 自分でビューワーを作る
  • どこかで妥協する

……結局、今回は後者を選びました。

Smart Slider 3を使う

とはいえ実際に設置してみると、思っていたほど悪くはありません。
性質上単ページでのページ送りとなり見開きなどの表示はできませんが、操作性もよく左右のページ送りも可能で「これなら十分アリでは？」と思える仕上がりにはなりました。

前置きが長くなりましたが、今回は 有名な画像スライダープラグイン「Smart Slider 3」 を使い、最低限漫画として読めるように設置する方法についてまとめてみました。
設定のポイントや導入手順などを、実際の構成をもとに紹介していきたいと思います。

サンプル

操作感など、是非お試しくださいませ。

漫画ビューワーに必要なプラグイン

スライダーとデータ管理2つのプラグインを使います。

Smart Slider 3

Smart Slider 3 は、主に WordPressサイトで使われるスライダー作成プラグインです。画像・動画・テキストなどを組み合わせて、トップページのスライドショーやバナーを簡単に作ることができます。

Smart Slider 3

無料版とPro版

  • 無料版
    基本的なスライダー作成が可能。
  • Pro版
    より高度なアニメーション、動的コンテンツ、追加テンプレートなどが利用可能。

とても高機能なのですが漫画ビューワとして使う分には無料版で問題ありません。
制作者様に感謝。

FileBird

また、漫画データの管理を効率よく行うために 「FileBird」 というプラグインもインストールしておきます。

FileBirdは、WordPressのメディアライブラリをメタ情報で管理し、パソコンのフォルダのようにファイルを整理できるのが特徴のプラグインです。これを使うことで、画像などのファイルをフォルダごとに分けて管理できるようになり、大量のデータでも探しやすくなります。

Smart Slider 3のインストール

WordPressの「プラグイン」→「新規追加」から 「Smart Slider 3」 と検索します。
検索結果に表示されたプラグインを インストール し、その後 有効化 します。

FileBirdのインストール

WordPressの「プラグイン」→「新規追加」から 「FileBird」 と検索し、表示されたプラグインを インストール して 有効化 します。

漫画データの準備

準備が整ったら、まずは掲載する 漫画データ を用意します。

画像の大きさとフォーマット

漫画というメディアの性質上、1ページに複数の画像を保持する為、どうしても データ容量が大きくなりがち です。
そのため、画像フォーマットは JPEG や WebP など圧縮率の高い形式 を使用し、あらかじめデータ容量を抑えておくことをおすすめします。

ただし、サーバー容量に余裕があり、EWWW Image Optimizer などの画像圧縮プラグインで最適化を行っている場合は、PNG形式を使用しても問題ないでしょう。（たぶん…）

画像サイズ（解像度）

画像の解像度は、一般的な画面解像度である HD（1280×720）や FHD（1920×1080） を参考に、
縦 720～1000 ピクセル前後 を目安に調整すると扱いやすいでしょう。

実際の表示サイズは、閲覧する 端末の画面サイズ や ブログのテーマ設定 によって自動的に拡大・縮小されることがあります。
そのため、最終的には 自分の環境で表示を確認しながら調整する のがおすすめです。

ファイル名の付け方

ファイル名は 半角英数字（小文字推奨）とハイフン（-）のみ を使用し、内容が分かる名前にしておきましょう。

また、ページ順が分かるように 連番で管理 しておくと、後から整理するときに便利です。

例：

comic-title-001.jpg
comic-title-002.jpg
comic-title-003.jpg

このように 作品タイトル + ページ番号 の形式でファイル名を付けておくと、管理やアップロードがスムーズになります。

メディアライブラリにフォルダを作成

作成した漫画データを WordPress にアップロードする前に、ここで先ほどインストールした FileBird を使ってフォルダを作成しておきます。

FileBirdでフォルダを作成

FileBirdを使用すると、メディアライブラリ内のファイルをパソコンのフォルダのように整理できるため、漫画ページの画像も作品ごとにまとめて管理することができます。あらかじめフォルダを作っておくことで、後から画像を探したり整理したりする作業がスムーズになります。

漫画データの整理方法

メディアライブラリの上部にある 「新規フォルダー」ボタン をクリックして、フォルダを作成していきます。
FileBirdではフォルダの 階層（サブフォルダ） も作成できますが、自分が管理しやすい構成であれば自由に設定して問題ありません。

漫画データを管理する場合は、1作品ごとにタイトル名のフォルダを1つ作成する方法が分かりやすくおすすめです。こうしておくことで、ページ画像を作品単位で整理でき、後から探すときにもスムーズになります。


フォルダを作成したらひとまずストップ、データは後ほどアップロードします。

Smart Slider 3の設定

WordPressのダッシュボード左側メニューから 「Smart Slider」 を選択し、Smart Sliderのダッシュボード を開きます。

スライドを作成する

「新規プロジェクト」 を選択し、続いて 「自分で新規プロジェクトを作成」 をクリックします。

  • Project Type：スライダー
  • Slider Type：シンプル
  • 名前：任意の名前
  • 幅：700
  • 高さ：830
  • レイアウト：Boxed

設定が完了したら、スライダーを作成します。

スライドに漫画を追加する

スライダーを作成したら、次に漫画の画像データをスライドとして追加していきます。

まず 「スライドを追加」 → 「画像を追加」 → 「ファイルをアップロード」 を選択します。

ここで フォルダー選択 から、先ほどFileBirdで作成したフォルダを選び、漫画の画像データをすべてアップロードします。

アップロードが完了すると、追加したファイルには すべてチェックが入った状態 になっているはずです。
そのまま 右下の「選択」ボタン をクリックします。

するとスライドが作成され、Smart Sliderのダッシュボードに戻ると漫画が一覧で並んでいる状態 になります。

スライダーの基本設定

次に、画面下部のメニューに移り、スライダーの表示設定を行います。

一般設定

画面下部の設定メニューで、以下の項目を確認・設定します。

  • 名前：スライダー名に作品タイトルが入っているか確認します。
  • サムネイル：必要に応じて 表紙画像 を設定しておきます。（必須ではありません）
  • ARIA Label：特に設定する必要はありません。
  • 別名（Alias）：特に設定する必要はありません。
  • Slider Design の設定は以下のようにします。
  • 整列：中央
  • マージン：0

この設定で問題ありませんが、基本的には デフォルト（通常）のままでも大きな問題はありません。

サイズ設定

  • スライダーのサイズ
    最終的に設置する ページのカラム幅 に依存するため、厳密なピクセル数よりも 縦横の比率 を意識して調整するのがおすすめです。また画像ではなくUIの配置なども含めたスライダーのサイズを基準にした比率なので、何度か実際に試して程よいサイズを見つけてみてください。
    参考までに、私は 700 × 830 のサイズで調整しています。横サイズは 800～900px 前後 を目安に微調整しながら配置してみると、バランスよく表示できるはず。
  • スライドの制限幅：OFF
  • Global breakpoints：ON（縦向き。モバイルデバイス向けの設定と思われますが、機能の詳細は未確認です）
  • レイアウト：Boxed
  • Downscale：ON
  • Upscale：ON
  • MinHeight：0

これらの設定により、画面サイズに応じてスライダーが自動的に拡大・縮小され、さまざまなデバイスでも表示が崩れにくくなるはず…？

操作設定

  • Drag：水平方向
  • Mouse Wheel：無効
  • キーボード：ON
  • 矢印：ON

矢印の色やスタイルなどは好みの感じに調整してください。

・ページコントロール：OFF

表示デザインの設定

ここも色々触ってみて好みの表示にしてください。

Text Bar設定

  • Text Bar：ON
  • バーの形状：好みに応じて設定
  • Position：Outer 下
  • Animate：OFF
  • バースタイル：好みに応じて設定

表示項目の設定：

  • タイトル：ON（フォントは好みで調整）
  • 説明：ON（フォントは好みで調整）
  • SlideCount：OFF
  • 全幅：ON
  • 区切り：-
  • 整列：中央

その他の表示設定：

  • ホバー時の表示：OFF
  • サムネイル：OFF
  • 影：OFF

アニメーション設定

スライドの切り替えアニメーションを設定します。

  • Main animation：水平方向
  • Duration：800 前後（このくらいの速度が見やすくおすすめです）
  • Background animation：無効

この設定にすることで、スライドが左右にスムーズに切り替わるシンプルな表示になります。

自動再生設定

自動再生：OFF

最適化設定

続いて、スライダーの読み込みや表示に関する設定を行います。

  • Loading type：Instant
  • 表示時に再生する：ON
  • At：50％
  • Slide background images Resize：OFF
  • Resize Thumbnail：OFF

この設定にすることで、ページ読み込み時にスライダーがすぐ表示され、安定した表示動作になります。

スライド画像の表示設定

Slide background image fill 設定

  • Slide background image fill：Fit

この設定は とても重要 です。
「Fit」に設定することで、スライド内の画像が 縦横比を保ったまま表示 されるため、漫画画像がトリミングされたり引き伸ばされたりするのを防ぐことができます。

その他の設定

開発者

デフォルトのままです。

保存

ここまで設定を行ったら上メニューにある保存ボタンを一度押しておきます。

ページ送りの設定

スライドの並び替え

画像を取り込んだ時点では、スライドは 左上から順にページが並んでいる状態 になっていると思います。
しかし、実際の表示で どの方向にページ送りをするか によって、スライドの並び替えが必要になります。

私の場合は 左から右へスライドさせる設定 にしているため、
漫画の最終ページが左上、表紙（1ページ目）が右下 にくるように、ドラッグ＆ドロップで順番を入れ替えています。

残念ながら 自動ソート機能は用意されていないようなので、この作業は手動でコツコツ並べ替えていく必要があります。

最初のページの設定

上記のように入れ替えが済んだら　表紙（1ページ目）画像を右クリックして★最初として設定にチェックをいれます。

スライドタイトルと説明の設定

スライド画像の編集

スライド画像の編集ボタン をクリックして、編集モード に切り替えます。
編集画面が開いたら、スライドウィンドウ内の コンテンツを表示 させます。

スライドタイトル
最初に表示されているファイル名などの文字は削除し、現在のページ番号 のみを入力します。

例：
comic-title-016 → 016

説明
ここには 漫画の総ページ数（最終ページ） を入力します。

たとえば 18ページの漫画 の場合は
018

というように、すべてのスライドに同じ値 を入力します。
入力が終わったら右上の保存ボタンを押して完了です、少々面倒くさいですが全てのページを編集してください。

この設定を行うことで、ビューワー画面の下部に現在のページ数が表示されるようになります。

ノンブルと表示ページのズレ

ただし、実際に頒布した本から一部のページを削除して掲載する場合など、ノンブル（ページ番号）と表示ページがずれてしまうケースもあります。

そのような場合は、ページ番号以外の情報をテキストとして割り当てても構いませんし、必要に応じて 設定で表示を非表示にする こともできます。

プレビューで確認する

設定内容を確認したい場合は、「Back」ボタンの左隣にある目のアイコン をクリックすると、スライダーの プレビュー表示 を確認することができます。

問題なければ保存ボタンを押しておきます。

WordPress記事に漫画を表示する方法

下メニューの一般設定に戻ります

公開画面には ショートコード が表示されているので、このコードをコピーしておきます。
そして、公開したい記事やページにそのショートコードを貼り付けることで、設定したスライダーを表示することができます。

以上で設定は完了です。
お疲れ様でした。

まとめ

今回は Smart Slider 3 を使って、WordPress上で漫画を公開する方法を紹介しました。

本来であれば専用の漫画ビューワープラグインがあれば一番楽なのですが、現状ではなかなか実用的なものが見つからず、少し回り道のような形になってしまいました。

とはいえ、画像スライダーをうまく利用することで、ページ送りもできる簡易的な漫画ビューワーとしては十分実用的に使えると思います。実際に使ってみると、思っていたよりも違和感なく読むことができるはずです。

多少の設定や手間はありますが、WordPress上で漫画を公開したい場合の一つの方法として、参考になれば幸いです。

WordPressFileBird,Smart Slider 3,WordPress,同人誌,漫画プラグイン,漫画公開

Posted by まるサン