WordPressや普通のホームページで縦書きが利用できる「tategaki」

【この記事を読むのに必要な時間は約 11 分です。】

ワードプレスや普通のホームページで縦書きが利用できるものとして、当ブログの過去記事で、「nehan3(涅槃)」と「nehan4」を紹介してきた。
WORDPRESSや普通のホームページで縦書きが利用できる「涅槃NEHAN」(VER.4)
WORDPRESSや普通のホームページで縦書きが利用できる「涅槃」
今回、nehanシリーズ同様使い勝手の良いものを見つけたので紹介する。
それが、tategaki.info ウェブページで縦書きレイアウトである。詳細説明は、本家に任せて、簡単に設置方法を説明したい。

h2v.jsパッケージのダウンロードと必要ファイルのアップロード

ダウンロード

tategaki.infoさんのh2v.js の最新版パッケージのダウンロードページからh2v330.zip(約 53kB)とh2v330.tar.gz(約 50kB)がダウンロードできる。解凍できる方をダウンロードする。
(2013年7月27日最終アップデートバージョン 3.3.0)

サーバーへのアップロード

解凍すると中に必要なファイルが入っているので、サーバーにアップロードする。
必要なファイルは、h2v-min.jsとh2v.cssの二つ。

riyou

設置方法

HTML <head>~</head>部分へ記載

htmlファイルのヘッダー部分への記載。
各ファイルへのパスは、実際にそれらを設置した場所を記載する。
また、閲覧者がInternet Explorer 8以上を使用している場合、以下のmetaタグを2つのファイルを呼び出すために記載したものより前に記述しておくと、IE の互換表示モードのオン/オフに関わらず、正しく縦書き表示されるようになるとのこと。

なお、暫くの間はDropboxの公開フォルダにアップロードしてあるので、このままコピペでも利用できるが、基本、自分のサーバーにアップロードして欲しい。

<head>
 <!-- h2v for meta in head -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 <!-- /h2v for meta in head -->

 <!-- h2v in head -->
   <script src="https://dl.dropboxusercontent.com/u/204211566/h2v/h2v-min.js" type="text/javascript" charset="UTF-8"></script>
    <link charset="utf-8" rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/204211566/h2v/h2v.css" />
 <!-- /h2v in head -->
</head>

HTML <body>~</body>部分へ記載

後は、ボディ部分に、「縦書きしたい範囲」の指定のための記載と、「パラメーター」の記載が必要になる。「パラメーター」はヘッダー部分に記載しても良いが、個別の記事毎に「パラメーター」を変えることができるので、ボディ部分に記載した方が、便利だ。ホームページ全てに同じパラメーターを利用するのであれば、ヘッダー部分に記載すればよい。

なお、「パラメーター」をボディ部分に記載する場合、「縦書きしたい範囲」として指定した中に「パラメーター」は記載しないように注意すること。

パラメーターの設定

設定できるパラメーターの詳細はこちらを参考にしてほしい。
実際のパラメーターの設定と表示のされ方は下のデモ表示を見て確認してほしい。

縦書きしたい範囲の設定のための記載

ボディ部分の縦書きにしたい範囲をパラメーターで指定したidをつけて、<div id=””> </div>で囲うだけだ。

//デモ1
<div id="tate_1">
<p>ここに「パラメーター」:tate_1で指定した書式で文章が表示される。</p>
</div>
//デモ2
<div id="tate_2">
<p>ここに「パラメーター」:tate_2で指定した書式で文章が表示される。</p>
</div>
//デモ3
<div id="tate_3">
<p>ここに「パラメーター」:tate_3で指定した書式で文章が表示される。</p>
</div>

パラメーターの記載

ボディ部分で「縦書きしたい範囲」以外の適当なところに記載すればよい。
</body>の直前に記載しておけば間違いない。
以下、今回指定したものだけ説明する。
fontsize:本文のフォントサイズを指定。
auto:読み込み時自動で縦書き表示。デフォルト(true)で自動表示。
bar:縦書きと横書きの切り替え用のバーの表示。デフォルト(true)で表示される。
showcredit:クレジットの表示。デフォルト(true)で表示される。
pagewidth:表示範囲(横幅)。デフォルト(省略)で全幅。

