> JavaScript/jQuery > pixiv小説のように縦書き表示する方法-2019版
pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

本ブログでは過去にpixiv小説のように小説を表示する方法という一連の記事を書きましたが、利用するjQueryプラグインのバージョンアップなどに伴い、以前使用していた方法が利用できなくなりました。
そこで、更にブラッシュアップして2019年現在に利用できる方法を紹介します。

つらつら書いていますが、記事の最後にまとめとしてデモページで使用しているファイルを配布しています。

デモ

動いているサンプルはこちらからご覧できます。

DEMO

小説をpixivのように縦書き表示してみる

小説をpixivのように縦書き表示するCSSの設定は、下記の記事でも紹介した方法が利用できます。

I'll be Blog:pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

フォントサイズ・フォントスタイル・縦書き横書きを変更できるようにする

フォントサイズ・明朝体・ゴシック体、縦書き・横書きを切り替え、選択結果を一定期間保持できるようにするには、下記の記事でも紹介した方法が利用できます。

I'll be Blog:jQueryでフォントサイズを変更してjs.cookie.jsでクッキーに保存してみる
I'll be Blog:pixiv小説のように明朝体・ゴシック体を切り替えるjQuery
I'll be Blog:pixiv小説のように縦書き・横書きを切り替えるjQuery

縦書き表示時に左右へのページめくりを実装する

以前までは、jQuery.nicescrollを使用してマウスホイールでもページめくりが行える方法を紹介していましたが、jQuery.nicescrollのバージョンアップにより該当する箇所の変更だけでは実装できなくなりました。
そこで、今回はjQuery Mousewheelを利用した方法を紹介します。

jQuery Mousewheelを利用する

でもページのように、縦書き表示時に小説本文表示領域内でマウスホイールによるスクロールを実装するには、jQuery Mousewheelを利用します。

ダウンロード:jQuery Mousewheel| jQuery Plugin Registry

縦書き表示時にマウスホイールで横スクロールするjQuery

縦書き表示時にマウスホイールで横スクロールするjQueryは、DLした上記プラグインを読み込んだ上で、下記を参考にしてください。

$(document).ready(
//スクロールバー
    tategakiScroll();
);
//縦書き用スクロールバー
function tategakiScroll(){
    //スクロールスピード
    var speed = 30;
    //マウスホイールで横移動
    $('#honbun').mousewheel(function(event, mov) {
        //ie firefox
        $(this).scrollLeft($(this).scrollLeft() + mov * speed);
        //webkit
        $('body').scrollLeft($('body').scrollLeft() + mov * speed);
        return false;
    });
}

縦書き・横書きを切り替えてクッキーに保存できるようにしている場合は、選択状況によって縦書き・横書きのスクロールを切り替えることが必要です。
処理をまとめたjsは下記に紹介しておきます。

pixiv小説のように縦書き表示する方法まとめ

2019年時点でpixiv小説のように縦書き表示をするには、下記のようにします。

ダウンロード

デモページで使用しているファイルは下記よりDLしてください。

illbenet_pixiv_novel_2_0_1.zip

HTML例

headタグ内に下記のように記載してください。

    <link rel="stylesheet" href="./css/illbenet_novel.css" type="text/css" media="all" />
    <link rel="stylesheet" href="./css/illbenet_tategaki.css" type="text/css" id="novelTateyoko" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./jquery.mousewheel.js"></script>
    <script src="./js.cookie.js"></script>
    <script src="./jquery.illbenet_novel.js"></script>

縦書きまたは横書き用CSSをデフォルトとして読み込んでおいてください。

<ul id="switchTateyoko">
    <li id="btn_tategaki">縦書き</li>
    <li id="btn_yokogaki">横書き</li>
</ul>
<ul id="switchFont">
    <li id="btn_mincho" class="serif">aA</li>
    <li id="btn_gothic" class="gothic">aA</li>
</ul>
<ul id="switchFontSize">
    <li id="btn_small">小</li>
    <li id="btn_middle">中</li>
    <li id="btn_large">大</li>
