BLOGなにかの役には立つかもしれない。js.cookie.jsこの記事で紹介したTipsは、現在使用できない可能性があります。更新された情報はこちらの記事をご参照ください。pixiv小説のように小説を表示する方法を色々と調べてみました。pixivの小説縦書き表示では、縦書き部分にjavascriptは利用せず、縦書きをCSS3で表現し、ページめくりやスクロールの部分をjQueryで補うという方法を採用しているようです。上記を参考に、pixivのように小説を表示するjQueryやCSSをまとめてみました。DEMO概要pixivのような小説の表示を再現するのに、下記のような方法を採用しました。pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。小説を縦書き表示をするのに、縦書き表示用のスタイルシートを用意します。pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。縦書き表示をした際に、マウスホイールでスクロールできるように、jquery.nicescroll.jsを利用します。pixiv小説のように左右へのページめくりをjQueryでつくってみる。pixivのように縦書き表示時に左右にページめくりができるボタンを実装します。pixiv小説のように縦書き・横書きを切り替えるjQuery(1)で用意した縦書きCSSと横書きCSSを切り替えられるようにします。縦書きCSSと横書きCSSの選択結果を保存するため、js.cookie.jsを利用します。pixiv小説のように明朝体・ゴシック体を切り替えるjQuery明朝体用クラスとゴシック体用クラスを付け替えられるようにします。明朝体用クラスとゴシック体用クラスの選択結果を保存するため、js.cookie.jsを利用します。(2)のスクロール部分についてですが、pixivではページ送りの際に文字が全て表示されるように調整されています。下図のような表示にならないようになっているのです。上記のようにならないように、pixivではjQuery.howmuchreadというjQueryプラグインを独自に開発して利用しているようですが、どのように利用するかまではわかりませんでした。本文幅を調整することで対応できなくはないですが、ページをスクロールした場合にどうしても上図のようになってしまう状況は改善できていません。今回はオマケにフォントサイズを変更するjQueryも搭載してみました。これらをまとめて、pixivのような小説表示をしてみます。ダウンロードillbenet_pixiv_novel_1_0_4.zipデモ画面で利用しているHTML、CSS、jQuery、必要な画像をまとめておきました。必要でしたらダウンロードして利用してください。利用方法HTML例headタグ内に下記のように記載してください。src="./jquery.illbenet_novel.js"></script>縦書きまたは横書き用CSSをデフォルトとして読み込んでおいてください。<p>小説本文はここに挿入してください。title="前のページへ"></button></div>小説本文はdiv#honbun内に挿入してください。ul#switchTateyokoは縦書き・横書き切り替えボタンです。ul#switchFontはフォント切り替えボタンです。ul#switchFontSizeはフォントサイズ切り替えボタンです。div#honbunにはデフォルトのフォント用クラスを指定しておいてください。このサンプルでは、明朝体用のminchoクラスと中文字用のf_middleクラスをデフォルトとしてdiv#honbunにつけています。利用するjQueryを準備します。js.cookie.jsを配布元からダウンロードして下さい。pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。参考に、jQuery.nicescrollをダウンロードし、GitHubのInuYaksa様の改造例のように改造して下さい。pixiv小説のように縦書き・横書きを切り替えるjQueryを参考に、jquery.illbenet_novel.jsの9行目に縦書き用CSSのパスを、11行目に横書き用CSSのパスを設定して下さい。以上のようにしてindex.htmlを開くと、DEMO画面のように動くはずです。縦書き用CSSパス・横書き用CSSパスの設定位置を変更してアップデート。(jquery.illbenet_novel.jsを更新してください。小説本文ブロックのスクロールバーの調整を修正してアップデート。(jquery.illbenet_novel.jsを更新してください。jquery.illbenet_novel.js内の誤字を修正してアップデート。(jquery.illbenet_novel.jsを更新してください。クッキー未登録時の小説本文ブロックのスクロールバーの調整を修正してアップデート。(jquery.illbenet_novel.jsを更新してください。Comments権限がありませんこのコメントを閲覧する権限がありません。10:23:08権限がありませんこのコメントを閲覧する権限がありません。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。