本ブログでは過去にpixiv小説のように小説を表示する方法という一連の記事を書きましたが、利用するjQueryプラグインのバージョンアップなどに伴い、以前使用していた方法が利用できなくなりました。
そこで、更にブラッシュアップして2019年現在に利用できる方法を紹介します。
つらつら書いていますが、記事の最後にまとめとしてデモページで使用しているファイルを配布しています。
デモ
動いているサンプルはこちらからご覧できます。
小説を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">ａＡ</li>
<li id="btn_gothic" class="gothic">ａＡ</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例
- 上記DLファイルをダウンロードしてください。
- 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 クッキー未登録＆縦書き表示時にスクロールバーがマウスホイールに対応していなかった不具合を解消。