</ul>
<div id="novel">
    <button id="honbun_next"><i title="次のページへ"><</i></button>
    <div id="honbun" class="serif middle">
        <p>小説本文はここに挿入してください。</p>
    </div>
    <button id="honbun_prev"><i title="前のページへ">></i></button>
</div>

小説本文はdiv#honbun内に挿入してください。
ul#switchTateyokoは縦書き・横書き切り替えボタンです。
ul#switchFontはフォント切り替えボタンです。
ul#switchFontSizeはフォントサイズ切り替えボタンです。

div#honbunにはデフォルトのフォント用クラスを指定しておいてください。
このサンプルでは、明朝体用のserifクラス中文字用のmiddleクラスをデフォルトとしてdiv#honbunにつけています。

jQuery例

  1. 上記DLファイルをダウンロードしてください。
  2. jquery.illbenet_novel.jsの9行目に縦書き用CSSのパスを、11行目に横書き用CSSのパスを設定して下さい。
// CSSのURLを定義
    var tatecssurl= './css/illbenet_tategaki.css';    // 縦書きCSS
    var yokocssurl= './css/illbenet_yokogaki.css';    // 横書きCSS
// jQuery
$(document).ready(
    function() {
    //縦書き横書き切り替え
        var w = $(window).width();
        var x = 480;
        if (w >= x) {
        // 画面読み込み時の縦横切り替えボタンのカレントクラス付与
            if (!Cookies.get('cookieTateyoko')) {
                // クッキー未登録時にlinkタグを診断してカレントクラスを付与
                if ($('#novelTateyoko').attr('href').match(/tategaki/)) {
                    $('#btn_tategaki').addClass('current');
                    tategakiScroll();
                } else {
                    $('#btn_yokogaki').addClass('current');
                }
            } else if (Cookies.get('cookieTateyoko') == 'tategaki') {
                // クッキー縦書き登録であれば縦書き表示にクラス付与
                    $('#btn_yokogaki').removeClass('current');
                    $('#btn_tategaki').addClass('current');
                // 縦書きCSSを読み込み設定
                    $("#novelTateyoko").attr("href" , tatecssurl);
                //スクロールバー
                    tategakiScroll();
            } else if (Cookies.get('cookieTateyoko') == 'yokogaki') {
                // クッキー横書き登録であれば横書き表示にクラス付与
                    $('#btn_tategaki').removeClass('current');
                    $('#btn_yokogaki').addClass('current');
                // 横書きCSSを読み込み設定
                    $("#novelTateyoko").attr("href" , yokocssurl);
            }
        } else {
            // 横書きCSSを読み込み設定
                $("#novelTateyoko").attr("href" , yokocssurl);
        }
    // 画面読み込み時のフォント切り替えボタンのカレントクラス付与
        if (!Cookies.get('cookieFont')) {
            // クッキー未登録時に小説ブロックを診断してカレントクラスを付与
            if ($('#honbun').attr('class').match(/serif/)) {
                $('#btn_mincho').addClass('current');
                $("#honbun").addClass('serif');
                $("#honbun").removeClass('gothic');
            } else {
                $('#btn_gothic').addClass('current');
                $("#honbun").removeClass('serif');
                $("#honbun").addClass('gothic');
            }
        } else if (Cookies.get('cookieFont') == 'serif') {
            // クッキー明朝登録であれば明朝ボタンにクラス付与
                $('#btn_mincho').addClass('current');
                $('#btn_gothic').removeClass('current');
            // 小説ブロックに明朝クラス付与
                $("#honbun").addClass('serif');
                $("#honbun").removeClass('gothic');
        } else if (Cookies.get('cookieFont') == 'gothic') {
            // クッキーゴシック登録であればゴシックボタンにクラス付与
                $('#btn_mincho').removeClass('current');
                $('#btn_gothic').addClass('current');
            // 小説ブロックにゴシッククラス付与
                $("#honbun").removeClass('serif');
                $("#honbun").addClass('gothic');
        }
    // 画面読み込み時のフォントサイズ切り替えボタンのカレントクラス付与
        if (!Cookies.get('cookieFontSize')) {
            // クッキー未登録時に小説ブロックを診断してカレントクラスを付与
            if ($('#honbun').attr('class').match(/large/)) {
                $('#btn_large').addClass('current');
                $("#honbun").addClass('large');
                $("#honbun").removeClass('middle');
                $("#honbun").removeClass('small');
            } else if ($('#honbun').attr('class').match(/middle/)) {
                $('#btn_middle').addClass('current');
                $("#honbun").removeClass('large');
                $("#honbun").addClass('middle');
                $("#honbun").removeClass('small');
            } else {
                $('#btn_large').addClass('current');
                $("#honbun").removeClass('large');
                $("#honbun").removeClass('middle');
                $("#honbun").addClass('small');
            }
        } else if (Cookies.get('cookieFontSize') == 'large') {
            // クッキー大文字登録であれば大文字ボタンにクラス付与
                $('#btn_large').addClass('current');
                $('#btn_middle').removeClass('current');
                $('#btn_small').removeClass('current');
            // 小説ブロックに大文字クラス付与
                $("#honbun").addClass('large');
                $("#honbun").removeClass('middle');
                $("#honbun").removeClass('small');
        } else if (Cookies.get('cookieFontSize') == 'middle') {
            // クッキー中文字登録であれば中文字ボタンにクラス付与
                $('#btn_large').removeClass('current');
                $('#btn_middle').addClass('current');
                $('#btn_small').removeClass('current');
            // 小説ブロックに中文字クラス付与
                $("#honbun").removeClass('large');
                $("#honbun").addClass('middle');
                $("#honbun").removeClass('small');
        } else {
            // クッキー小文字登録であれば小文字ボタンにクラス付与
                $('#btn_small').removeClass('current');
                $('#btn_middle').removeClass('current');
                $('#btn_small').addClass('current');
            // 小説ブロックに小文字クラス付与
                $("#honbun").removeClass('large');
                $("#honbun").removeClass('middle');
                $("#honbun").addClass('small');
        }
    // 左へのページ送りボタン
        $("#honbun_next").click(function(){
            var speed = 400; // ミリ秒
            var widthH = $("#honbun").width();
            var hereH = $("#honbun").scrollLeft();
            var position = hereH - widthH;
            $('#honbun').animate({scrollLeft:position}, speed, 'swing');
            return false;
        })
    // 右へのページ送りボタン
        $("#honbun_prev").click(function(){
            var speed = 400; // ミリ秒
            var widthH = $("#honbun").width();
            var hereH = $("#honbun").scrollLeft();
            var position = hereH + widthH;
            $('#honbun').animate({scrollLeft:position}, speed, 'swing');
            return false;
        })
    //本文表示時のスクロールボタン濃度
        var hereH = $("#honbun").scrollLeft();
        var widthHarea = document.getElementById("honbun").scrollWidth;
        var widthH = widthH = $("#honbun").width();
        if (hereH == 0) {
            //ブロックの先頭で右へページを送るボタンを一番薄くする
            $('#honbun_prev i').addClass('opacity03');
        } else if ((hereH - widthH) * -1 == widthHarea) {
            //ブロックの最後で左へページを送るボタンを一番薄くする
            $('#honbun_next i').addClass('opacity03');
        } else {
            //その他の場合はページ送りのボタンを通常通り表示する
            $('#honbun_next i').removeClass('opacity03');
            $('#honbun_prev i').removeClass('opacity03');
        }
    // 本文のブロック内でスクロールした時にページ送りボタンの濃さを変化させる
        $("#honbun").scroll(function () {
            var hereH = $("#honbun").scrollLeft();
            var widthHarea = document.getElementById("honbun").scrollWidth;
            var widthH = widthH = $("#honbun").width();
            if (hereH == 0) {
                //ブロックの先頭で右へページを送るボタンを一番薄くする
                $('#honbun_prev i').addClass('opacity03');
            } else if ((hereH - widthH) * -1 == widthHarea) {
                //ブロックの最後で左へページを送るボタンを一番薄くする
                $('#honbun_next i').addClass('opacity03');
            } else {
                //その他の場合はページ送りのボタンを通常通り表示する
                $('#honbun_next i').removeClass('opacity03');
                $('#honbun_prev i').removeClass('opacity03');
            }
            return false;
        });
    // 縦書き設定ボタン押下時にカレントクラスを付与
        $("#btn_tategaki").click(function () {
        // ボタンにカレントクラスを付与
            $("#btn_tategaki").addClass('current');
            $("#btn_yokogaki").removeClass('current');
        // 縦書きCSSを読み込み設定
            $('#novelTateyoko').attr({href:tatecssurl});
        // 小説ブロックのスクロールバーを調整する
            tategakiScroll();
        // クッキーに選択結果を登録する
            Cookies.set('cookieTateyoko', 'tategaki', { expires: 7 });
            return false;
        });
    // 横書き設定ボタン押下時にカレントクラスを付与
        $("#btn_yokogaki").click(function () {
        // ボタンにカレントクラスを付与
            $("#btn_yokogaki").addClass('current');
            $("#btn_tategaki").removeClass('current');
        // 横書きCSSを読み込み設定
            $('#novelTateyoko').attr({href:yokocssurl});
        // 小説ブロックのスクロールバーを調整する
            yokogakiScroll();
        // クッキーに選択結果を登録する
            Cookies.set('cookieTateyoko', 'yokogaki', { expires: 7 });

            return false;
        });
    // 明朝ボタン押下時にクラスを付与
        $("#btn_mincho").click(function () {
        // ボタンにカレントクラスを付与
            $("#btn_mincho").addClass('current');
            $("#btn_gothic").removeClass('current');
        // 小説ブロックに明朝クラス付与
            $('#honbun').addClass('serif');
            $('#honbun').removeClass('gothic');
        // クッキーに選択結果を登録する
            Cookies.set('cookieFont', 'serif', { expires: 7 });
            return false;
        });
    // ゴシックボタン押下時にカレントクラスを付与
        $("#btn_gothic").click(function () {
        // ボタンにカレントクラスを付与
            $("#btn_mincho").removeClass('current');
            $("#btn_gothic").addClass('current');
        // 小説ブロックにゴシッククラス付与
            $('#honbun').removeClass('serif');
            $('#honbun').addClass('gothic');
        // クッキーに選択結果を登録する
            Cookies.set('cookieFont', 'gothic', { expires: 7 });
            return false;
        });
    // 大文字ボタン押下時にクラスを付与
        $("#btn_large").click(function () {
        // 大文字ボタンにカレントクラスを付与
            $("#btn_large").addClass('current');
            $("#btn_middle").removeClass('current');
            $("#btn_small").removeClass('current');
        // 小説ブロックに大文字クラス付与
            $('#honbun').addClass('large');
            $("#honbun").removeClass('middle');
            $("#honbun").removeClass('small');
        // クッキーに選択結果を登録する
            Cookies.set('cookieFontSize', 'large', { expires: 7 });
            return false;
        });
    // 中文字ボタン押下時にカレントクラスを付与
        $("#btn_middle").click(function () {
        // 中文字ボタンにカレントクラスを付与
            $("#btn_large").removeClass('current');
            $("#btn_middle").addClass('current');
            $("#btn_small").removeClass('current');
        // 小説ブロックに中文字クラス付与
            $('#honbun').removeClass('large');
            $('#honbun').addClass('middle');
            $('#honbun').removeClass('small');
        // クッキーに選択結果を登録する
            Cookies.set('cookieFontSize', 'middle', { expires: 7 });
            return false;
        });
    // 小文字ボタン押下時にカレントクラスを付与
        $("#btn_small").click(function () {
        // 小文字ボタンにカレントクラスを付与
            $("#btn_large").removeClass('current');
            $("#btn_middle").removeClass('current');
            $("#btn_small").addClass('current');
        // 小説ブロックに小文字クラス付与
            $('#honbun').removeClass('large');
            $('#honbun').removeClass('middle');
            $('#honbun').addClass('small');
        // クッキーに選択結果を登録する
            Cookies.set('cookieFontSize', 'small', { expires: 7 });
            return false;
        });
    }
);
//縦書き用スクロールバー
function tategakiScroll(){
    //スクロールスピード
    var speed = 30;
    //マウスホイールで横移動
    $('#honbun').mousewheel(function(event, mov) {
        //ie firefox
        $(this).scrollLeft($(this).scrollLeft() + mov * speed);
        //webkit
        $('body').scrollLeft($('body').scrollLeft() + mov * speed);
        return false;
    });
}
//横書き用スクロールバー
function yokogakiScroll(){
    //スクロールスピード
    var speed = 100;
    //マウスホイールで横移動
    $('#honbun').mousewheel(function(event, mov) {
        thisPoint = $('html').scrollTop();
        jumpPoint = mov * speed;
        $(window).scrollTop(thisPoint - jumpPoint);
    });
}

