各位貴安
相信大家都有自己理想的小屋樣子吧，但點開"小屋背景設置"後，想來製作自己的小屋時，卻一頭霧水不知從何下手。
沒關係，我剛開始做的時候也是不知從何下手，不過在經過好幾天的大量爬文跟不要臉的死纏爛打問人後，終於也做出屬於自己的小屋背景啦！
這真的是多虧了那些教學文章，我才敢踏出第一步去做；所以今天我也想來分享一些最基本的小知識來幫助想製作自己小屋背景的新手們!
首先呢，布置自己的小屋分成兩個區塊；小屋布景是外觀上的調整，區塊設定則是功能列的新增刪除。
區塊設定這邊設定很簡單，他決定你想要顯示哪些區域，擺的順序等等，比如你可以決定你的訪客留言要擺在左邊，還是右邊，甚至是刪除都沒問題。
基本上親自操作一次就能了解整個流程，接下來再看你小屋想要以甚麼方式呈現，你想留下那些你平常會看的資訊（或展示給別人看的），再做調整即可！
小屋佈景這裡是你會花大量時間的地方，所有的美觀都是在這裡製作，基本上只要一個小畫家就能解決了，當然你想要有些圖案上的變化可能就得另外上網爬文了(搜尋巴哈小屋製作就可以找到嚕!)
小屋背景圖片的部分，由於每台電腦顯示不同，建議是上傳解析度越高的底圖越好；如果上傳解析度太小的底圖在有些較高解析度的電腦看起來會無法填滿整張圖哦！
不過市面上最推薦的解析度是寬1920X高1080，建議是做參考，之後再依照自己電腦的顯示做調整。
如果發現圖片顏色太突兀，可以到pixlr裡將圖片透明化再上傳哦！
在上傳完圖片後按下右方的進階設定，可以去調整圖片的顯示方法及位子，這邊可以自己摸索看看哪樣最符合自己的胃口；底色部分則是如果你圖片解析度大小小於自己螢幕解析度時，他會自動補色上去。
由於高解析度的關係，圖片自然不可能在200KB以內，建議可以用上傳雲端的方式上傳圖片，
(普遍上重複跟捲動都是選不重複、不捲動最好看,當然依造個人喜愛也可以做調整!)
然而由於巴哈給予圖片位置的擺法只有上方的九宮格，可能會無法達到使用者的喜好，我們這裡可以用別的方法達到自己想要位子的需求！
首先是先上傳一張你喜歡的圖片，再藉由網頁上的css修改到你想要呈現的樣子!
(按右鍵的檢查就可以看到網頁上的詳細語法資訊)
這裡可能要學過網頁設計的會比較看得懂一些，大致上只要了解在body區塊中有顯示background-image的地方是可以調整圖片的比例、位置、顏色，也可以調整圖片是否要重複
、畫面維持固定等等。（簡單來說巴哈功能上能調的這裡都能調整）
在background-position中是調整圖片位置的，在：後左邊是寬度、右邊是高度，可以用left top來顯示絕對位置，但也可以輸入數字+px來決定位置。(寬度:-px表向左、+px表向右，高度:-px表向上、+px表向下)
而你想調整圖片比例時，你可能會發現程式碼沒有顯示，那就要自己寫一條background-size下去調整，而調整方式跟background-position大同小異。
接下來刪除右上方的<body></body>之間的html程式碼，就可以只保留背景圖片而已哦!
(注意由於我們在頁面上做的更動並不會影響到系統，因此你離開網頁時整個更動都會恢復原狀！)
刪除html的程式碼後，記得留下上方的工具列調棒（為了維持到時候上傳等同的比例大小），在截圖的之前記得要將下方工具列隱藏，接下來就可以擷取整張圖了！
＊如果發現上傳後上方的工具列調棒有凸出頁面，縮小調棒大小再上傳嘗試即可。
＊如果你發現上傳過後比例感覺太大，可以再修改一下解析度大小。（但要小心出現在別的解析度下無法顯示整張圖的問題）
背景結語：基本上小屋背景是整個小屋佈景裡最麻煩的地方，完成之後剩下的相對起來容易許多。小屋背景圖片我個人會建議用淡色系風景圖效果最好（這樣才不會影響到閱讀文字），當然用深色系的可以配合白色文字（像是夜間模式的效果），如果是用人物圖的話建議是將人物擺到左右側（這樣才不會影響到閱讀），或著是將人物圖模糊化，增強文字顏色來表現也可以，要怎麼呈現看個人的意願，但唯一不要觸犯的大忌就是背景影響到閱讀就是了，文字的顏色千萬不可以跟背景相似，否則讀取會很痛苦！
後半段的部分，我會來說說如何製作其他小區塊的設計，
大致上我們可以分成Ａ.左區塊標題、左區塊底圖、B.右區塊標題、右區塊底圖、Ｃ.主選單、Ｄ.頁籤。
其實還有很多更細的小部分，但是基本上你會做Ａ跟Ｃ之後，剩下就可以自己舉一反三慢慢探索了。
注意!下面這張圖是超級懶人包
![]()
（配合這張圖可以對應小屋設定的各個按鈕,方便大家去設定使用,我真d是好佛心)
Ａ.左區塊：在進階設定-整體模式中，可以調整左區塊及右區塊的佈置，這裡我們講講設定左區塊的部分。
左區塊底圖(600X800):這裡是來顯示文字的主要區塊，所以底圖跟文字要互相配合，不要讓底圖降低文字識別度，我個人最推薦使用半透明的背板（尤其是你想顯示背景圖的時候），當然使用完全不透明的背板最能清楚顯示文字！網址下方的設定基本上都可以不用去碰。
這裡我推薦一個網址讓大家來製作背板。（也可以用來製作透明背板喔）
左區塊標題(690X30):要在標題內新增圖案的話，圖案高度要固定30才可以完整顯示，記得整體圖檔大小要維持在690X30的大小，記得不要解析度長寬差太多的圖，否則縮小後看起來很扭曲。
右區塊的部分也是以此類推的去製作。
(配合第一張圖的英文對應位置)
Ｃ.主選單(1000X35)：在做完左區塊之後，主選單的作法其實是大同小異，主要是看你想要它呈現甚麼樣子，建議要去調整"按鈕狀態"及"滑鼠經過狀態"，才會讓主選單看起來不會那麼死板。
Ｅ.右方按鈕群(150X30)：這裡我多補充些小知識，如果你是用填滿色的方法來上傳圖片的話，你會發現按鈕的圖片會黏再一起看起來很醜，這裡有兩個方法可以解決。
一是你可以利用PS做部分透明化，這樣就可以讓按鈕之間有區隔（詳細可以上網爬文看看）；
二則是如果你右半邊底圖是純色的話，你可以用小畫家將150X30的區塊上下左右補上一點點的背景純色，這樣你上傳後就會看起來有間隔了（這裡得慢慢上傳嘗試）。
接下來再搭配"滑鼠經過狀態"，就可以將按鈕輕易的布置成很好看的樣子哦！
大致上上方三點都會做後，剩下就可以自己舉一反三了，不過有些更細節的地方（比如想要在底圖添加圖案），就自己在慢慢摸索圖案比例要在整體底圖佔多少比例、在哪個位子最適當了。
最後，我覺得自己做小屋是件滿有趣的事情（可能是之前做網頁做到中毒了），以前找別人製作好的背景都找不到一個最適合自己口味的，我自己很龜毛，希望文字的顯示一定要清楚，這樣不只是方便別人閱讀，也比較不會傷到自己的眼睛阿![]()
。
我真的很感謝幾位巴友幾乎每天都被我灌信死纏濫打的問問題，畢竟我真的很笨，不去請教別人，要慢慢探索這些知識出來一定會浪費更多時間。
製作巴哈的小屋相對比直接做網頁真的簡單很多，畢竟功能都幫你寫好了，連前端的設計都固定好了，你只是簡單的做圖示的改變而已，那不妨來玩玩看這個功能，自己佈置好自己的小屋吧！
創作內容
連笨蛋都看得懂的小屋製作教學文
。
巴哈日記 (14)