部落格美化教學～背景圖片篇

延續上一次的教學，這一篇要教大家的是在blogger的模板中加入背景圖案．
↑嚴肅．．．咳，有點不習慣．．．

背景圖片分成兩種，一種是由一張小圖片不斷的重複來填滿整個背景；或用一大張圖片直接填滿．

這裡我用來做示範的是blogger模板的基本款－Minima，有些code可能會跟你想改的模板有出入，不過差別不會太大的啦，自己看著辦　←其實是很懶惰解釋太多 |||

先給大家看一看還沒經過任何修改的樣子．


重複圖片背景的做法
♥　當然是先找適合的圖片　|||
♥　把想要用的圖片上傳（upload）到網上．可以考慮使用photobucket之類的東西，不過建議選擇穩定一點的，不然會導致很多不堪設想的事件（比如照片全部變成叉燒包之類的　囧）
♥　拿到圖片網址過後，在編輯模板的html中找下列的程式碼．
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
然後在background:$bgcolor 之後，加入URL(圖片網址) repeat，變成
body {
background:$bgcolor URL(圖片網址)repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

成果(借用妹妹的背景圖案來做例子=____=)



不重複圖片背景的做法
跟重複圖片的做法一樣，只不過，要在URL(圖片網址)後面的部分改成no-repeat
完成後，如下
body {
background:$bgcolor URL(圖片網址) no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
不過，no-repeat並不會讓你的背景圖片出現在整個部落格的正中央的位置，而是會像在下面的screenshot一樣，粘在左上角．



設定背景圖片的位置
如果你希望圖片可以保持在正中央的位置，就要在body{ }裡面加上background-position:x y;
x=由左到右的距離，y=由上到下的距離，而50則是設定成中間的%率
所以讓背景圖片保持在正中央的代碼為 background-position:50% 0%;
＊畢竟我不知道你的模板／圖片是怎樣的，如果還是有差距的話，請自行修改％直到成功為止．
＊記得x跟y之間要空一格

修改後的程式碼應該是像下面這樣子的
body {
background:$bgcolor url(圖片網址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
成果(Hello Hello Kitty~~|||)



控制背景图片是否會滚动
很多時候，背景圖片的長度很少可以跟你整個部落格的長度媲美，所以，為了讓整體更美觀，你可以鎖定背景圖片，讓它不會在你滾動頁面的時候也滾掉了．

所需要做的就是在body{}之中加入 background-attachment:fixed;
修改後的程式碼如下
body {
background:$bgcolor url(圖片網址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

完成後，你的背景圖片就會乖乖的待在原地，不跟著你一起亂動了．




～～～小教學～～～
* no-repeat　= 完全不會重複
* repeat　 = 橫向+直向重複
* repeat-x　= 橫向重複
* repeat-y　= 直向重複

橫向(x)的指令←應該是這樣稱呼 =___=
* left　　= 圖片從最左邊開始
* center　= 圖片從中間開始
* right　 = 圖片從右邊開始

直向(y)的指令
* top　　= 圖片從最高處開始
* center　= 圖片從中間開始
* bottom = 圖片從最低開始


我不知道你们看的时候会不会很乱，如果有不明白的地方尽管问吧～
希望這一篇可以幫到想替自己的部落格穿衣服的人


後記：夏娃破紀錄了，這一篇教學足足寫了三個小時!!!!!!
他X的累!!!

部落格美化教學～配色篇

時常都會有人問我："你的部落格怎麼設計的啊？"之類的，而我又很懶惰一個一個回答，所以很早的時候就已經醞釀了寫教學這個想法．

但是因為我太懶，所以擱置到現在．

其實，對於那些code我也只是半桶水而已，未來跟大家分享的教學會是我在各處蒐集來的資料．如果你們用了發生什麼問題，不要把我鏟上天花板，因為我也不知道為什麼←企圖逃避責任ing．

其實要弄好部落格的版面不是單靠一大堆程式碼就可以的了，你還要有照顧很多方面（例如，顏色，字體大小／間隔，区塊之間的比例．．．云云），才可以達到整體美化的效果．

所以第一篇先從最基本的配色開始，讓大家有個概念后比較好辦事 |||．

背景顏色和字體顏色
♥淺色背景，深色字
這種配色法是最舒服，最讓人容易閱讀，也最容易達到整體性的做法．不過要注意的是選擇淺色的時候，不要挑選到一些看起來髒髒的顏色，那樣的話會讓你的部落格顯得很沒生氣．

同樣是淺紫色，但是一號卻比二號看起來"乾淨"多了．
不要小看這一點點的差別ㄛ，當你的部落格背景顏色都被它們佔滿后，你就會知道差別在哪裡．
但是，如果帶點灰沉的感覺正是你要呈現的，當然鼓勵使用．

♥深色背景，淺色字
老實說，我不推薦這個．不是因為這樣的配色很醜，而是因為很刺眼．尤其是搭配在一篇幾百字的文章上，看的時候眼睛很不舒服．
但如果你堅持要這樣的配色，夏娃老師(=__=|||)給的建議是避免全黑或全白．因為全黑會讓你整個部落格看起來很沉重．而全白的字體會很刺眼，可以試試看奶白色或灰白色，或其他．

其實，不管怎樣搶救，這種類型的配色都是很刺眼的|||

♥深色背景+深色字／淺色背景+淺色字
兩個字－難看
醜陋的那種難看+很難看到的那種難看．
沒有人喜歡用highlight來閱讀部落格的，除非他變態．

♥顏色的整體性
簡單來說就是不要撞色．如果你對自己的審美觀沒信心怕出錯的話，保險的做法是全部使用同一色系．
最直接簡單的例子，就是我的部落格，全部都是粉紅色系．如果你喜歡藍色就藍色系，黃色就黃色系，青色就青色系．．．以此類推．
但如果你沒有很迷戀一個顏色，或者你不喜歡同一色系的搭配，當然可以使用不同的色系來設計，不同色系的搭配也可以很漂亮的，就看你的審美可以去到什麼地步．

如果你還是不會，又或者你的眼光太藝術 |||，建議到這個網站．

♥有背景圖片
如果你想用背景圖片的話，記得不要選太複雜的，不要放那些閃閃發亮的東東，也不要亂加一些有的沒的，不然只會讓閱讀你文章的人感到眼睛疲勞．

↑複雜　　　　　　　　　　　↑閃亮
難看到爆啊=___=
建議選擇淡色而且簡單的圖案．
可以參考這個（順便打廣告 |||）：❤:❣番茄の屋❣:❤

如果非要用那些複雜到不行的背景的話，建議加多一層半透明的background在你的文章後面．
至於怎麼加，下次再教，因為我打字打到很悶了．

希望可以幫到想改善自己部落格的朋友．而且，我寫這教學最大的願望是大家的部落格都可以漂漂亮亮，造福各位的眼睛，順便幫自己積一點陰德．

小語：原來寫教學這麼累的，雞蛋糕|||