viewerプログラム』を作成したのでご紹介します。WordPressのブログにも使われている記事の切り替えを使って画像を順番に切り替えます。これでマンガの閲覧から画像を使ったプレゼンテーションまで様々な画像切り替えとして応用できます。サンプルではBootstrapを使ってPCとタブレットでは2ページごと・スマートフォンでは1ページごとに表示させるようにしています。プログラムにPHPを使用しています。基本設定PC・タブレットでの表示スマートフォンでの表示CSSでの調整PHPのページング(ページネーション)を使うだけで簡単にコミック閲覧ができます基本設定まずPHPファイルとCSSファイルと画像を格納するフォルダを用意します。画像が入るフォルダ(見本ではcomics)に画像を入れます。ファイル名は表示させたい順番に番号を振っておきます。サンプルでは10枚の画像を入れてます。画像数は後で使うので覚えておきましょう。サンプルプログラムを順番に説明します。1;}?>まず、3行目の「$totalPage」にフォルダに入れてある画像の数を記入します。サンプルの画像は10枚なのでここでは「10」と入れます。IF文には規定されたページに飛ばないように1ページ目に飛ばせる処理を加えています。PC・タブレットでの表示まず、PC・タブレットでは2枚の画像を表示させる処理を行います。‘.jpg」と記述します。48行目以下にページを送るリンクを表示します。2」と書くことで最初の画像を奇数ごとに表示するようにしています。サンプルでは右送りですので表記を逆にすれば左送りにすることも可能です。スマートフォンでの表示スマートフォンでは1枚ごとに表示しますので67行目に書く画像表示は1つだけです。1」と1枚ずつでの処理です。CSSでの調整CSSではスマホ表示で画像が画面いっぱいに表示されるように設定しています。Bootstrap特有のPaddingが適用されないように処理を施しています。他は主に画像送りボタンの表示を設定しています。サンプルでは記号を使っていますが、画像でもアイコンでも自由に置き換えることが可能です。こちらは好みの表示になるように調整してみてください。Viewerで検索してもなかなか良いプログラムがありませんでした。あってもスクリプトを使ったものだったりしてあまり良いものでは無かったです。今回PHPのページング機能に画像表示を上乗せする形で簡単なコミック閲覧プログラムを作成しました。これで画像を閲覧するごとに「ページが変わる」ので、ページごとにRSSで更新をお知らせしたり、ソーシャルボタンやコメント欄を設置することもできます。【VPN導入のススメ】2018.06.192019.12.30Advertisement人気記事スマホ版Chromeのおすすめ記事を非表示にする方法【2019年ver.78以降】2017.08.102019.09.18Pixivだけじゃない。【VPN導入のススメ】2018.06.192019.12.30Advertisement人気記事スマホ版Chromeのおすすめ記事を非表示にする方法【2019年ver.78以降】2017.08.102019.09.18Pixivだけじゃない。【PHPプラグインやめました】WordpressのショートコードでPHPファイルを読み込み表示させる方法2018.04.032019.12.30PHPページング表示を利用したコミック閲覧ページの作り方2017.09.01。