アポラボ

ブログに縦書きの記事を投稿する方法

apolab_2008-01-16_17-49-21

概要

ブログの記事は一般的に横書きですが記事の投稿時にほんの少し手を加えるだけで簡単に縦書きにすることもできます。ここではスタイルシート(CSS)を使ってブログに縦書きの記事を投稿する方法を解説してみたいと思います。

スタイルシート以外の方法でも縦書きにする方法はあります。「縦書きしたい人のために」でいくつか紹介しているので参考にしてみてください。

以下の解説は Windows Live スペース(Windows Live Spaces: マイクロソフト社のブログサービス)に限定した解説になっていますが、記事の投稿にHTMLタグを使うことができるブログであれば、他社のブログサービスでも同じ方法で縦書きにすることができると思います。

なお、現時点で縦書きで表示されるのは Internet Explorer(バージョン5.5以降)のみです。それ以外のウェブブラウザや携帯電話からの閲覧の場合には横書きで表示されることになりますが、文章の閲覧には支障はありません。


まずは簡単に、記事を投稿する流れを説明しておきます。

ウェブブラウザで Windows Live スペースにログインして記事の投稿画面を開き、ツールバーの右端にある「HTML」 と書かれたボタンをクリックします。

投稿画面1

すると、以下のような画面に切り替わります。

投稿画面2

これで、HTMLを直接編集できるモードに切り替わりました。この <DIV></DIV> という部分に、記事を縦書きにする魔法のタグを書き込みます。以下はその一例です。(タグの解説は「縦書き用HTMLタグの解説」をお読みください。)

投稿画面3

終わったらもう一度ツールバーの「HTML」のボタンを押すと、通常の編集モードに戻って以下のように表示されます。

投稿画面4

この状態でも通常通り記事の編集はできます。縦書きの部分を2回クリックすると入力ができるようになります。 画面が小さいのでスクロールさせる必要があったりして面倒ですが、誤字・脱字を修正したり、太字や下線などの文字修飾、リンクの設定など、その程度であれば特に不自由はないと思います。

編集が終わったら、最後に「記事の投稿」をクリックして投稿完了です。

縦書き状態で文章を入力した場合、投稿時に入力した内容が反映されない場合があります。記事を投稿する直前に、もう一度「HTML」ボタンを押してHTML編集モードの状態にしてから「記事の投稿」をクリックすれば、入力内容が反映されるようになります。

完成した縦書きの記事は「縦書きの記事はいかが?」をご覧ください。


縦書き用HTMLタグの解説

では、記事を縦書きにする魔法のタグについて詳しく説明してゆきます。

縦書きにするだけであれば、先ほどのHTML編集モードの画面で <DIV></DIV> と表示されていた部分を以下のように書き換えるだけで簡単にできます。

<DIV style="WRITING-MODE: tb-rl;">ここに文章を書きます。</DIV>

上の記述をそのままコピーして編集画面に貼り付けてみてください。「HTML」ボタンを押してHTML編集モードを解除すると「ここに文章を書きます。」という文が縦書きで表示されるはずです。(文が見えない場合はスクロールバーで上下左右に動かしてみてください。)縦書き表示のまま文章の編集もできるようになります。

これだけでは長文になったときに読みづらくなってしまうので、さらに細かい設定を付け加えます。

まずは記事の枠の範囲を指定します。横幅が WIDTH で、高さが HEIGHT です。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px;">ここに文章を書きます。</DIV>

横幅はスペースのレイアウトによって変化するので、WIDTH はパーセント(%)で指定しました。高さは 240 ピクセル(px)に固定してみました。いずれも好みの範囲で自由に決めてかまいません。

枠の範囲を指定すると、文章が長文になったりしたときに枠の外にはみ出て表示できなくなることがあります。 そのような場合にスクロールバーを表示して横にスクロールできるように、OVERFLOW という記述を追加します。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px; OVERFLOW: auto;">ここに文章を書きます。</DIV>

閲覧者の環境によって文字のサイズも様々なので、自分のパソコンではちょうどよく文章が収まっているように見えても、他人のパソコンでは文章がはみ出て読めなくなることもあります。また、Internet Explorer 以外のブラウザでは横書きで表示されるので、レイアウトが変わって文章がはみ出る可能性も高くなります。特に理由がない限り、必ず OVERFLOW の記述を追加しておいてください。

縦書きにするための魔法のタグはたったのこれだけです。

もっと見た目にこだわりたい人は「さらに文章の見栄えを良くするためのヒント」をご覧ください。

アポラボの「縦書きのHTMLの文章で縦中横にする方法」という文書も参考にしてください。


使いこなす

