プラグイン・PHPなし、コピペOK。JSとCSSで小説の縦書き表示を実装してみた

小説とか

 JavaScriptとCSS3で簡単な縦書き表示機能を作成してみました。コピペOKです。

スポンサーリンク
スポンサーリンク
↓アプリPR。どうかよろしく(察して)
ド派手なドット絵。今月下旬からゴブリンスレイヤーコラボ開催、4/14~24はコラボ直前キャンペーン中。やるなら今じゃね。
グランドサマナーズ

グランドサマナーズ

posted withアプリーチ

縦書き表示

小説サイトなら縦書き表示できるべきじゃねえの?

 という安直な発想を元に、縦書き⇔横書きを変更できる機能を作成しました。ワードプレスのプラグイン操作、PHPの変更などは使用しなかったので、危険度の低い実装で済みました。

 右にあるボタンを押すと、文字の表示方向が変更されるはずです。JSが動かないブラウザを使用している方はお察しください。

 ここに本文を記入すると縦になります。

 一行が長い場合も一定文字数で自動改行になるので、特に本文を弄る必要はありません。数字は2018、アルファベットはnovel、といった形で表示します(ただし、一部ブラウザの場合は横文字表記になります)。

 pタグによる行空けは自動詰めに変更します。

 文字の表示領域はレスポンシブ設定にしているので、端末の画面に適応したサイズに変更となります。文章がページ内に収まらない場合は、左右のスクロール操作が可能です。

 自前のPCブラウザ上での挙動は↓のようになります。

 ビュアーとしての実際の挙動は↓のページで確認していただけるとありがたいです。

【短編小説】プリンを食べた人が酷い目に合う話
 自作短編小説、『プリンを食べた人が酷い目に合う話』を晒すページです。文字数は3千と少し、読了目安は4~5分です。  あらすじ:プリンを食べた人が酷い目に合います。

コピペ素材

 本ブログの環境はワードプレスですが、各種無料ブログでも使用できると思われます。貼り付け前に各種自動整形をオフにしておくことを推奨します。

HTML(本文)

<input id=”btn” type=”button” value=”縦書きに変更する” />
<div id=”string”><p>ここに本文を記入すると縦になりますよ!</p></div>

 本文をdivで囲えば縦横変換が可能になります。</div>の付け忘れにはご注意ください。

CSS

.text_tate {
writing-mode: vertical-rl;
text-orientation: upright;
-ms-writing-mode: tb-rl;
font-size: 16px;
width: 90vw;
max-width:700px;
height: auto;
max-height: 600px;
overflow: scroll;
}

 フォントサイズや背景色はお好みで変更してください。

JavaScript

document.getElementById(‘btn’).onclick=function page_make(){
if(document.getElementById(‘string’).className==””){
document.getElementById(‘string’).className=”text_tate”;
document.getElementById(‘btn’).value=”横書きに戻す”;
}
else {
document.getElementById(‘string’).className=””;
document.getElementById(‘btn’).value=”縦書きに変更する”;
}
}


 その他、これがあれば面白い、という機能案があれば教えていただけると嬉しいです。

にほんブログ村 ゲームブログ ソーシャルゲームへ
スポンサーリンク
↓アプリPR。どうかよろしく(たのむ)
海戦と書いてロマンと読むゲーム。5/15までの特別ログボキャンペーンで、今なら限定キャラ貰えます故。
アズールレーン

アズールレーン

Yostar, Inc.無料posted withアプリーチ

小説とか忘備録
スポンサーリンク
大沼をフォローする
沼なわなびの晒し台

コメント