【教學】利用Vivliostyle讓網頁內容變成電子書形式

記得在八月的時候在粉絲團曾經分享過一本用CSS排版的日文同人誌電子書。從那時候購入後,今天才想說來仔細一看,才剛開始就挖到一個寶-Vivliostyle。


這本書雖然看起來很像同人誌的小本子,如果以為技術含量不高就錯了,其實還真的是有很多技術成分在,只有封面有同人CG,內頁一個也沒有啊⋯⋯

總之不要離題了,在這本書的開頭就介紹了一個Vivliostyle的Chrome套件,這個Vivliostyle.js主要就是提供將網頁內容轉換成電子書翻頁的UI介面。這意味什麼呢?就是如同這本書的用意,當你會用CSS去做網頁上的編排,那麼透過Vivliostyle的轉換,就可以免輸出ePub、免電子書閱讀器就能看擁有電子書UI介面的內容了。

那麼下面就來分享一下這個套件的使用方式。首先用Chrome瀏覽器連上 https://chrome.google.com/webstore/detail/vivliostyle/ffeiildjegeigkbobbakjjmfeacadbne 這個網址去安裝Vivliostyle。

安裝好之後,開啟要看的網頁內容,然後從右上方的工具圖示按下Vivliostyle圖示,會有一個視窗設定畫面,可以用來啟用電子書閱讀介面、顯示跨頁功能。

啟用之後就會像下面這樣:

這時候要看內容就要左右翻頁、每頁的下方還會自動生成頁碼,就是簡單的電子書UI介面。

Vivliostyle除了將內容轉換為電子書介面外,還提供直接列印PDF功能,哇!那不就是電子書直接輸出成紙本書的概念了?不過這個功能需要付費,但是在這本書籍的最後有提到如何自製腳本來輸出PDF,真是超貼心的啊~

總之如果你對CSS排版有興趣、並想要將之拿來做為電子書製作的主要工具的話,可以試試這個功能,也可以去購買這本書來看,雖然是日文的,但是因為有提供網頁版與PDF版內容,所以可以用Google大神翻譯就免除了日文看不懂的窘境,而且才300日圓,真是超佛心得~

本文作者:火星頑童


大家對網站文章上的一個讚、+1及轉分享,都是對我們的最好的鼓勵及繼續下去的原動力,請大家不要吝嗇。