BLOGなにかの役には立つかもしれない。js.cookie.jspixiv小説のように、小説本文の縦書き横書き切り替えボタンをjQueryでつくってみます。ボタンを押下したとき、jQueryで小説ブロックに付与するクラスを切り替えます。今回はpixivのように一定期間明朝体またはゴシック体の設定が保存できるように、js.cookie.jsを利用する方法で解説します。DEMOHTMLを準備するまずはHTMLを用意します。<p>小説本文はここに入力します。</p></div>縦書き横書き切り替えボタンはul#switchFontで構成しています。小説本文はdiv#honbun内に入力してください。ul#switchTateyokoのliアイテムをクリックすることでフォントを切り替える処理を走らせています。小説本文ブロックには、デフォルトに設定しておきたいフォントクラスをつけておいて下さい。上記例の場合は[.mincho(明朝体クラス)]を#honbun(小説本文ブロック)につけています。CSSを準備する明朝体・ゴシック体を切り替えるためのCSSを準備しましょう。serif;}例えば上記のようにします。内容は自由に編集してください。明朝体本文用クラスとして[.mincho]、明朝体本文用クラスとして[.gothic]をそれぞれ指定しています。このクラス名を変更する場合はjQueryの編集が必要です。デモ画面で使用しているCSSのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。jQueryで本文のクラスを付け替えるjQueryで本文のクラスを付け替えます。今回は、小説ブロックに明朝体またはゴシック体のクラスをつけて、選択結果を一定期間クッキーに保存します。クッキーに選択結果を保存するために、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タグ内にjavascriptの読み込んで準備するheadタグ内に下記のように記述してください。src="./js.cookie.js"></script>今回は本文ブロックのhtmlタグで明朝体クラスをデフォルトで設定しています。クラス切り替え用のjQueryクラス切り替え用のjQueryを設定します。jsファイルにして読み込んでもいいですし、headタグ内に記述してもOKです。(外部jsとして読み込む場合は、js.cookie.jsの後に読み込んでください。)小説縦書き表示を行うには、スクロールバーの調整やページめくりの実装が必要ですが、この記事ではとりあえず、クラス切り替えに必要な部分のjQueryのみ解説します。});1~31行目でページ読み込み時にクッキーに登録されている内容によって本文ブロックに付与するフォントクラスを変更し、ボタンにカレントクラスを付与します。cookieFontというクッキーに[mincho]という文字列が入っている場合は明朝体ボタンにクラスを付与し、本文は明朝体で表示します。[gothic]という文字列が入っている場合はゴシック体ボタンにクラスを付与し、本文はゴシック体で表示します。クッキーになにも入っていない場合は、HTML内の本文ブロックからデフォルトのフォントクラスが明朝体かゴシック体かを判断してカレントクラスを付与します。5~14行目でクッキー未登録時にどちらのボタンにクラスを付与するかを決めています。[mincho]という文字が#honbunのクラスに入っていた場合は明朝体ボタンにカレントクラスを付与します。[mincho]以外の文字が#honbunに入っていた場合は横書きボタンにカレントクラスを付与します。30~54行目で明朝体ボタンかゴシック体ボタン押下時のクラスの付け替えを行います。35~40行目と47~52行目で明朝体・ゴシック体のそれぞれのクラス名を定義しています。ボタン押下時にクッキーに選択結果を格納します。スクロールバーの調整やページめくりの実装、縦書き・横書き切り替えボタンを含んだデモ画面で使用しているjQueryのダウンロードはこちら(右クリック→リンク先をファイルとして保存)からどうぞ。外部jsで上記jQueryを利用する場合は、js.cookie.jsの後に読み込んでください。関連記事pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。pixiv小説のように左右へのページめくりをjQueryでつくってみる。pixiv小説のように縦書き・横書きを切り替えるjQuerypixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。pixiv小説のように明朝体・ゴシック体を切り替えるjQuerypixiv小説のように小説を表示する方法まとめ▲ページ上部へTweetこの記事のURLコメント(0)トラックバック(0)記事移動pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。