次にデモを表示するが、次のように設定してみた。

<script type="text/javascript">
    var params = {
 'tate_1' : { 'fontsize':'8pt' , 'showcredit' : false,  'bar' : false , } , 
 'tate_2' : { 'fontsize':'10pt' , 'auto' : false , 'pagewidth' : '500px' , } ,
 'tate_3' : { 'fontsize':'12pt' , }
                   } ;
    h2vconvert.init( params );
</script>

表示デモ

デモ1

(題名)ああ華族様だよ と私は嘘を吐くのであった渡辺温

居留地女の間ではその晩、私は隣室のアレキサンダー君に案内されて、始めて横浜へ遊びに出かけた。

アレキサンダー君は、そんな遊び場所に就いてなら、日本人の私なんぞよりも、遙かに詳かに心得ていた。アレキサンダー君は、その自ら名告るところに依れば、旧露国帝室付舞踏師で、革命後上海から日本へ渡って来たのだが、踊を以て生業とすることが出来なくなって、今では銀座裏の、西洋料理店某でセロを弾いていると云う、つまり街頭で、よく見かける羅紗売りより僅かばかり上等な類のコーカサス人である。

それでも、遉にコーカサス生れの故か、髪も眼も真黒で却々眉目秀麗な男だったので、貧乏なのにも拘らず、居留地女の間では、格別可愛がられているらしい。――アレキサンダー君は、露西亜語の他に、拙い日本語と、同じ位拙い英語とを喋ることが出来る。桜木町の駅に降りたのが、かれこれ九時時分だったので、私達は、先ず暗い波止場の方を廻って、山下町の支那街へ行った。そして、誰でも知っているインタアナショナル酒場でビールを飲んだ。ここの家はどう云う理由か、エビス・ビールを看板にしているが、私はずっと前に、矢張りその界隈にあるハムブルグ酒場で、大変美味しいピルゼンのビールを飲んだことがあった。

独逸へ行こうと思っていた頃で、そこの酒場に居合せた軍艦エムデン号の乗組員だったと称する変な独逸人に、ハイデルベルヒの大学へ入る第一の資格は、ビールを四打飲めることだと唆かされて、私はピルズナア・ビールを二打飲んだのであった。『そのエムデンは店の人です、つまりサクラですね。――』と、アレキサンダー君はハムブルクを斥けた。『それに、あすこには、こんな別嬪さん一人もいませんです。つまらないですね。』アレキサンダー君は、さう云いながら、私達の卓子テーブルを囲んで集まった、各自国籍の異るらしい四五人の女給の中で、一番器量良しの細い眼をした、金髪の少女の頤を指でつついたものだ。『マルウシャ! 日本人の小説を書く人に惚れています。――マルウシャ、云いなさい!』その少女の噂は、私も既に聞いていた。彼女は私に、××氏から貰ったのだと云う手巾を見せたりした。

デモ2

デフォルトでは横書きになっているので、バー右端で縦横を切り替えてください。

(題名)ああ華族様だよ と私は嘘を吐くのであった渡辺温

居留地女の間ではその晩、私は隣室のアレキサンダー君に案内されて、始めて横浜へ遊びに出かけた。

アレキサンダー君は、そんな遊び場所に就いてなら、日本人の私なんぞよりも、遙かに詳かに心得ていた。アレキサンダー君は、その自ら名告るところに依れば、旧露国帝室付舞踏師で、革命後上海から日本へ渡って来たのだが、踊を以て生業とすることが出来なくなって、今では銀座裏の、西洋料理店某でセロを弾いていると云う、つまり街頭で、よく見かける羅紗売りより僅かばかり上等な類のコーカサス人である。

それでも、遉にコーカサス生れの故か、髪も眼も真黒で却々眉目秀麗な男だったので、貧乏なのにも拘らず、居留地女の間では、格別可愛がられているらしい。――アレキサンダー君は、露西亜語の他に、拙い日本語と、同じ位拙い英語とを喋ることが出来る。桜木町の駅に降りたのが、かれこれ九時時分だったので、私達は、先ず暗い波止場の方を廻って、山下町の支那街へ行った。そして、誰でも知っているインタアナショナル酒場でビールを飲んだ。ここの家はどう云う理由か、エビス・ビールを看板にしているが、私はずっと前に、矢張りその界隈にあるハムブルグ酒場で、大変美味しいピルゼンのビールを飲んだことがあった。

