2018年03月06日 23時00分ピックアップ

「チャリダーマン自転車旅行男・世界を走る」上巻・下巻のKindle版での表示を改善することに成功

「内容は5つ星だが、説明文と画像が別のページに表示されて不便」と指摘された点をAmazonのKindle版で全面的に改善しました。

問題となっていたのは以下のようなページ。書籍は主に「説明文＋写真」で構成されているのですが、端末の解像度の問題で「モロッコの1リットルサイズはお買い得。」という文章のみがページ下部に表示され、本来は直下に表示されるべき画像が消えています。

消えた画像は次のページに回されてしまっています。原因は何かというと、印刷前提の固定レイアウトではなく、電子書籍ならではの「リフロー型」で作成したため。フォントの種類や大きさなどを、各読者の持っている端末の大きさや解像度に合わせて自由に設定できるというメリットがあるのですが、今回の場合、端末と解像度の組み合わせによっては、画像がページに入りきらずに途切れてしまうという事例が多発。

本来であればリフロー型なので各読者が見やすいように設定すればいいのですが、初期設定でもうまく表示できる方法がないかどうか模索することにしました。いろいろ試した結果、「説明文＋写真」でなんとか1ページにすることに成功。

まず以下のように「div class="group"」と指定しました。

次に「説明文と写真のグループの後は改ページをする」ため、「文と画像が離れない」という意味で「page-break-inside: avoid」を使っていたのですが、「【CSS】「page-break-inside: avoid」が効かない – 下っ端の落書き帳」で触れられているような感じとなり、Kindle上では期待したとおりの表示になりませんでした。そのため、最終的には下記のように「page-break-after: always」とすることで、ほとんどのページで読みやすくすることに成功しました。

既に旧バージョンをダウンロードしていた場合、以下の手順で最新版に更新できます。

ブラウザからAmazonにログインし、「アカウント＆リスト」の「コンテンツと端末の管理」をクリック。

「設定」をクリック

「自動書籍更新」をクリックして展開します。

以下の赤枠部分をクリックして「オン」になっていれば自動更新設定が完了。

読みやすくなった「チャリダーマン自転車旅行男・世界を走る」はAmazonにて販売中です。無料キャンペーンは終了しましたが、Kindle Unlimitedではいつでも無料で読むことができます。既にAmazonにレビューいただいた読者の方で、「内容はいいけど編集が悪い」と低評価した方は、これを機会にレビューをリライトしていただけると幸いです。今後も、「この端末ではここの表示がおかしい」などの苦情や、「このHTML指定のほうが楽」のようなタレコミなどありましたら、こちらからお願いします。

チャリダーマン自転車旅行男・世界を走る　上巻 (GIGAZINE) | 周藤卓也, GIGAZINE | 海外旅行 | Kindleストア | Amazon