ひまつぶし雑記帖

doncha.net制作・発行:KindleやiBooks、楽天kobo、BOOK☆WALKERで読む電子書籍

ブログの立ち読みサンプルを縦書き段組にする

2016/2/15 [19:21:23] (月) 天気

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

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

百聞は一見に如かず。

「はてな」
http://t2akii.hatenablog.com/entry/2016/02/15/182240
image

「HTML直書きのサンプルページ」
http://sandbox.doncha.net/sample-tategumi.html


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

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

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

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

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

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

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

image
赤い部分
<p id="sample-tategumi" data-cols="28" data-lines="20">
のように編集。
・data-colsは一行の字数
・data-linesは一カラムの行数

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

image

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

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


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

»電子書籍制作代行についてはこちら

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2019/5>>
   1234
567891011
12131415161718
19202122232425
262728293031

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』