BLOGなにかの役には立つかもしれない。js.cookie.jspixiv小説のように、小説本文の縦書き横書き切り替えボタンをjQueryでつくってみます。ボタンを押下したとき、jQueryで読み込むCSSを切り替えます。jQueryで読み込むスタイルシートを切り替える方法はいくつか有りますが、今回はpixivのように一定期間縦書きまたは横書きの設定が保存できるように、js.cookie.jsを利用する方法にしてみます。DEMOHTMLを準備するまずはHTMLを用意します。<p>小説本文はここに入力します。縦書き横書き切り替えボタンはul#switchTateyokoで構成しています。button#honbun_nextとbutton#honbun_prevは縦書き表示時に利用するページめくりボタンです(詳しくはpixivの小説のように左右へのページめくりをjQueryでつくってみる。参照)小説本文はdiv#honbun内に入力してください。ul#switchTateyokoのliアイテムをクリックすることで縦書き横書きを切り替える処理を走らせています。CSSを準備する縦書き・横書きを切り替えるためのCSSを準備しましょう。基本的なCSS(縦書き・横書き共通)縦書き表示用のCSS横書き表示用のCSSの3種類です。基本的なCSS縦書き・横書き共通のCSSを準備します。serif;}例えば上記のようにします。内容は自由に編集してください。デモ画面で使用している小説用の基本的なCSSのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。縦書き用のCSS縦書き用のCSSを準備します。ページめくりボタン(button#honbun_next,button#honbun_prev)、小説本文の縦書きを設定します。0.3;}下記を参考にしています。pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。pixivの小説のように左右へのページめくりをjQueryでつくってみる。デモ画面で使用している小説用の縦書き用CSSのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。縦書き用CSSは、「tategaki.css」のようにCSSファイルとして保存して、外部から読み込めるようにしてください。このファイル名を、jQuery側で利用します。横書き用のCSS横書き用のCSSを準備します。横書き表示時はページめくりボタンは必要ないので非表示にします。none;}デモ画面で使用している小説用の横書き用CSSのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。横書き用CSSは、「yokogaki.css」のようにCSSファイルとして保存して、外部から読み込めるようにしてください。このファイル名を、jQuery側で利用します。jQueryで読み込むCSSを切り替えるjQueryで読み込むCSSを切り替えます。今回は、縦書き用CSSと横書き用CSSを切り替えて、選択結果を一定期間クッキーに保存します。クッキーに選択結果を保存するために、js.cookie.jsを利用します。js.cookie.jsとはjs.cookie.jsの前身はjquery.cookie.jsです。詳しい使い方は別記事で解説します。js.cookie.js利用準備をするjs.cookie.jsはこちらからダウンロードできます。右下のダウンロードボタンをクリックし、ダウンロードしてください。ダウンロードしたZIPを解凍し、[js-cookie-master/js-cookie-master/src]フォルダ内のjs.cookie.jsを利用します。headタグ内にCSSとjavascriptの読み込んで準備するheadタグ内に下記のように記述してください。/>linkタグでデフォルトで読み込むCSSを定義します。作った縦書き用CSSか横書き用CSSのどちらかを読み込むようにしてください。今回は縦書き用CSSをデフォルトで読み込むようにしています。横書き用CSSをデフォルトで読み込む場合は、jQuery側のデフォルト設定も横書きに変更してください。リンクタグのidを必ず設定しておいてください。このidは、下で説明するjQueryで利用します。CSS切り替え用のjQueryCSS切り替え用のjQueryを設定します。jsファイルにして読み込んでもいいですし、headタグ内に記述してもOKです。(外部jsとして読み込む場合は、js.cookie.jsの後に読み込んでください。)小説縦書き表示を行うには、スクロールバーの調整やページめくりの実装などが必要ですが、この記事ではとりあえず、CSS切り替えに必要な部分のjQueryのみ解説します。});1~5行目で縦書き用CSSと横書き用CSSを定義しています。6~31行目でページ読み込み時にクッキーに登録されている内容によって読み込むCSSを変更し、ボタンにカレントクラスを付与します。10~16行目でクッキー未登録時にどちらのボタンにクラスを付与するかを決めています。[tategaki]という文字が#novelTateyokoのリンクタグに入っていた場合は縦書きボタンにカレントクラスを付与します。[tategaki]以外の文字が#novelTateyokoのリンクタグに入っていた場合は横書きボタンにカレントクラスを付与します。17~22行目でcookieTateyokoというクッキーに[tategaki]という文字列が入っている場合は縦書きボタンにクラスを付与し、縦書きCSSを利用します。23~29行目でcookieTateyokoというクッキーに[yokogaki]という文字列が入っている場合は横書きボタンにクラスを付与し、横書きCSSを利用します。30~51行目で縦書きボタンまたは横書きボタン押下時のCSSの切り替えを行います。31~40行目で縦書きボタン押下時にクッキーにCSS選択結果[tategaki]を格納し、縦書き用CSSを読み込みます。41~50行目で横書きボタン押下時にクッキーにCSS選択結果[yokogaki]を格納し、横書き用CSSを読み込みます。スクロールバーの調整やページめくりの実装などを含んだデモ画面で使用しているjQueryのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。外部jsで上記jQueryを利用する場合は、js.cookie.jsの後に読み込んでください。関連記事pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。pixiv小説のように左右へのページめくりをjQueryでつくってみる。pixiv小説のように縦書き・横書きを切り替えるjQuerypixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。pixiv小説のように明朝体・ゴシック体を切り替えるjQuerypixiv小説のように小説を表示する方法まとめ▲ページ上部へTweetこの記事のURLコメント(0)トラックバック(0)記事移動pixivの小説のように左右へのページめくりをjQueryでつくってみる。pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。