はてなブログのテキストを縦書きにする方法

 

はてなブログでは、このテキストのように横書きが基本となっていますが、文庫本のように縦書き設定をする事ができます。

これはサンプル画像なので、ボタンを押しても次の画面に進む事はできませんが、下記で紹介するコードを貼り付けるだけで、縦書きの文章を書く事ができます。

 

【サンプル画像】

f:id:xxxxkun:20180215074111p:plain

 

 

テキストを縦書きにしよう。

 

Step①下記のコードを→【デザイン編集】→【カスタマイズ】→【フッタ】に貼り付けます。

PC・スマホでも同じです。

 

 

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tategakibunko/nehan.js/v5.5.8/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.8/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", {
    theme:"dangumi", // ページ送りなら"book"にする
    flow:"tb-rl"
  });
});
</script>

 

 

Step② 下記のコード内に本文を書く。

 

<div class="nehan-vert">
ここに記事を書く
</div>

 

 その他、カスタマイズは僕が参考にさせて頂いた記事を見てください。

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