日別アーカイブ: 2017-08-13

自由研究のはじめ6

ものづくり筆耕ブログ

縦書きレイアウト方式

前回はペイントにより、縦書き絵日記を作成しました。画像による縦書きは簡単ながら、編集に難があったり、フリガナを付けると乱れることがあります。また、検索には画像はテキストよりも不利と言われています。

今回は、ブログやホームページにおいて、記事の縦書きレイアウトを実現するh2vR.jsによって縦書き絵日記を作ります。

縦書きプラグイン

WordPressや普通のホームページで縦書きが利用できる「h2vR」というプラグインがあります。入力は通常の横書き方式ながら、縦書きの記事を作成することができます。前回取り上げたテキストを縦型の画像にすることとは異なり、記事はテキストのまま保持されます。

h2vRの使い方

h2vRのプラグインツールを利用するには、先に示したサイトから次の3つのライブラリをダウンロードし、読み込んで利用します。

①h2vR.css
②h2vR.js
③h2vR_extensions.js

ダウンロードしたファイルをローカルディスクに読み込み、自己のソースファイルに包含します。ここでは、自分のサイトにアップロードしてURLを確保し、script要素で読み込み利用します。たとえば、body要素の直前において、次のように読み込みます。

<html>
<link rel="stylesheet" href="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.js" charset="UTF-8"></script>
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR_extensions.js" charset="UTF-8"></script>
<body>

3つのライブラリを自ら組み込むのは、ローカル環境で実行するときだけであり、リモート環境で動作する場合は、div要素の中でclass=”h2vr_〇〇”を指定することで十分です。

作成した絵日記

ブラウザChromeとoperaで動作します。

八月十三日 日曜 晴れ
　　　　やまだはな子
むかしはクーラーなどなく、簾すだれや風鈴ふうりん、うちわで暑さをしのいだとおじいちゃんに聞きました。井戸で冷やしたスイカやところてんのおいしさは最高と話してくれました。
Ver0.01, ©TacM,2017

サンプルコード

<html>
<body>
<DIV style="position:relative; width:370px; height:537px; border: 1px green solid; background-color:aliceblue">
<img id="w1" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki-80.png" style="position:absolute; left:0px; top:0px; width:368px; height:535px; opacity:1;">
<img id="w2" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki56.png" style="position:absolute; left:22px; top:10px; width:320px; height:240px; opacity:1;">
<div class="h2vr_0 test" style="position:absolute; left:23px; top:270px; font-size:22px; line-height:1.44em; width:315; height:220; border: 0px orange solid">
八月十三日 日曜 晴れ<BR>
　　　　やまだはな子<BR>
むかしはクーラーなどなく、<ruby><rb>簾</rb><rt>すだれ</rt></ruby>や<ruby><rb>風鈴</rb><rt>ふうりん</rt></ruby>、うちわで暑さをしのいだとおじいちゃんに聞きました。井戸で冷やしたスイカやところてんのおいしさは最高と話してくれました。
</div>
<div style="font-size:14px; color:firebrick; position:absolute; left:5px; top:514px;">Ver0.01, &copy;TacM,2017</div>
</DIV>
<Div><audio id="event" preload="auto" autoplay controls controlsList="nodownload" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/08/Insects_chirping_xf.mp3"></audio></Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
/* ここに動的なコードを追加する。 */
</script>
</html>

サンプルコードの解説

    　
  1. 3～12行、日記全体の領域を定義する。style要素のposition属性で、文字と画像を重ね書きすることを指定し、領域のサイズを示す。
    2. 　
  2. 4行、絵日記の原稿用紙を指定する。leftとtop属性で位置決めする。opacityは透過率であり、１は不透明度100％を意味し、省略可能。
    3. 　
  3. 5行、原稿の上部に絵を描く。描画位置はleftとtopで調整する。
    4. 　
  4. 6～10行、日記本文を指定する。line-heightで行間を指定。class=”h2vr_〇〇”は縦書きを指定し、〇〇にて行内に納める文字数を指定する。0は縦書き要素の高さを固定する場合に使用し、styleのheight属性が有効になる。
    5. 　
  5. 11行、copyrightを指定する。
    6. 　
  6. 13行、BGMの音声データを読み込み、コントローラーを表示する。
    7. 　
  7. 15～17行、動的なコードがあるとき、ここに追加し深みのある日記に仕立て上げる。

次回の予定

次回はこれまでの補足説明を追加します。

おまけ

縦書きをちょっぴり、高級化した記事を以前に発表しました。もし、良かったら「秋の始まり」をどうぞ、ご覧ください。