How To Make Web Site

How to display manga on WordPress site. Can do without plug-in. How to use "Gallery"

How do I display manga on my blog or website?

This article summarizes how to display manga readable on WordPress site.

There is no plugin that can be used for manga display?

I have considered various ways to display my manga on this site.

Since I do not have the knowledge of HTML, I tried a lot of plugins.

I tried a lot of slideshow plugins and lightbox plugins, but I could not find an appropriate one.

To make manga easier to read, the following two points are important.

  1. The traveling direction of the slide is right or down.
  2. Slide does not loop

As Japanese manga usually read from the right to the left, '1' is important. However, most of the plug-ins are in the right direction.

"Slide loops" means that you can tap the "<"(previous page) button even though it is the first page. In this state, if you tap the "<" button on the first page, it will jump to the final page. '2' is important because I want to avoid this.

I could not find a plugin that simultaneously satisfies these two conditions. I gave up using the plugin to display manga. After all, I decided to display without using the plug-in as follows.

"Gallery" is enough

I decided to use "Gallery" which is the function of WordPress.

The link to my manga displayed using the gallery is as follows ↓

Web comic "Engineer!" # 001 (Japanese)

In this way, since it becomes vertical scroll display, I think that it is easy to see with a smartphone or tablet. It is a bit hard to see on a PC, but it is not impossible to read.

After all, I think this is a simple and good way.

I was aiming to be able to read like Kindle, but I noticed that there is no need to do so. Because, if you want to do it, you can sell it as an e-book on Amazon (KDP).

The following is the setting method of "Gallery".

How to use "Gallery"

First, open the page for which you want to display the gallery.

To create a new page, click "Add new" on "Pages"

I think that "post" is fine, but in my case I made it "page".

Create gallery

Click "Add Media" button.


Click the "Create Gallery" button at the top left.

create gallery

If you have already uploaded a manga image, click the "Media Library" tab and select one episode page.

If you have not uploaded it, click the "Upload File" tab and upload one episode of images.

After selecting the image, click "Create gallery" in the lower right.

create a new gallery

Then you will see "Edit Gallery" screen as below.

Usually, the page order of manga is wrong, so drag and drop it and correct the order of the images.

edit gallery

Gallery Settings

"Gallery Setting" is as follows.

gallery settings

  • Link To: None
  • Columns: 1
  • Do not check 'Random Order'
  • Size: Full size

"Link To" is to be selected from the following three, but choose "None" as above.

  • Media File
  • Attachment Page
  • None

When you select "Media File", when you click on the manga page image, it jumps to the web page where only the clicked image is displayed.

When "Attachment Page" is selected, it jumps to the page which explains in detail the clicked image.

If set to "None", if the image is clicked, nothing happens. I think this is easier to read.

Insert Gallery

After that, it is completed by clicking the "Insert Gallery" button at the bottom right.

insert gallery

Setting for web manga

Create a link of "previous episode" and "next episode"

After posting the second episode and so on, at the bottom of the page,

make a link of "<previous episode" and "return to all episodes", "next episode>".

If the link interval is too large, there is a possibility that line breaks will occur when displaying on a small screen. I made it slightly spaced and centered.

In order to make it easy to tap on the smartphone, I used the large letters of the link.

It is as follows.


Adjust image size

If you do not adjust the aspect ratio of the manga image, it will be difficult to read.

In other words, if the image is too long vertically, one page of manga will not fit on screen.

In the case of "AFFINGER 4" used by me, I think that it is displayed with sufficient margin with width: length = 3: 4.

However, depending on the theme of the site, the proper aspect ratio will be different.

Install right-click prohibit plugin

Images uploaded to the site can be copied by right clicking.

In order to prevent a manga from being copied, use a plugin that prohibits right clicking.

It is "WP-Copyright-Protection". For more details see another page ↓


Check the completed page

Please refer to my manga page displayed using "Gallery" for reference ↓

Web comic "Engineer!" # 001 (Japanese)

-How To Make Web Site

Copyright© OSHIBUYA , 2020 All Rights Reserved.