浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:13 AM
Sat, Aug 2, 2025 3:34 AM
28
4
【零基礎也會ㄉ電子書製檔分享】
之前我自己喬到崩潰時有許願過，如果我這樣都能搞出自己想要的EPUB，那就發文公開分享我用的方式，所以現在來向宇宙還債ㄌ
本文會提到幾個部分：
利用Wordtoepub轉檔後的css調整分享
如何在此基礎上調整出版式封面
讀墨後台能接受的註解方式
電子書製檔
自出版
EPUB
讀墨
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:16 AM
Sat, Aug 2, 2025 3:47 AM
前言，我最早參考的是石頭書的這篇，感謝大大無私分享！
epub電子書製作教學：讓你用word或writer將檔案變成epub檔，且全程免費
工具下載處：
WordToEpub
|
Sigil
|
epub checker
跟著這篇做出來就會是能用的基本款（？）了。
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:18 AM
Sat, Aug 2, 2025 3:37 AM
只要word文件本身做好章節階層，再如文中步驟利用wordtoepub軟體+sigil編輯電子書檔案（包含章節目錄重整、css排版調整兩部分），基本上就能做出
橫排的流式檔案
，也能通過讀墨後台的檢測，並且適用一鍵轉直行的功能。
第一部分：在這邊分享我自己目前用的css數值：
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:19 AM
Sat, Aug 2, 2025 4:47 AM
239行：
（章節階層1大標題的排版數值）
font-size:1.7em
line-height:1.2em
margin-top:0em
margin-bottom:2.0em
259行：
（章節階層2的排版數值，小標題）
font-size:1.2em
line-height:1.2em
margin-top:0em
margin-bottom:2.0em
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:19 AM
Sat, Aug 2, 2025 4:47 AM
315行：
（相當於內文首行縮排幾個字元）
text-indent:2em
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:21 AM
Sat, Aug 2, 2025 3:30 AM
第二部分：在此基礎下的版式封面調整
由於我常常會請繪師畫美封面，但直接轉檔出來的epub檔用讀墨網頁版閱讀的話，圖往往都會被裁到，所以我就一直很想弄個版式封面。
像這樣乾乾淨淨一張圖被完整呈現！完美！
廢話不多說，這邊為了版式封面修改epub參照的是讀墨官方出的這本：
Readmoo讀墨 電子書製作準則 - 群傳媒 | Readmoo 讀墨電子書
這本的4.1、4.2章有講封面尺寸規格、如何正確定義等的參考
不過我也懶得打開再複習一次了，總之我試出來可用ㄉ是這樣，分為三大部分：
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:23 AM
Sat, Aug 2, 2025 3:24 AM
【①正確定義 xhtml】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns:epub="
http://www.idpf.org/...
xml:lang="zh-TW" lang="zh-TW">
<head>
<meta charset="UTF-8"/>
<title>你的書名</title>
<link rel="stylesheet" type="text/css" href="../Styles/Titlepage.css"/>
（★這部分跟轉檔出來ㄉ差不多，我就不動它）
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:24 AM
<meta name="viewport"
（★重要，必須加上去）
content="width=device-width, height=device-height"/>
（★重要，必須加上去，就是讓它符合閱讀器尺寸）
</head>
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:24 AM
<body>
（★以下就對照著改，然後記得刪掉原本的role，不然會有衝突，以及轉檔出來的img那行要改成image不要眼瞎）
<div class="main">
<svg xmlns="
http://www.w3.org/...
version="1.1" xmlns:xlink="
http://www.w3.org/...
width="100%" height="100%" viewBox="0 0 1400 1964">
<image width="1400" height="1964" xlink:href="../media/cover.jpg"/>
</svg>
</div>
</body>
</html>
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:25 AM
貼在噗浪會有些被吃掉，可以直接複製噗文看，或是參照我的這份範例：
版式封面HTML範例：以《花時早》為例 (Plurk Paste)
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:25 AM
【②正確定義 css】
找到body {
撤換成以下參數：
margin: 0;
padding: 0;
font-size: 0;
font-size: 100%;
line-height: 1.5em;
（★重要，不然你的內文會全部塌在一起）
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:26 AM
margin-left: 0em;
margin-right: 0em;
padding: 0;
widows: 0;
orphans: 0;
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:26 AM
Sat, Aug 2, 2025 3:38 AM
然後找到svg {
貼上這兩個：
margin: 0;
padding: 0;
最後記得加上}，然後不要手殘打成兩個
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:27 AM
【③正確定義 opf】
不知道為什麼這部分貼上後容易跳行，要反覆檢查。
總之：
找到<manifest>
<item id="Cover.xhtml" href="Text/Cover.xhtml" media-type="application/xhtml+xml" properties="svg"/>
（★其他轉檔就都有ㄌ只要加入properties這段）
然後找到<spine>
<itemref idref="Cover.xhtml" properties="rendition:layout-pre-paginated rendition:spread-none rendition: page-spread-center"/>
（★也是只要加入properties這段）
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:27 AM
這樣就有版式封面了！不過為了跳轉順利，最好還要在nav那邊加一個封面頁，這部分對照其他頁面的格式複製一下改成cover.xhtml、封面就有ㄌ，我就沒有特別複製下來了。
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:28 AM
Sat, Aug 2, 2025 3:39 AM
第三部分：word檔裡有註解，轉檔後要怎麼改成讀墨能接受的格式？
我本來也以為轉檔之後直接就能使用，結果發現讀墨好像不支援轉檔後的格式，不過改起來蠻簡單的，也是在製作說明那本「7.1.2 註釋」裡有：
內文裡要出現[1]的地方，基本格式是以下這樣，直接插入轉檔後的內文HTML中就行了：
<a href="#fnX-1" id="fX-1">[1]</a>
然後以此類推，註解2就是把這裡的三個1都改成2。
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:28 AM
至於註解內容，則是在底部的相應區域加上：
<div id="fnX-1"><p>你的註解內容</p><a href="#fX-1">⤴</a></div>
轉檔出來的註解那區都可以刪掉直接貼，唯二不能刪的就是頭尾的<section></section>，以及<hr />，這東西好像是分隔線。
就這樣，蠻簡單ㄉ，最後用EPUBCHECKER確認沒有錯誤，基本上就沒問題惹。
浮光鳳火雙開。泠夏
@lingshia
Sat, Aug 2, 2025 3:32 AM
Sat, Aug 2, 2025 4:02 AM
最後，因為我全部都是自己胡搞瞎搞弄出來的，
為了把花在封面圖上的錢省回來只好自己學製檔，我也是很拚了，
但還是多少有點知其然不知其所以然，只是弄出來檔案還能跑就分享了。
雖然也不知道會不會有人需要，不過這是我摸索出來的全部了，希望它能幫上忙
這噗就鎖著給需要的人海巡，有其他問題可以私噗我
但我大概也解決不了太複雜的
浮光鳳火雙開。泠夏
@lingshia
Wed, Aug 13, 2025 1:07 PM
Wed, Aug 13, 2025 1:08 PM
※補充※
最近發現就算是上傳WORD讓讀墨幫忙轉檔，開書第一頁時也會有版式封面的效果了，讀墨又升級了呢
那我研究這些有何用
大概像這樣。
總之讀墨的功能真的很齊全喔大家
載入新的回覆
之前我自己喬到崩潰時有許願過，如果我這樣都能搞出自己想要的EPUB，那就發文公開分享我用的方式，所以現在來向宇宙還債ㄌ
本文會提到幾個部分：
電子書製檔 自出版 EPUB 讀墨
跟著這篇做出來就會是能用的基本款（？）了。
font-size:1.7em
line-height:1.2em
margin-top:0em
margin-bottom:2.0em
259行：（章節階層2的排版數值，小標題）
font-size:1.2em
line-height:1.2em
margin-top:0em
margin-bottom:2.0em
text-indent:2em
由於我常常會請繪師畫美封面，但直接轉檔出來的epub檔用讀墨網頁版閱讀的話，圖往往都會被裁到，所以我就一直很想弄個版式封面。
像這樣乾乾淨淨一張圖被完整呈現！完美！
廢話不多說，這邊為了版式封面修改epub參照的是讀墨官方出的這本：
不過我也懶得打開再複習一次了，總之我試出來可用ㄉ是這樣，分為三大部分：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns:epub="http://www.idpf.org/... xml:lang="zh-TW" lang="zh-TW">
<head>
<meta charset="UTF-8"/>
<title>你的書名</title>
<link rel="stylesheet" type="text/css" href="../Styles/Titlepage.css"/>
（★這部分跟轉檔出來ㄉ差不多，我就不動它）
content="width=device-width, height=device-height"/>（★重要，必須加上去，就是讓它符合閱讀器尺寸）
</head>
<div class="main">
<svg xmlns="http://www.w3.org/... version="1.1" xmlns:xlink="http://www.w3.org/... width="100%" height="100%" viewBox="0 0 1400 1964">
<image width="1400" height="1964" xlink:href="../media/cover.jpg"/>
</svg>
</div>
</body>
</html>
版式封面HTML範例：以《花時早》為例 (Plurk Paste)
找到body {
撤換成以下參數：
margin: 0;
padding: 0;
font-size: 0;
font-size: 100%;
line-height: 1.5em;（★重要，不然你的內文會全部塌在一起）
margin-right: 0em;
padding: 0;
widows: 0;
orphans: 0;
貼上這兩個：
margin: 0;
padding: 0;
最後記得加上}，然後不要手殘打成兩個
不知道為什麼這部分貼上後容易跳行，要反覆檢查。
總之：
找到<manifest>
<item id="Cover.xhtml" href="Text/Cover.xhtml" media-type="application/xhtml+xml" properties="svg"/>（★其他轉檔就都有ㄌ只要加入properties這段）
然後找到<spine>
<itemref idref="Cover.xhtml" properties="rendition:layout-pre-paginated rendition:spread-none rendition: page-spread-center"/>（★也是只要加入properties這段）
我本來也以為轉檔之後直接就能使用，結果發現讀墨好像不支援轉檔後的格式，不過改起來蠻簡單的，也是在製作說明那本「7.1.2 註釋」裡有：
內文裡要出現[1]的地方，基本格式是以下這樣，直接插入轉檔後的內文HTML中就行了：
<a href="#fnX-1" id="fX-1">[1]</a>
然後以此類推，註解2就是把這裡的三個1都改成2。
<div id="fnX-1"><p>你的註解內容</p><a href="#fX-1">⤴</a></div>
轉檔出來的註解那區都可以刪掉直接貼，唯二不能刪的就是頭尾的<section></section>，以及<hr />，這東西好像是分隔線。
就這樣，蠻簡單ㄉ，最後用EPUBCHECKER確認沒有錯誤，基本上就沒問題惹。
為了把花在封面圖上的錢省回來只好自己學製檔，我也是很拚了，但還是多少有點知其然不知其所以然，只是弄出來檔案還能跑就分享了。雖然也不知道會不會有人需要，不過這是我摸索出來的全部了，希望它能幫上忙
這噗就鎖著給需要的人海巡，有其他問題可以私噗我
但我大概也解決不了太複雜的最近發現就算是上傳WORD讓讀墨幫忙轉檔，開書第一頁時也會有版式封面的效果了，讀墨又升級了呢
那我研究這些有何用大概像這樣。
總之讀墨的功能真的很齊全喔大家