Kindleの無料サンプルを縦書き段組にして表示するというのをやってみて、ついでに、「はてな」などのブログ記事掲載のサンプルを縦書き段組にしてみた。

CSS3のマルチカラムは縦書きの段組には(現状)使えないので、段組の一カラムずつの塊を返す（レイアウトデザインを崩さずコントロールするためにはこの方法しかなさそうだ）

百聞は一見に如かず。

「はてな」

http://t2akii.hatenablog.com/entry/2016/02/15/182240

「HTML直書きのサンプルページ」

http://sandbox.doncha.net/sample-tategumi.html

「はてな」を例にしてみると。

その1。

ブログ記事を「編集 見たまま」で作成する。

その2。

表示させたい立ち読みサンプルを、テキストエディタ(sakuraやxyzzy、秀丸、miやcoteditorなどなど)で開いて、コピー。

その3。

「編集 見たまま」で、立ち読みサンプルをペーストする。

そうしたら「HTML編集」に切り替える。

赤い部分がコピペした立ち読みサンプル部分。

その4。

このコピペした立ち読みサンプルの冒頭の「＜p＞　神さまに会いに行く」の「＜ｐ＞」の部分に「HTML編集」の状態で以下を記入する

 id="sample-tategumi" data-cols="28" data-lines="20"

赤い部分

のように編集。

・data-colsは一行の字数

・data-linesは一カラムの行数

その5。

以下のコードを立ち読みサンプルの下あたりに貼り付け。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://sandbox.doncha.net/sample-tategumi.js"></script>
<script type="text/javascript">sampleTategumi()；</script>

HTMLに書きこまれたテキストを縦書きにするだけなので、立ち読みテキストがグーグルさまなどの検索エンジンにちゃんと拾われるのもお得な感じになった、かも。

HTML的なことをいうと。

idがsample-tategumiの要素の中のテキストを縦書き段組にするので、pタグだけじゃなくてdivタグなんかでもOK。

…にしても、wordpressもはてなも、CMSってのは余計なお世話が多いなあ。

[更新]2026-02-01 09:11:43