独逸へ行こうと思っていた頃で、そこの酒場に居合せた軍艦エムデン号の乗組員だったと称する変な独逸人に、ハイデルベルヒの大学へ入る第一の資格は、ビールを四打飲めることだと唆かされて、私はピルズナア・ビールを二打飲んだのであった。『そのエムデンは店の人です、つまりサクラですね。――』と、アレキサンダー君はハムブルクを斥けた。『それに、あすこには、こんな別嬪さん一人もいませんです。つまらないですね。』アレキサンダー君は、さう云いながら、私達の卓子テーブルを囲んで集まった、各自国籍の異るらしい四五人の女給の中で、一番器量良しの細い眼をした、金髪の少女の頤を指でつついたものだ。『マルウシャ! 日本人の小説を書く人に惚れています。――マルウシャ、云いなさい!』その少女の噂は、私も既に聞いていた。彼女は私に、××氏から貰ったのだと云う手巾を見せたりした。

デモ3

フォントサイズ以外はデフォルトの表示です。

(題名)ああ華族様だよ と私は嘘を吐くのであった渡辺温

居留地女の間ではその晩、私は隣室のアレキサンダー君に案内されて、始めて横浜へ遊びに出かけた。

アレキサンダー君は、そんな遊び場所に就いてなら、日本人の私なんぞよりも、遙かに詳かに心得ていた。アレキサンダー君は、その自ら名告るところに依れば、旧露国帝室付舞踏師で、革命後上海から日本へ渡って来たのだが、踊を以て生業とすることが出来なくなって、今では銀座裏の、西洋料理店某でセロを弾いていると云う、つまり街頭で、よく見かける羅紗売りより僅かばかり上等な類のコーカサス人である。

それでも、遉にコーカサス生れの故か、髪も眼も真黒で却々眉目秀麗な男だったので、貧乏なのにも拘らず、居留地女の間では、格別可愛がられているらしい。――アレキサンダー君は、露西亜語の他に、拙い日本語と、同じ位拙い英語とを喋ることが出来る。桜木町の駅に降りたのが、かれこれ九時時分だったので、私達は、先ず暗い波止場の方を廻って、山下町の支那街へ行った。そして、誰でも知っているインタアナショナル酒場でビールを飲んだ。ここの家はどう云う理由か、エビス・ビールを看板にしているが、私はずっと前に、矢張りその界隈にあるハムブルグ酒場で、大変美味しいピルゼンのビールを飲んだことがあった。

独逸へ行こうと思っていた頃で、そこの酒場に居合せた軍艦エムデン号の乗組員だったと称する変な独逸人に、ハイデルベルヒの大学へ入る第一の資格は、ビールを四打飲めることだと唆かされて、私はピルズナア・ビールを二打飲んだのであった。『そのエムデンは店の人です、つまりサクラですね。――』と、アレキサンダー君はハムブルクを斥けた。『それに、あすこには、こんな別嬪さん一人もいませんです。つまらないですね。』アレキサンダー君は、さう云いながら、私達の卓子テーブルを囲んで集まった、各自国籍の異るらしい四五人の女給の中で、一番器量良しの細い眼をした、金髪の少女の頤を指でつついたものだ。『マルウシャ! 日本人の小説を書く人に惚れています。――マルウシャ、云いなさい!』その少女の噂は、私も既に聞いていた。彼女は私に、××氏から貰ったのだと云う手巾を見せたりした。

おわり

以上でおわりだが、青空文庫は以下より抄出させて頂いた。


底本:「アンドロギュノスの裔」薔薇十字社
   1970(昭和45)年9月1日初版発行
初出:「講談雑誌」
   1929(昭和4)年4月
入力:森下祐行
校正:もりみつじゅんじ
2001年10月8日公開
2007年10月9日修正
青空文庫作成ファイル:
このファイルは、インターネットの図書館、青空文庫(http://www.aozora.gr.jp/)で作られました。
入力、校正、制作にあたったのは、ボランティアの皆さんです。



Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。