読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

はてなブログをレスポンシブな縦書きにする

nehan.js responsivook

Responsivookの多段組テーマを使うと、はてなブログをこんな感じでレスポンシブな縦書きにできます。レスポンシブなので、ブラウザのサイズを変えても、自動で対象領域がリサイズします。

日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたって自由のもたらす恵沢けいたくを確保し、政府の行為によって再び戦争の惨禍さんかが起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであって、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基づくものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。

日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであって、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めている国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免れ、平和のうちに生存する権利をすることを確認する。

使い方

次のようにして使います。

Step1

はてなブログの管理画面から「デザイン編集」→「カスタマイズ」→「フッタ」と進み、以下のコードを貼り付けます。

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.7/css/nehan.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.7/dist/nehan.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/tategakibunko/responsivook/v1.2.2/responsivook.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event){
  Responsivook.start(".nehan-vert-dangumi", {
    theme:"dangumi",
    flow:"tb-rl"
  });
});
</script>

Step2

あとはブログの投稿時に、縦書きブログにしたい部分を以下のように囲むだけ。

<div class="nehan-vert-dangumi">
この記事を縦書きにしたい!
</div>

マークアップ

ルビや圏点ほか、さまざまな書式に対応しています。

詳しくはnehan.js demoを参照して下さい。

カスタマイズ

文字サイズ、表示の高さ、フォントを変えるには、上の貼り付けソースの中で、Responsivook.start...の部分を次のように書き換えます。

Responsivook.start(".nehan-vert-dangumi", {
  theme:"dangumi",
  flow:"tb-rl",
  // その他のスタイル
  styles:{
     body:{
        fontSize:16, // 文字サイズ
        fontFamily:"'IPA明朝', 'IPA Mincho', monospace", // フォント  
        height:400,  // 表示の高さ
        // 行末揃えを有効にする(ちょっと重くなる)
        textAlign:"justify" 
     }
   }
});

font-familymonospaceを付けていますが、nehan.jsの都合上これがないと縦書き時にベースラインが揃わないことがあるので注意してください。

なお背景色を変えたい場合は、CSSで変更します。

/* 背景色を白にする */
.responsivook-nehan-wrap{
  background-color:#FFFFFF;
}
/* 変換前のテキストを見せない */
.nehan-vert-dangumi{
  visibility:hidden;
}

はてなブログCSSは「デザイン編集」→「カスタマイズ」→「デザインCSS」から編集できます。

参照

ちなみにResponsivookの最新ソースは以下で取得できます。

https://github.com/tategakibunko/responsivook