ユメウツツ@MimeiTagawa

「縦書き表示」とりあえずのマトメ

 ということで(?)縦書き表示について、とりあえずマトメ。というのも、「縦書き」には興味あるけれど、でも難しそう、という方も多いのでは(あたしがそうだった)と思いまして。


 でも前回書いたように、ただ「縦書き表示」にするのであれば意外に簡単。短いタグ(■1参照)ひとつだけで出来てしまう。ただIEにしか対応していないので他のブラウザでは横書きに。それでも普通に読むことができるから大丈夫。
 で、もし行間とか字間とかにこだわるのであれば、やはりちょっとだけ付け足しが必要(■2)。でもこれも元のスキンはそのままで、投稿画面に書き込むだけなので、さほど面倒ではないはず(一度基本形を作ってしまえば後はコピペすればいいわけだし)。


 なんて偉そうに言ってるけど、実はその辺の細かいテクニックは、すべてアポロさんに教えていただいたのでした。その試行錯誤のようすは、記事のコメント欄に残っておりますので、「縦書き表示」についてお悩みのあなた、一度のぞいてみてくださいね。

*「CSSで縦書き」コメント欄


(↓<>だけ全角になっているので半角に直してコピペしてね)
■1 記事投稿画面にて「縦書き表示」にする基本的なタグ。
<div style="writing-mode: tb-rl;">ここに、いつもと同じように文章を書く</div>

■2 行間や字間の微調整を含んだタグ。
<div style="direction: ltr; writing-mode: tb-rl; line-height: 1.7em; letter-spacing:0px; width: 560px; height: 390px; overflow:auto; padding-right: 1.5em;padding-bottom: 1.5em">ここに文章を書く</div>

line-height は行間、letter-spacigが字間の指定。
widthは文章を書き込むスペースの幅、heightは高さ。
overflowは、文章がスペースより長くなった場合の横スクロール、
paddingは本文と枠のあいだの余白。
↑は、あくまでこのブログにおいての指定数値ですので、それぞれのブログに合わせて、微調整してみてください。(とりあえずこれをコピペして記事を書いてみて、プレビューしながら微調整すると簡単かも)

ちょっと注意点
□フォントサイズはブラウザによって表示のされ方が違うので、あらためてサイズを指定するときは単位をpxにしたほうが良いようです。
□横スクロールがスムーズに動作しないときには、↓のフィルターを挿入すると安定します。(全体に適用すると読みにくくなるので、例えば最後の署名など目立たない部分に)
<p style="filter: dropshadow(color=white,offx=1,offy=1,positive=1); text-align: left;">ミメイ</p>
□縦書きにする場合、英数字は「全角英数固定」で。半角だとそこだけ文字が寝てしまいます。
□縦書きタグで囲った部分だけが縦書きになるので、その前後に文章を書けば、この記事のように、縦書きと横書きが混在する記事を書くこともできます。
□もっと詳しい解説がアポロさんの「ブログに縦書きの記事を投稿する方法」にありますので、ぜひ参考に。

ということで、縦書きに興味のあるブロガーの皆様、モノカキの皆々さま、どうぞお試しアレ。

*上記の記述、最初にアップした時に何ヶ所かミスがありましたが、修正致しました(2/16 16:05) なので、このまま使ってくださって大丈夫だと思います(笑)

[PR]
by mimei14 | 2008-02-16 01:13 | ほんと日記(たまに)