WordPressや普通のホームページで縦書きが利用できる「涅槃nehan」(ver.4)

【この記事を読むのに必要な時間は約 7 分です。】

GoogleCodeが閉鎖されたためnehan4のスクリプトの置き場所が変わっている。2016.12.04現在の置き場所は以下のサイトを参考にしてほしい。
Google Codeというサービスの閉鎖に伴い、Google Code上に置かれていたソースに直リンする形のテンプレートやプログラムが動かなくなっているようです。 そこで、古いソースをまとめたrepositoryを作りました。 github.com rawgitを使って、CDN化した各バージョンのURLは以下のとおり...
なお、2016.12.04現在「涅槃」はnehan5になっており、nehan3、nehan4、nehan5はそれぞれ互換性がないため、最新の「涅槃」nehan5を使いたい場合は以下のサイトを参考にしてほしい。

anti scrollさんのnehan4のリリースに伴い過去記事を修正の記事を見つけた。
今まで、「涅槃3」(nehan3)を利用していたので、早速バージョンアップしてみた。
日本人の本能のなせる業なのか、縦書きにはついこだわってしまう^^。
ちょこっとつまずいたので、その部分も含め説明したい。

設置方法

基本的には、anti scrollさんのカンタン!縦書きブログの作り方に書いてあるとおり。・・・なのだが無理やり説明する。WordPressならheader.phpに以下のように書き込む。

<head>
	<meta charset="<?php bloginfo('charset'); ?>" />
          (↑この直下!重要)
<!-- 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-book").nehan({
    usePager:true, // falseにするとページャーなしで多段組
    direction:"vert", // 横書きなら "hori"
    fontSize:16,
    width:580,
    height:500,
    rowCount:1, // 2段組がよければ2にする
    colCount:1, // 見開きがよければ2にする
    readerElements:["screen", "pager"], // ページャーを先にしたければ逆順に
    // より軽いページ送りがよければこっち
    //pagerElements:["left-next", "right-prev", "progress"]
    pagerElements:["left-next", "indicator", "right-prev"]
  });
});
</script>
<!-- /nehan4縦書きの組み込み(Jquery本体込み) -->		
          (↓タイトルよりも上です!重要)
	<title><?php wp_title( '|', true, 'right' ); ?></title>

WordPress以外も普通に<head>~</head>の間に書き込む。

最初つまづいたのがこの部分!結局、上にも書いているとおり文字コードセットのすぐ下に記入するのが、間違いない。理由はわからないが、Titleより下の部分に記入すると動作しなかった。なお、この点については、縦書きエンジン「涅槃」について-#2o6asanさんにご教授頂いた。感謝感謝!

使い方

設置はheader.phpだけで終了。
後は、実際に縦書きにしたい部分を以下のように指定するだけ。

<div class="nehan-book" style="display:none">
ここにテキストを色々と書く。
</div>

実際に表示してみるとこんな感じ。

マークアップについて

ルビや段組、見出しなどのマークアップについては縦書き文庫のマークアップヘルプに詳しく説明されている。

その他

WordPressなどで縦書きを利用する場合、サイト全体ではなくカテゴリーに限られたり、1記事であったりすることも多いと思う。
なるべく軽量化してページの表示速度は速い方が良いと思うので、当ブログの過去記事WoerPress 特定のカテゴリーや投稿記事に特定(複数)のHEADER.PHPを割り当てる方法も参考にしてほしい。実際に私はこのやり方で、nehan3とnehan4の解説記事のheader.phpを別々にしている。以上

長くnehan4を利用してきたが、最近はこちらを利用している。縦書きを利用したい方は、参考にしてほしい。WordPressや普通のホームページで縦書きが利用できる「tategaki」

HTMLやCSSでurlを記述する場合「http:」は省略可能
今更ながら気がついたことだが、この記事でも省略されていたw
ちなみに詳細などはこちらを参考にするとよい^^
HTMLやCSSでのプロトコル表記(http:、https:)の省略について

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. […] 去記事で、「nehan3(涅槃)」と「nehan4」を紹介してきた。 WORDPRESSや普通のホームページで縦書きが利用できる「涅槃NEHAN」(VER.4) WORDPRESSや普通のホームページで縦書きが利用できる「涅 […]

  2. […] 実験的に縦書きにしてみました。参考にさせて頂いたのはこちら。 確認した範囲では、iPadやiPhoneでも表示が出来ています。 読みづらい、読めない方は横書き版でご覧下さい。 […]

  3. […] 。nehan4については、WordPressや普通のホームページで縦書きが利用できる「涅槃nehan」(ver.4)をご覧いただきたい。 […]

  4. […] 。nehan4については、WordPressや普通のホームページで縦書きが利用できる「涅槃nehan」(ver.4)をご覧いただきたい。 […]