文章を縦書きで表示 ホームページ 制作 運営 相談

無料メール相談 ホームページ制作運営相談室

業者選びのポイントSEO対策についてよくある質問サービス内容会社概要

トップページ >> 文章を縦書きで表示

文章を縦書きで表示

2013年11月08日

文章を書いていくとどうしても縦書きで表現したいことってありますよね。
そんなときはこちらをご利用ください。

ワードプレスであれば、header.phpに以下の部分を追加するだけです

<!-- nehan4縦書きの組み込み(Jquery本体込み) -->
<link charset="utf-8" rel="stylesheet" type="text/css" href="//nehan.googlecode.com/hg/nehan4.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="//nehan.googlecode.com/hg/jquery.nehan.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript"
 src="//nehan.googlecode.com/hg/nehan4.min.js"></script>
<script charset="utf-8" type="text/javascript"
 src="//nehan.googlecode.com/hg/jquery.nehan.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".nehan-blog").nehan({
    direction:"vert", // 横書きなら "hori"
    usePager:true, //falseにすると他段階で表示
    fontSize:16, //文字のサイズ
    //width:600, // 設定しない場合は記事の横幅をそのまま使う
    height:600
  });
});
</script>

こちらはnehanというjQueryを利用して縦書きにするものです。

注意点としてはの直下で、<meta charset="<?php bloginfo('charset'); ?>" />
なおかつ、<title>よりも上に記入することです。

ここさえ間違えなければ導入は簡単にできます。

あとは縦書きにしたいところで

<div style="display:none">
縦書きにしたいテキストをここに入れる。
</div>

と囲えば完成です。

太文字や斜線などを使いたい場合はこちらをご覧ください