あとは、HTML編集モードのまま「ここに文章を書きます。」という部分を書き換えてもいいし、通常編集モードに戻して縦書き表示で文章を入力しても良いでしょう。通常編集モードでは縦書きに表示されている部分を2回クリックです。

縦書き状態で文章を入力した場合、投稿時に入力した内容が反映されない場合があります。記事を投稿する直前に、もう一度「HTML」ボタンを押してHTML編集モードの状態にしてから「記事の投稿」をクリックすれば、入力内容が反映されるようになります。

最初に通常通り横書きで記事を作成しておいて、投稿直前に縦書き用のタグを書き加えるという方法でもかまいません。この場合、投稿画面をHTML編集モードに切り替えたら、記事の一番最初に

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px; OVERFLOW: auto;">

と書き加え、一番最後に

</DIV>

と書き加えます。この方法ならHTMLの知識はほとんど必要ないので、初心者でも簡単にできると思います。

しかし、この投稿画面の通常編集モードで文章を入力するのは、入力枠も横に細長くて小さいし動作も重いので、縦書きの記事を作成するのに適した作業環境とはいえません。 そこで、この画面で編集作業をする前に、テキストエディタやワープロソフトであらかじめ文章を作成しておいて、それを投稿画面にコピーするようにした方がいいでしょう。

Windows Live Writer というソフトウェアをつかえば、ブログの記事の作成や投稿が簡単にできるようになります。編集画面も広くなり、縦書きの記事の編集も非常に快適になります。このソフトは Windows Live スペース以外のブログサービスでも利用できます。

Windows Live Writer

もちろん、文章を作成するときにも縦書きで書くのがベターです。

テキストエディタなら VerticalEditor がお勧めです。縦書きできるメモ帳のようなものです。

VerticalEditor

私の場合は以下のようにワープロソフトを使っています。もちろん、OpenOffice.org Writer です。

OpenOffice.org Writer

OpenOffice.org Writer で文章を作成した場合には、出来上がった文章を全文コピーして投稿画面の縦書きの編集枠内に貼り付けるだけで記事を作成することもできます。ワープロ文書をHTML形式で保存してから、ソーステキストから本文の部分だけコピーして、HTML編集モードの投稿画面に貼り付けるという方法も便利です。HTMLを勉強して色々試してみてください。


なお、縦書きにする場合には、フォントは等幅フォント(MS ゴシック、MS 明朝など)を指定した方が見栄えが良くなります。プロポーショナルフォント(MS Pゴシック、MS P明朝など)を指定すると、文字のバランスが悪くなって左右に波打ったように見える場合があります。


さらに文章の見栄えを良くするためのヒント

Windows Live スペースで縦書きの記事を作った場合、見栄えに関していくつかの問題点があります。やや高度な内容になってしまいますが、以下のヒントを参考にして見栄えの良い記事を目指してみてください。

文字が左右に波打ってしまうことがある

先ほども書きましたが、縦書きの場合、プロポーショナルフォントが指定されていると文字が左右に波打って汚い文章になってしまうことがあります。この問題を解決する方法は簡単で、縦書きにした文章に等幅フォントを指定するだけです。Windows Live スペースの場合は、投稿画面にあるツールバーの「フォントのスタイル」でフォントの指定ができますが、現時点で選択できる等幅フォントは「MS ゴシック」しかありません。それ以外の等幅フォントを指定したい場合などには、HTML編集モードにして、HTMLのソースを直接書き換えてください。

フォントを何も指定していない場合には、ほとんどの人のパソコン上では自動的にプロポーショナルフォントで表示されてしまうので、できるだけ等幅フォントを指定しておくようにした方がいいでしょう。

ツールバーの「フォントのスタイル」を使用すると、HTMLの記述は以下のようになります。

<FONT face="MS ゴシック">ここに文章を書きます。</FONT>

この"MS ゴシック"という部分を"MS 明朝"などの、好みの等幅フォントに書き換えます。このような変換を手作業でやるのは大変ですが、テキストエディタの一括置換え機能やHTMLエディタなどを使えば効率よく作業ができます。OpenOffice.org WriterをHTMLエディタとして使うこともできます。

上記のような<FONT>タグを使う方法は簡単ですが、色々と問題もあるので、できれば<SPAN>というタグに変えて、スタイルシートでフォントを指定したほうが良いと思います。スタイルシートを使うと、以下のようになります。

<SPAN style="FONT-FAMILY: 'MS ゴシック',monospace;">ここに文章を書きます。</SPAN>

<SPAN>タグは文の一部分だけに指定するためのタグなので、文章全体にフォントを指定するには段落のタグ<P>に上記のようなスタイルを指定してください。ちなみに、アポロ漫録の縦書きの記事では以下のような記述でフォントのスタイルを指定しています。

