まずはダウンロード

ダウンロードページから最新のパッケージをダウンロードできます。ダウンロードした .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.jsh2v.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>
…これで、縦書き表示が出来る筈。