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

f:id:xxxxkun:20180215080213j:plain

どうもスナ(@morisuna808)です。

テキストを縦書きにしてみました。

 

思いつくままに、その時、心に浮かんだことを書き留めておこうと思い、

このブログとは別に男。散る。共に。で随筆を書いています。

 

ブログは基本的に横書き→の設定になっています。

これを文庫本のように縦書き↓で表示させるカスタマイズ法を紹介します。

 

【第1段〜Eureaka〜から】

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