<P style="FONT-FAMILY: 'NFモトヤアポロ1等幅','HG明朝B','HG行書体','DF細楷書体J','MS 明朝',serif">ここに文章を書きます。</P>

ゴシック体を指定するなら以下のような記述がお勧めです。

<P style="FONT-FAMILY: 'NFモトヤシータ゛1等幅','メイリオ','HGゴシックM','MS ゴシック',monospace;">ここに文章を書きます。</P>

プロポーショナルフォントでも特に気にならない場合には、無理してフォントを指定する必要はありません。

フォントの指定をすると行間が狭くなってしまうことがある

投稿画面のツールバーにある「フォントのスタイル」や「フォントのサイズ」を使用すると行間が狭くなってしまうことがあります。縦書きの場合、行間が狭いと非常に読みにくいので、できるだけ「フォントのスタイル」や「フォントのサイズ」の機能は使わないようにしてください。

(文章の中のいくつかの単語や見出しなどに使う程度なら問題はありません。)

行間をもっと広くしたい

行間を広くするにはスタイルシートを使用して、以下のように段落ごとに行間を指定してください。なお、行全体に「フォントのスタイル」や「フォントのサイズ」を使用すると、以下の行間を広くするスタイルシートも無効になってしまうので気をつけてください。

<P style="LINE-HEIGHT: 2em;">ここに文章を書きます。</P>

上の例では行間の指定を2em(2行分)としています。この数値を変えて好みの行間にしてください。

フォントの指定と合わせて以下のように書くこともできます。

<P style="LINE-HEIGHT: 2em; FONT-FAMILY: 'NFモトヤアポロ1等幅','HG明朝B','HG行書体','DF細楷書体J','MS 明朝',serif">ここに文章を書きます。</P>

文字が小さすぎる

Windows Live スペースの標準の文字サイズは小さすぎる場合があります。その場合には、ブログの「デザイン設定」で、全ての記事の文字サイズを大きめに変更することができます。また、記事ごとに文字のサイズを変えることもできます。文字のサイズは縦書きを指定したタグに FONT-SIZE というスタイルを追加します。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px; OVERFLOW: auto; FONT-SIZE: medium;">ここに文章を書きます。</DIV>

medium なら普通サイズ。大きめにしたいときは large。小さめにしたいときは small と指定します。

文字のサイズに合わせて記事の枠の高さ(HEIGHT)も調節してみてください。

面白いテクニックとして、枠の高さを指定する単位に px ではなく em を使って HEIGHT: 20em; などとすると、1行の文字数が常に固定され、文字のサイズによって枠の高さが変化することになります。文章の表現にこだわりたい人は、色々試してみてください。

記事の周りに余白がない

記事の周りに余白がないので見た目が悪いと感じる場合があります。そのような場合には、以下のように、縦書きのタグの内側に余白を作るための枠を作ります。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 550px; OVERFLOW: auto; FONT-SIZE: medium;">
<DIV style="
MARGIN: 0px; PADDING-TOP: 1em; PADDING-RIGHT: 2em; PADDING-LEFT: 2em; PADDING-BOTTOM: 2em;">
ここに文章を書きます。
</DIV>
</DIV>

PADDING というのが余白の設定になります。上下左右別々に設定します。上の例では、上側(PADDING-TOP)のみ1文字分(1em)の余白とし、左右と下側には2文字分(2em)の余白を空けています。自分でちょうど良いと思う広さに変えてみてください。

下線が左側になってしまう

横書きで下線を引いたものを縦書きにしたときには、文字の右側に線が付いていたほうがよいと思うのですが、Windows Live スペースではなぜか左側に線が付いてしまいます。この問題を解決するには、縦書きの枠に TEXT-UNDERLINE-POSITION という記述を追加します。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px; OVERFLOW: auto; TEXT-UNDERLINE-POSITION: above;">ここに文章を書きます。</DIV>

さらにこだわりたい

段落の1行目の1文字字下げ(TEXT-INDENT)、禁則処理(LINE-BREAK)、均等割付(TEXT-ALIGN)など、整形のためのスタイルを指定することもできます。以下はその一例です。

<DIV style="WRITING-MODE: tb-rl; WIDTH: 100%; HEIGHT: 240px; OVERFLOW: auto; TEXT-UNDERLINE-POSITION: above; TEXT-INDENT: 1.2em; LINE-BREAK: strict; TEXT-ALIGN: justify; TEXT-JUSTIFY: inter-ideograph; TEXT-AUTOSPACE: ideograph-alpha ideograph-numeric ideograph-parenthesis;">ここに文章を書きます。</DIV>

ここまでできればパーフェクトです。ワープロで作成したような「美しい縦書きの文章」を作ることもできるでしょう。

author: アポロ