manga-site

サイトの作り方

ワードプレスのサイトにマンガを表示する方法。プラグインは不要!「ギャラリー」の使い方

投稿日:

自分のブログやホームページにマンガを表示させるにはどうしたらいいのか?

ワードプレスで、マンガを読みやすく表示させる方法についてまとめました。

Sponsored Links

マンガ表示に使えるプラグインがない?!

私自身、このサイトにマンガを載せるために、色々な方法を探しました。

HTML等の知識がないので、プラグインに頼ろうと、いろいろと探し、試してみました。

スライドショー系や、ライトボックス系のプラグインを、沢山試しましたが、なかなか良いのが見つからない!

マンガを読みやすくする上で、重要なのが以下の点でした。

  1. 左か下方向に進むスライドである
  2. スライドがループしない

マンガは通常、右から左に読むものなので、1が重要です。でも大半のスライドショーは右に進むものばかりなんです!

2の「スライドがループ」というのは、最初のページで「<」(前のページに戻る)ボタンをタップできる状態です。最初のページで、「<」ボタンをタップすると、「ループ」して、一気に最終ページに飛んでしまいます。これだとまずいので2が重要です。

この2つを同時に満たすプラグインはみつからなかったので、結局あきらめ、以下の通り、別の方法に決めました。

「ギャラリー」で十分じゃん!

結局、ワードプレスのデフォルト機能である「ギャラリー」で表示することにしました。

やってみると、結局これが一番いいような気がしてきました。

というわけで、完成したページをご覧ください↓

webマンガ「エンジニア!」#001

これなら、縦スクロール表示なので、スマホ・タブレットなら読みやすい。PCだと見にくいですが、少し工夫すれば読めなくもない。

結局、これがシンプルでいいと思います。

KindleとかKoboみたいに、電子書籍っぽく読めることを目指していましたが、それなら電子書籍にして販売すればいいわけです。

以下は、作り方の解説です。

「ギャラリー」の使い方

まずはギャラリーを表示したいページを開きます。

新しくページを作る場合は、「固定ページ」の「新規追加」をクリックします。

「投稿」でもいいと思いますが、私の場合は「固定ページ」にしました。

ギャラリーの作成

「メディアを追加」ボタンをクリック。

「メディアを追加」ボタン

左上の「ギャラリーを作成」ボタンをクリック。

「ギャラリーを作成」ボタン

既にマンガの画像をアップしてあれば「メディアライブラリ」タブから、1話分のページを選択。

アップしていなければ、「ファイルをアップロード」タブから、1話分の画像をアップします。

画像を選択したら右下の「ギャラリーを作成」をクリックします。

「ギャラリーを作成」ボタン2

すると、以下のような「ギャラリーを編集」という画面になります。

たいてい、ページ順がバラバラになっていますので、ドラッグ&ドロップして画像を並び替えます。

ギャラリーの編集

ギャラリーの設定

「ギャラリーを編集」画面の右にある「ギャラリーの設定」は以下のようにします。

ギャラリーの設定

  • リンク先:なし
  • カラム:1
  • 「ランダム」はチェックしない
  • サイズ:フルサイズ

「リンク先」は次の3つから選ぶようになっていますが、上記のように「なし」を選びます。

  • メディアファイルのページ
  • 添付ファイルのページ
  • なし

「メディアファイルのページ」にすると、マンガのページ画像をクリックしたときに、クリックした画像だけが表示されたWebページに飛んでしまいます。

「添付ファイルのページ」も同様で、クリックした画像について説明するページに飛びます。

「なし」に設定すれば、クリックしても、画像のページには飛びません。このほうが読みやすいと思います。

ギャラリーの挿入

あとは、右下の「ギャラリーを挿入」ボタンをクリックして完了です。

「ギャラリーを挿入」ボタン

Webマンガとして必要な、その他の設定

「前の話」「次の話」ボタンの作成

2話目以降も投稿したら、ページの一番下に

「<前の話」と「全話一覧に戻る」、「次の話>」のリンクを張ります。

リンクの間隔をどうするかですが、空けすぎると、小さい画面で改行されてしまう恐れがあります。間隔は少なめにして、中央揃えにしました。

スマホなどでタップしやすいように、文字も大きくしました。

以下のような感じです。

前の話、全話一覧に戻る、次の話のリンク

 

画像サイズ調整

マンガ画像の縦横比を調整しないと、読みにくくなります。

つまり、画像が縦長すぎると、マンガの1ページが画面に収まらなくなります。

サイトのテーマにもよりますが、私の使っている「AFFINGER4」の場合は、横:縦=3:4で十分余裕をもって表示されていると思います。

右クリック禁止プラグインのインストール

サイトにアップした画像は、そのままだと、右クリックでコピーできていしまいます。

Webマンガサイトでそれをやられると困るので、右クリックを禁止するプラグインを利用します。

「WP-Copyright-Protection」というものです。くわしくは別のページを参照↓

 

完成ページを確認

完成したページを、参考にご覧ください↓

webマンガ「エンジニア!」#001

スポンサードリンク
スポンサードリンク

スポンサードリンク

-サイトの作り方

Copyright© OSHIBUYA , 2017 AllRights Reserved.