但如果有人吃飽閒閒想弄一個至少逛起來還算舒服的個站，又沒有任何預算，沒有任何語法基礎，那麼請不用擔心自己這份心是否不自量力，現在的省錢DIY網路教學文很佛心很好用的。
條列本次改版的重點：
- 自適應功能，手機平版電腦都能方便看的網頁
- 預算為零元，對，就是不用花錢
- 中文字是方便閱讀的黑體字
- 文字和圖片作品都能一目瞭然，方便查找和瀏覽
- 訪客想買同人商品的時候不會搞不清楚要去哪買，要去哪看商品介紹資訊
- 國外訪客也看得懂…至少看得懂怎麼買我的東西
- 我分站一堆，噗浪推特微博部落格都有，怎麼讓訪客知道最新的消息公布在哪？
管它版面有沒有設計感看起來舒服好懂就好啦！
當然啦如果我自產的同人圖適合當素材的話，也許有希望搞個美一點的站，但結果就是非常不適合，硬要塞配圖反而會得到一個爬起來非常負擔的版面，尤其是苦了手機或平版瀏覽的訪客。
上回改版的首頁看起來是這樣：
這次改版看起來是這樣(電腦/手機)：
以下針對各項改版訴求做說明：
A. 自適應功能，手機平版電腦都能方便看的網頁
B. 預算為零元，對，就是免費
C. 中文字是方便閱讀的黑體字
這三點可以放在一起講，去年在改版碎念第二彈中比較了幾間較常見的免費架站平台，如Weebly, Squarespace, Wix, Wordpress。我目前還是選Weebly，原因是它的所有套用版型都支援自適應，如果嫌自適應功能太陽春，至少可以自己修改CSS和HTML。
Wix，Squarespace都不能自行修改css，淘汰。
Wordpress若要修改則需要付費，淘汰。
所以當然就只剩Weebly了哎……當然Weebly也不是沒缺點，但它最大的優點就是「光靠免費方案就能做很多事，所以是一個很怕碰到專業架站者的平台」。即便沒有專業等級，光靠修改CSS就可以辦到蠻多偷吃步的事了。(如果網站流量大的話還是建議付費！)
比方說黑體中文的支援。自從跨平台瀏覽概念紅起來之後，中文字的閱讀清晰度成了一個問題，有襯線的字比較不適合放大縮小，結果無襯線字體便取而代之，現在大部份中文網頁都使用黑體字，因為黑體字就是一種無襯線字體。
很多外國架站平台自然是不太care中文字型支援程度，Weebly預設模版基本也不支援，但修改CSS就能輕鬆辦到，甚至還可以自行增加喜歡的Google Fonts，這些字型當然也全部免費。
一般來說在模版的CSS都能找到這行：
font-family: '一些英文字型的名稱', sans-serif(或serif，指向瀏覽器的預設字體);有時font-family會寫作font，sans-serif指瀏覽器的預設無襯線字體，serif指瀏覽器的預設襯線字體。
我個人把這幾行統一修改成：
font: '一些英文字型的名稱', 'LiHei Pro', 'Heiti TC', 'WenQuanYi Zen Hei', 'Microsoft JhengHei', sans-serif(或serif，指向瀏覽器的預設字體);LiHei Pro和Heiti TC是OS系統的黑體中文，WenQuan Yi Zen Hei是Linux系統的黑體中文，Microsoft JhengHei是視窗系統的黑體中文。
至於一般海外非中文語系訪客…因為他們的系統多半不會預先安裝黑體中文，真的就顧不到了。orz
如果你家電腦看我的網頁文字不是黑體，請務必留個言讓我知道> <
D. 文字和圖片作品都能一目瞭然，方便查找和瀏覽
以前流行架個站的時候，大家都會在自家放個「畫廊 / Gallery」吧？
後來噗浪、臉書、推特等等平台紅起來以後，自家就越來越荒廢了對吧？
然後再隔個三五年，突然發現老是找不到自己的舊作，老是忘了自己畫過什麼了對吧？
想說「那好吧我圖片作品就放Pixiv、ArtStation、DeviantART、文字作品就放Lofter行了吧」(只是舉例，上述不是每個站我都用過)，可是歐米訪客不捧場東洋同人，日本訪客不捧場歐米同人，除非具備專業水準不然基本沒人理你的自創，有時候就是想邊放字邊放文，Lofter和Tumblr一樣很不適合放太長篇的內容、用久了發現過季的帖都沒人翻來看，每增加一個分站就增加一堆訊息要一個站一個站去回應……
結果越放越煩啊！
不僅是自己管理很煩，連想找你作品的訪客也很煩！
最後發現，自家裡還是放個懷舊的Gallery最穩定。
花了點時間篩選要怎麼整理過去作品，目前我的Gallery長這樣 (電腦/手機)：
等到真的累積得落落長、可能得分頁放，目前覺得能看的舊作、好像也、沒有很多(反省中)
訴求是讓文字、圖片、分類和發佈時間都能一目瞭然。
至於文字類作品，我掙扎了頗久，一直在想該把內文放在哪裡才容易管理，版面又不至於太醜。我寫文有個習慣就是字量動輒數千起跳。這麼長的篇幅要放在哪裡？
# 放在社群網站(如微博、Lofter、Tumblr)？
一些人為了防盜文還有對岸的河蟹，會把文字轉成圖檔再張貼。但一來讀檔讀得慢，字體放大縮小不方便，發現有錯字改起來很崩潰。我個人不爽因為盜文和河蟹問題因噎廢食，能漂亮呈現的東西就是想大方呈現在網上，加上各種後續麻煩，所以不想採用。
社群網站不適合貼長篇的文，排版格式的限制很多，有的還有字數上限；等到被一堆人轉發出去然後才發現「呃啊我是罕瞑嗎我這段在寫啥」急急想改掉，也是來不及了。總之淘汰。
# 還是開網站分頁？
前幾週我曾經採用直接加開分頁，一頁一篇文，然後發現分頁太多很難管理，淘汰。
# 要不然放在blog(如Blogger或Weebly內建的blog)？
放在blog又有幾個選擇，放我本來就有的Blogger還是開一個Weebly的blog？
Blogger沒有自適應版型，手機版的行距字距都很醜。未來可能會找到解決方法但暫時不採用。Weebly的blog版型支援自適應，文字行距和天地左右留白比Blogger美觀很多，但是預設的版型是滿版，也就是...假設我的電腦螢幕橫寬1920px，扣掉左側分頁導覽區塊，整個文章寬度至少還是超過1500px，實在太寬啦！
於是東拼西湊之下瞎摸出這串CSS語法，目前設定文章寬度最大為750px：
.blog-body {
float: none;
white-space: normal;
width: 100%;
max-width: 750px;
display: block;
}
其中一篇文字作品排版長這樣(電腦/手機)：
看字的時候，清爽很重要！！
題外話，我偷偷放了裡站，雖然可能只有我自己在看(淡淡的哀桑)。
以前在其他部落格平台開過幾個裡站、但是入口不好藏之外，管理上也很麻煩。這次乾脆就一起塞在weebly裡面，入口應該不會很難猜…吧？
有個地方可以盡情撒野還是蠻不錯的(毆)
雖說這年頭大家都直接丟私噗或湯不熱，但總地來說就是不方便回顧！像我這種癡
E. 訪客想買同人商品的時候不會搞不清楚要去哪買，要去哪看商品介紹資訊
我首頁就放了重點商品快速連結(Featured Items)，也有開名叫Shop的分頁，然後首頁的站名底下可以直接連到我在台灣同人誌註冊的社團門口，這樣應該…應該超級好找了吧！
之所以這麼重視商品連結是否夠醒目，是因為逛別人網站的時候…我常常會找不到該在哪裡買作品(吐血)
要不就是找到作品的購買頁面但沒有內容介紹。
要不就是找到作品的內容介紹但是沒辦法直接連到購買頁面。
這麼難找到底是想賣還是不想賣！？
然後猛然一想！我的網站會不會也是給人這種感覺！？
於是從去年開始就花了很多時間一直在想到底要怎麼安排商品頁面。以下是心路歷程：
# 有的人商品排版好漂釀好質感！
去年曾搞得像電影海報非常花俏，然後感到異常負擔(最讓人覺得負擔的是我的排版品味)。如果當做海報來排版、設計元素使用太多圖檔，用手機看會更加地負擔，圖片比例或解析度還可能跑掉。
# 好吧那放棄華麗的視覺效果，看起來一目瞭然、好懂就好！
達成一目瞭然的捷徑是：所有刊物資訊通通放同一頁。
幾年前我是真的這樣幹，BUT！需要的說明文字和該放的連結卻塞不進去。於是去年最後一次改版時開了一個blog，一件商品發一個帖。
但其實blog的版型、拿來宣傳商品不太好看，整體寬度太窄。
# 有沒有更方便更直覺的商品上架方式？
Weebly有內建購物車功能，很陽春，圖片預覽功能尤其難用，雖然管理上比較簡便。
嘗試了幾週，後來還是決定放棄blog、放棄購物車，回頭用最傳統的方案，一件商品一張分頁，自己動手一頁一頁排…但是版面是模仿購物車的排版，簡單直覺容易瀏覽！
以下是我其中一項商品的頁面(電腦/手機)：
所有商品一覽頁面 (電腦/手機)：
F. 國外訪客也看得懂…至少看得懂怎麼買我的東西
我的英文…其實就…鳥鳥的，曾經在大學畢業時幾乎完全荒廢，後來因為萌上歐米遊戲和上網爬資料而慢慢自己學回來。
現在不過就是要搞個「至少能讓外國人看得懂的網站」，真的也沒必要要求太多。
但也可能是因為冷萌圈的粉絲忠誠度高，風度和容忍度都異於常人也說不定(懷疑自己是否被寵壞)
要是看到我哪裡英文很詭異的話真的歡迎指正啦真的。
總之就是從去年開始煩惱、到底要怎麼排網頁才能把中文和英文塞在一起，又不至於眼花潦亂？讓不管是中文或英文語系的訪客都知道自己該往哪裡按下去。不得不說純英文排版真的可以排得很清爽很美觀，但一有中文要顧就完全是另一種境界的難題了orz
難題A / 就算我的網頁雙語化了，本子代售店也不見得有雙語化ㄟ
所以我針對兩間願意將書幫忙寄海外的代售店，搞了兩篇英文教學。
教學A，教學B
難題B / 買到書但看不懂內容是有個屁用嗎
所以我弄了英文翻譯文字檔，購買的訪客只要寫信來要求，我就把文字檔分享給他們。
題外話，在這部份幸運地受到Rynisyou的熱情幫助，讓她幫忙訂正了很多地方！一方面也有種「哇如果就照原樣端出去的話會造成多少人的困擾呢啊哈哈哈」那樣的尷尬心情
但有去做總比沒有去做來得好！如果今天哪個喜歡的日韓作者突然決定要分享作品翻譯文字檔的話我也會感激涕零啊！
難題C / 怎樣讓海外訪客發現我其實有提供購買教學和翻譯檔？
我在每個商品的介紹頁面都有附上連結。連在台灣同人誌上架的介紹頁都附上了。
再找不到的話就只能怪自己的眼睛啦！
而我現在遇到的另一個難題是不曉得要怎麼把刊物感想表單弄得顯眼一點……
(半年只收到一個讀者感想是常態)(拭淚)
G. 我分站一堆，噗浪推特微博部落格都有，怎麼讓訪客知道最新的消息公布在哪？
謝天謝地，有Feedwind這個平台。免費方案最多支援五個站台的RSS！
之前在噗浪有提過Feedwind，總之我把Blogger、噗浪、推特、湯不熱、微博都串連在Feedwind裡，直接從這頁就能同時看到最新的25篇貼文。
壞處是轉貼的文也會分享上來，基本上噗浪轉貼很容易洗掉自己的內容，薄情如我想到的解決方案就是盡量少轉貼別人的帖子…(眾毆)
可是親友的場前宣傳我還是會轉的！
問題a/ 插件的中文不是黑體！
有個小問題是Feedwind並不支援黑體中文字型，必須自行寫CSS套用進去，好消息是Feedwind連這點都貼心地想到了。做法過程示意如下：
a-1. 打開記事本寫一串語法，存檔的副檔名為css。
語法如下：
#fw-container {
font-family: 'LiHei Pro', 'Heiti TC', 'WenQuanYi Zen Hei', 'Microsoft JhengHei, sans-serif;
}
.fw-feed-item-description {
font-family: 'LiHei Pro', 'Heiti TC', 'WenQuanYi Zen Hei', 'Microsoft JhengHei', sans-serif;
}
a-2. 找個網頁平台把css傳上去。
其實可以偷偷放在weebly裡面，做法是進入weebly後台，"Theme"-->"Edit HTML / CSS"-->"ASSET"-->"Uplaod File(s)"
一個免錢平台連這點都能辦到，真的很匪夷所思！
舉例來說，若weebly網址是abc.weebly.com，css檔名是Feedwind.css，那麼這個CSS上傳後的URL就是：
abc.weebly.com/files/theme/Feedwind.css
a-3. 進入Feedwind連結該CSS檔案。
在Feedwind設定頁面的"General"-->"Advanced settings"-->"Custom CSS link"裡填入CSS的位址。然後將整個Feedwind生成的語法貼在自己家，完成！
我的Feedwind插件現在長這樣(電腦/手機)：
第二個問題，Feedwind提供三種呈現方式：Text, Thumbnail, HTML
Text--沒有圖片。
Thumbnail--圖片是縮圖，但只會選出一張，有時候會選到噗浪表情圖片…
HTML--圖文都老老實實地顯示。
照這樣來看當然要選HTML版型，但是圖片會很大張！！
後來我瞎湊了這串CSS，設定圖片最大寬度為350px，最大高度為300px：
img{
display: block;
max-width:350px;
max-height:300px;
width: auto;
height: auto;
}
http://www.url-encode-decode.com/
p.s.s. 舉一反三，Feedwind當然可以支援Google Fonts。舉例來說如果我想要讓它支援Assistant字型，字體重量是400，那麼可以在嵌入的CSS檔裡增加這一串：
@import url(http://fonts.googleapis.com/css?family=Assistant:400);然後再於font-family:後面增加字型名稱'Assistant'即可。(中間記得留一格空白)
H. 其他：返回最上面按鈕(Back to top button)
用電腦看小說還好，但若用手機瀏覽，假如想滑到最上面去按其他分頁，就要滑老半天。
於是現在蠻多blog都會發現站長裝了「返回最上面按鈕」，按一下就能直接彈到最上面去。
我在weebly安裝的按鈕長這樣：
weebly的插件有支援，問題是這插件有點醜。想要個好看的按鈕就得自己寫語法，加上按鈕本身如果是圖檔，在手機上瀏覽還會有被拉大模糊掉的問題。
於是我從這篇教學得到了靈感。也就是使用Font Awesome來做按鈕！
Font Awesome本身是特殊的「字型檔」，所以圖示不管放大縮小都不會模糊掉。
我目前湊出來的語法如下(張貼在後台-->Settings-->SEO-->Footer Code)：
完畢！我真的有很自爽打說明文的癖好，仔細想想可能是因為我閱讀的文字有90%以上都是說明文和教學文吧orz
No comments:
Post a Comment