▲ Randy McDaniel, "A Blacksmithing Primer: A Course in Basic and Intermediate Blacksmithing", Dragonfly Enterprises, 2004
文章開始之前要先聲明，本篇文章存粹只是給自己看的備忘，不保證教到會，保證沒什麼重點，甚至只是記下改了哪個tag而已。有興趣的人再繼續閱讀。
 |
▲ 這是原本的版面，順便做個紀念
首先第一個看不順眼的問題就是：為什麼它那麼窄？自從某天玩了玩blogger新推的範本設計工具，就不自量力地覺得找個良辰吉日來調一調就好。沒想到舊的template不支援這新功能；試著硬改html，發現這個版型的左右欄背景圖是連在一起的，要拓寬就非得動用PS不可。懷著對css的美好想像，這個問題也就被擱著了。
但隨著時間一久，想改動的清單越來越長。舊版型的支援性不夠，一堆功能不能好好玩，偏偏又很被虐的喜歡這個版型的質感。最後得出的結論很不怕死：把一個新式版型修成原樣不就得了？於是乎，漫漫長路開跑(實際上花了三天，笑)
Step 1. 更換版型
第一步最簡單，在blogger範本設計工具裡找一個與舊版型最接近而不超過的template換上，看看有什麼是要修改的？)
 |
▲ 選了Awesome Inc.(不太懂這個命名品味)，順道換個文字連結顏色，收工。
Step 2. 重製背景
抽換整個部落格的背景是很簡單，要嘛在範本設計工具裡換，要嘛硬一點去改html。換了之後才發現因為多了導覽列的關係，留白給網誌標題的空間不夠用了。沒辦法還是開了PS自己塗。
body {
font: $(body.font);
color: $(body.text.color);
background: #edf1ec url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPHx9BLX0m1KTZe38Gf0EJiBD6_A22hFPgaw24DIq8DobNb14qowdaKHuSH9_vqEI-itnHxHczxeClJLVkzgOtS9Ovwts4W8MfQtkHDWDda_XQeA03CvPkwRuX9jrywyZZYR8xcm3Xpbu/s1600/backgroundpic-20.jpg) no-repeat center top;
}▲ 順便學點css，受用無窮
換內文(post)與側邊欄(sidebar)的背景就比較厚工一點。起初狂人假想了幾種切圖方式，ex.側邊欄用一張，內文欄用一張邊界圖(假裝是筆記本洞洞的部分)+一張背景(格線，可往左重複貼過去)。胡亂試了許久才發現不另外切版達不到，只好採用最原始的方式：自己接圖做一張寬～寬寬的背景，再動用PS把最左邊邊緣處漸層到白色，省得有人螢幕解析度大得不像話而出現破綻。
另外記錄一下，PS裡面的Filter->Other->Offset功能，大致上可以對應到以前PhotoImpact的「網頁背景設計師」，可以拿來看圖連續貼起來有沒有縫；而Image->Canvas size裡可以拓寬底圖大小。
最後再去把.main-inner加入背景屬性就可以了。
Step 3. 標題位置
其實狂人的網頁設計可以說是弱到爆表，一開始動手的時候花了很多的時間在找相應段落的css選擇器(Selector)到底在哪裡。就算是現在，我也只是把部落格原始碼開出來，看段落的class，一層一層往上找到底在哪裡可以設定某個效果，而且還很容易在code中迷路不知道自己看到哪層div，不知道有沒有人有推薦的方法可以視覺化這個流程呢？
這個步驟把網置標題由靠左推到靠右，找的是.Header h1與.header-inner .Header .descriptionwrapper這兩個selector，加入text-align的屬性。另外要把正文往下推，靠的則是 .header-inner .section把margin-bottom屬性設定好。
.header-inner .section {
margin: 0px 16px 65px;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
text-align: right;
}
▲ 很笨但很實際的方法
Step 4. 移除圓角框
新的版型裡有一個很大的特點，就是同一天的文章會用圓角框框在一起。為了去掉這一塊，狂人從post內文的原始碼一層一層往外找，找到快暈倒了還沒有結果；反向從範本設計工具改個怪顏色來抓也看不太懂哪邊可以刪。這時候，該找外籍兵團了(還好他們不太用C4)。
首先是《0與1謎詭世界》的 Blogger template模板教學課程---CSS外觀解說 ：這篇講的是舊版的版型，很不錯的入門教材，對一般的網頁設計也很有幫助。
再來是《ETBlue 外星人寄居地球》的 圖解：Blogger 新樣板系統的 html 頁面結構 ：這篇花點力氣看懂她的外星邏輯之後反而異常清楚，同時這個部落格也放了一些很有趣的小東西，推薦。
琢磨了一陣之後在.date-outer發現了這輩子沒看過的-moz-border屬性，丟給google大神一拜，馬上找到這東東是拿來設圓角框用的，全部砍掉！。
 |