以上のようにしてindex.htmlを開くと、DEMO画面のように動くはずです。

更新履歴

2019/10/10 記事公開・ダウンロード開始
2020/02/08 クッキー未登録&縦書き表示時にスクロールバーがマウスホイールに対応していなかった不具合を解消。

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

6 Comments

vivi

初めまして、こちらの縦書きにする…をDLしたのですが、// クッキー未登録時にlinkタグを診断してカレントクラスを付与…の場合を横書きにしたい場合は、どうすれば良いでしょう?
matchとその下の行とをyokogakiにしてみたのですが、どうしても縦になります。
ちなみにmac/Chrome/Safariです。
ご教授いただけますと幸いです。
  • 2019/10/24 23:29:21

yuricolo

こんにちは、気づくのが遅くなりまして申し訳ありません。

// クッキー未登録時にlinkタグを診断してカレントクラスを付与…の場合を横書きにしたい場合は、
HTMLのhead~head内に挿入するタグを、

<link rel="stylesheet" href="./css/illbenet_yokogaki.css" type="text/css" id="novelTateyoko" />

に変更してみてください。
link#novelTateyoko にに設定されているhrefを診断してデフォルトの表示を決めているので、上記タグを変更すればデフォルトが横書きに変更になると思います。
  • 2019/11/24 21:03:33

