»» 縦書きの文章の書き方

2011年2月1日 | ブログテクニック, ワードプレス | コメントする |

wordpressでの縦書きの文章の書き方です。

 ここに横幅400px、高さ350px、フォントサイズ16で縦書きにしたいテキストを書く

1. 初めに、使用しているテーマのheader.phpに次のスクリプトを記述します。

2. 次に書きたい文章を投稿します。

例)<div class="lp-vertical lp-width-400 lp-height-350 lp-font-size-16">
 ここに横幅400px、高さ350px、フォントサイズ16で縦書きにしたいテキストを書く</div>

すると、書いた文章がなんと縦書きで表示されます。(一旦横書きの文章が表示されます。)
※以上参照:WordPress 記事の文章を縦書きにする

この他に⇒『htmlだけで縦書きを書く方法』もあります。



タグ: , , ,

blogram投票ボタン
左向き矢印 よろしければポチッとな♪


»» 縦書きの文章

2010年5月11日 | ブログテクニック | 4 件のコメント |

ネットの文章は上から、そして左から右への横書きが当たり前になっています。
なぜかと言いますと、PC画面のスキャン方法に合っているということと、OS(オペレーティング・システム)を考えたのがアルファベットを扱う人が開発したからです。

これによって、情報はすべて画面の上からそして左から読み込まれる方式になりました。

日本語だと手紙は縦書きが当たり前でした。今は横書きに書く事も珍しくありません。
しかし、縦書きにして日本語らしく見せたいときもあります。その方法をここにご紹介します。

先ず文章を先に考えます。文字の数は気にしなくてもいいのですが、余り文字数が多いと、他の行とのバランスが良くないので10文字程度とします。

例文が思いつかないので、年賀状を想定しました。

明けまして
おめでとうございます
今年もよろしく
お願い致します
皆様のご多幸を
お祈り申しあげます

以下がその縦書きの表現です

お祈り申しあげます 皆様のご多幸を お願い致します 今年もよろしく おめでとうございます 明けまして

これをそのままタグで表示してみます

  1. <table align="center"><tbody><tr>
  2. <td width="20" align="center" valign="top">
  3. <span style="font-family:'MS 明朝';">
  4. お祈り申しあげます</span>
  5. </td>
  6. <td width="30" align="center" valign="top" padding="15">
  7. <span style="font-family:'MS 明朝';">
  8. 皆様のご多幸を</span>
  9. </td>
  10. <td width="30" align="center" valign="top" padding="15">
  11. <span style="font-family:'MS 明朝';">
  12. お願い致します</span>
  13. </td>
  14. <td width="30" align="center" valign="top" padding="15">
  15. <span style="font-family:'MS 明朝';">
  16. 今年もよろしく</span>
  17. </td>
  18. <td width="30" align="center" valign="top" padding="15">
  19. <span style="font-family:'MS 明朝';">
  20. おめでとうございます</span>
  21. </td>
  22. <td width="30" align="center" valign="top" padding="15">
  23. <span style="font-family:'MS 明朝';">
  24. 明けまして</span>
  25. </td>
  26. </tr></tbody></table>

※注意点:
文字の大きさが<td>で指定したwidth(横幅)の半分以下の大きさにすると(ここでは20pxの半分10px以下)二文字が横に並んでしまいます。
この場合、td widthで指定した横幅の半分の大きさの余白をpaddingで指定してあげれば綺麗に1行で表示されるようです。
確実に行間を文字の大きさの2倍以上にしたい時には、一文字ずつ<br />で改行しなくてはいけないので、かなり面倒になります。



タグ: , ,

blogram投票ボタン
左向き矢印 よろしければポチッとな♪




このページの先頭へ⇑

  • BBFujiロゴ RSS コメントRSS
  • 背景チェンジ
    色んな富士山画像が楽しめます♪
  • エントリー

    blogram投票ボタン
    ランキングバナーはやめました。blogramなら、アマゾンギフト券ももらえますよ♪
  • Auther:Fujichan
    ↓Click me!
    アイコンfujichan→「風を感じて」
    民放TVカメラマン記者を経て、ITコンテンツ制作会社「BBFuji」を設立。
    音楽を愛し、ガンコながらも涙もろい人情派! ・・・と自分では思ってます。
    ご意見、ご感想をどうぞ!
  • おきてがみ

  • おすすめコーナー

  • おすすめリンク

  • オススメBGM

  • アメイジングコンテンツ

    五目並べ オセロ おみくじ
  • Community parts

    ツイッター
    blogram
    ブログランキング
  • タグクラウド