縦書きブログをつくる。

PC版へ 2009年10月28日

さてさて、せっかく「縦書きWebページ作成スクリプト」というものを作ってみたので、有効活用してみましょう。本文が縦書き表示のブログを立ち上げてみた。まずは見ておくんなさい。

　　→ 階段百物語

...まぁタイトルは最底辺レベルの駄洒落ですが(笑)、内容は要するに「階段マニア垂涎の階段写真アーカイブ」でございます。とりあえずブログの内容が云々というよりも「本文が綺麗な縦書きである」というのは結構なインパクトになるのではないかと。おそらく大抵の新しいブラウザでは綺麗にレイアウトされているはずなので、ちょっと見てみてくださいな。

試してみた範囲では、

FireFox 3
Internet Explorer 8
Opera 9
Safari 3
OmniWeb 5

...の各ブラウザで、無事に縦書き表示が出来ているようです。

縦書きブログを書くのは、そんなに面倒な作業ではありません。そりゃ普通にこうやって横書きで文章を書くのと比べたら煩雑ですが、縦書きを実現する方法を簡単にまとめると、

縦書き用のスタイルシートを準備する。→ スタイルシートはこちらで紹介しています
縦書き変換スクリプトで、縦書き用のhtmlを生成する。→変換スクリプトはこちら
ブログの編集画面(編集はhtmlモードで)に、生成した縦書きhtmlコードを貼り付ける。

基本はこれだけ。HowToページでスタイルシートの利用方法などなどを説明していますので、参照してみてください。

あとは縦書きブロックの表示位置の指定などなど、htmlとスタイルシートの知識が少しだけ必要かもしれません。実はこの「表示位置指定」が割と面倒なのですが、そんなものは根気と慣れです(笑。

スタイルシートの適用のみで縦書きレイアウトを実現しているので、ブラウザによって表示が変わってしまう可能性は、まずありません。画像やFlashで縦書き文章を表示するのも、ちょっと反則っぽいしなぁ...と考えている方は、いちど試してみませんか。

ということで。