Ren

初めしまして。
こちらのサイトを見て、横・縦書き切り替えのスイッチを設置してみようと思いました。
主にスマホ向けサイトなのですが、デモページを見る限り、こちらはスマホに対応していないのですか?
  • 2020/01/26 00:46:26

yuricolo

こんにちは。
参考に配布しているJSでは、スマートフォンサイズでは縦書き・横書き切り替えを行わず、横書きのみで表示するようにしています。

var w = $(window).width();
var x = 480;
if (w >= x) {
    ~中略~
}

上記部分がスマートフォンサイズかどうかを判断し、スマートフォンサイズ以上の場合にスイッチが動作するように調整している部分ですので、上記条件式を削除するなど、ご自由に調整してください。
ご参考になれれば幸いです。
  • 2020/02/08 23:56:24

Ren

>管理人様

無事、スマートフォンでも縦横切り替え出来るようになりました。教えて下さりありがとうございます。

別件ですが、スマートフォン向けテンプレート配布のサイトを立ち上げようと思っており、そこでこちらの「pixiv小説のように表示する」のスクリプトを組み込んだテンプレートを配布したいと考えております。こちらのリンクを載せて配布しても宜しいでしょうか? ご検討頂ければと思います。どうぞよろしくお願いいたします。
  • 2020/02/15 14:01:31

yuricolo

こんにちは。
お役に立てたようでなによりです。
本サイト内でのTipsについてはご自由にご利用ください。
再配布の場合は、リンク先を明示していただけますと幸甚です。
今後ともどうぞよろしくお願いいたします。
  • 2020/02/17 16:28:14

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)