まずはダウンロード
ダウンロードページから最新のパッケージをダウンロードできます。ダウンロードした .zip または .tar.gz ファイルを解凍して、フォルダ「h2v」の中に以下の4つのファイルが含まれていることを確認してください。
- h2v.js:横→縦変換JavaScript
- h2v-min.js:h2v.jsを最小化してファイルサイズを小さくしたもの
- h2v-min.js.gz:h2v-min.jsをgzip圧縮したもの。
- h2v.css:スタイルシート
h2v-min.js と
h2v.css をサーバの適当なところにアップロードします。これらのファイルの置き場所は同じpathでなくても構いません。
使用しているサーバが gzip圧縮したファイルを扱える設定になっている場合には、h2v-min.js と共に、より小さなファイルサイズの
h2v-min.js.gz を設置することで、ページ読み込み速度を高速化することができます。設置方法などは
こちらの記事などを参考にしてみてください。
最低限、設定すべきこと
1. h2v-min.js と h2v.css を htmlファイルから呼び出します
htmlファイルのヘッダ部分の記述。各ファイルへのパスは、実際にそれらを設置した場所を記述してください。
<link rel="stylesheet" type="text/css" href="css/h2v.css">
<script type="text/javascript" src="h2v-min.js" charset="utf-8"></script>
※ 閲覧者が Internet Explorer 8 以上を使用している場合、以下の metaタグを上記タグの
前に記述しておくと、IE の互換表示モードの オン / オフ に関わらず、正しく縦書き表示されるようになります。
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
2. 縦書き表示したいエリアを設定します
body内の、縦書き表示にしたいエリアを id 付きの div で囲みます。エリアは複数存在しても大丈夫。もちろん、別々の id を振ってください。
3. 変換パラメータを設定します
パラメータを設定することで、縦書きエリアの書式(フォントサイズ、行間スペース、一行の文字数、ページロード時に自動変換するかどうか…など)を制御できます。
たとえば body内に <div id="
tate_1">〜</div> と、<div id="
tate_2">〜</div> というふたつの縦書きエリアを置いたとするならば、こんな感じで、それぞれのエリアごとに独立に書式を設定することができます。
<script type="text/javascript">
var params = { 'tate_1 ' : { 'fontsize' : '13px' } ,
'tate_2' : { 'fontsize':'15pt' , 'auto' : false , 'pagewidth' : '500px' }
} ;
h2vconvert.init( params );
</script>
明示的に値を指定しない場合は、省略時のデフォルト値が自動的に適用されます。
すべての値がデフォルト値でよい、という場合は
var params = { 'tate_1 ' : { } ,
'tate_2' : { }
} ;
のように、空のオブジェクトを渡すこともできます。
4. 変換のための関数 h2vconvert.init( ) を呼び出します
設定したパラメータを h2vconvert.init に渡します。
<script type="text/javascript">
h2vconvert.init( params );
</script>
…これで、縦書き表示が出来る筈。