▲ 好吧其實我還留著pager裡的圓角框，個人覺得框起來很可愛就是。
Step 5. 修改文章 / widget標題
到這邊其實已經長得很像舊版的模板了，還差一些就是。把.sidebar .widget h2跟.main-inner .widget h2.date-header span加上背景屬性，再把字體換個顏色，每篇文章與widget就有標題列的效果了。No sweat！
 |
▲ Google把widget翻「小裝置」這點每次都讓我反應不過來......
Step 6. 修改widget格式
這個改動，用的方法還滿有趣的。起初狂人在原始碼裡面猛找，想要把「關於我」的部分改個背景，卻始終找不到”widget Profile1”這個class的設定放在哪邊。上網搜尋了一下就發現了這篇： 如何美化模板元件的外觀配置 ，這才發現Id與class的差別。知道了這點後，用範本設計工具->進階->新增CSS 卯起來改就好，改動結果還可以即時預覽，Google真是太威了！
 |
▲ 大概就是這樣改，code就不另外貼了
同樣的，Plurk widget與標題相比，偏右的問題也可以一併用此法解掉，margin-left梢做設定即可，帥啊老皮！
剩下還有一個比較複雜的地方：「關於我」的欄腳部分。想了半天最後只得出一個最暴力的解法，直接展開小裝置範本，在html裡面加一塊div class=’widget-footer’，這個footer的部分我再用新增CSS去設定它，讓它顯示腳尾。
 |
▲ 其實到最後就可以發現，網頁設計難就難在你要找到東西在哪邊改！
Step 7. 修改post margin
Id+新增CSS的應用真的是無遠弗屆，第一它不太容易搞錯對象，第二更重要的是可以即時預覽。改完widget，接下來看本文不順眼了：文章的左右離邊線太近，導致有一個字元會跟洞洞重疊到不易閱讀。翻了一下網路，馬上發現一個神奇的解法，也就是在新增CSS中加上：
#Blog1 {
margin-left: 0px;
margin-right: .5em;
}
▲ 如此一來post部分就會出現相應的改變了
Step. 8 浮動寬度
其實做到這個步驟，整個blogger的架構倒也從頭摸到尾摸了幾遍有，背景什麼的也下了功夫PS預留空間，一開始浮動寬度的「希望」反而很容易實現了。加上搜尋得宜，馬上就找到名為Blogger 彈性版面，隨著視窗大小調整寬度 的文章佐以確認改法OK。改動code如下：
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: 80%;
_width: $(content.width);
}
▲ 有點懶了，總之改一點點就可以達到目標
Step 9. 替每篇文章加上日期列
到這邊，其實已經剩下一些小東西要完成而已了。
Blogger有個特性，就是同一天發的文章，只會發給一個日期列，這在有邊框的時候特別明顯。可是對文章量少的人來說，這樣反而少了統一性，很討厭。一開始狂人覺得「啊不就把判斷要不要顯示的dateHeader的
其他網路上大部分的解法都是，寫一個javascipt，把前一篇的日期抓起來，copy-paste到下一篇去。但是這樣的做法看起來就很髒，不好不好。最後由《Blogger Tips》提供了一個滿妙的方法：山不轉路轉，如果post.dateHeader不是人人有，那我何不用個大家都有的東西呢？是的，data:post.timestamp！於是依樣化葫蘆，將
<b:if cond=’data:post.dateHeader’>
<h2 class=’date-header’><data:post.dateHeader/></h2>
</b:if>
改成
<h2 class=’date-header’><data:post.timestamp/></h2>
即可。
Step 10. 加上「有興趣的文章」欄位列
這部分其實網路上已經很多文章了，google 「LinkWithin」就有。比較麻煩的部分是不讓這完意兒佔滿首頁，這邊請參考《睡覺吹泡泡》的 LinkWithin 外掛不顯示在 Blogger 首頁 ，在模版中後嵌入一段javascript，當目前頁面不是首頁的時候才顯示widget。
<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = 改LinkWithin給你的ID;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
</b:if>
▲ 呃......其實我想不到有什麼要貼了，多少當作備份吧
感謝耐著性子看到這邊的看官，一如文章開頭所說的，保證沒有重點，對吧？不過如此一來就算是剛好趕在國曆年前把部落格好好大掃除了一遍，除舊佈新。Anyway，下一篇文章就能夠好好讀了。Enjoy and ...... HAPPY NEW YEAR！
0 意見:
張貼留言