【小屋】CSS自訂版面：最近常見的問題１─最新文章欄位的預設圖

前言：
　　巴哈開放了原本鎖起來的語法，同時也呼顛各位屋主體諒廣告需要存在的立
場。
　　最近朋友常問我的語法不外乎是最新文章欄位的修改、中間背景如何透明化
，些許訝異的是還有右下版面設定顯示不是預想中樣子的問題，似乎是開放語法
後才冒出來的，如果你也正被如此困擾著，那麼請瀏覽本篇吧。

──　篇一　──

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【問題】最新文章的預設圖該如何替換？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　‧首先因為預設圖的位置，應該是巴哈保留為日後開放相關功能時的位置，
　　　因此，請記得備份該區的原本語法，以免日後有相關功能時措手不及。
　　‧因為該區是純粹放圖片的，單從ＣＳＳ的語法中並無法替換預設圖，因此
　　　只能最假象的設定圖片在預設圖的位置上。

《修改方法》
　　‧原本有的語法除非修改步驟有說要改，否則基本上不要動。
　　‧修改中用到的語法，如果有不一樣的新東西請自行加上去。

步驟一【隱藏預設圖】
　　‧找到自定語法中的這部份
　　　　/*-----------------其他共用部分-----------------*/
　　　　/*文章或畫作的縮圖邊框*/
　　‧使用ＣＴＲＬ＋Ｆ，搜尋欄中，輸入關鍵字「.article_pic」
步驟二
　　‧找到語法群組後，修改成下方的樣子，巴哈的預設圖會被隱藏。
　　　　.article_pic{
　　　　border:none;
　　　　height: 0px;
　　　　width: 0px;
　　　　}

步驟三【拉寬最新文章的寬度】
　　‧找到自定語法中的這部份
　　　　/*----------------各文章列表區(下方)-----------------*/
　　　　/*最新文章及GP值底色*/
　　‧或使用ＣＴＲＬ＋Ｆ，搜尋欄中，輸入關鍵字「.articlebox」
步驟四
　　‧找到語法群組後，修改ｗｉｔｈ，最新文章的欄位會被拉寬
　　　　.articlebox{
　　　　width:720px;
　　　　}
步驟五
　　‧將背景設定上去（將該背景圖使用成您所要使用的圖片），圖片的位置放
　　　在最新文章內文的前半段，
　　　　.articlebox{
　　　　width:720px;
　　　　background-image : url(http://);
　　　　background-repeat:no-repeat;
　　　　background-attachment: fixed;
　　　　background-position:left;
　　　　}

步驟六
　　‧使用內文與邊界的距離設定，即可拉開文與圖的距離，
　　　　.articlebox{
　　　　width:720px;
　　　　background-image : url(http://);
　　　　background-repeat:no-repeat;
　　　　background-attachment: fixed;
　　　　background-position:left;
　　　　padding:10px;/*邊框空白10，依所需調整數值*/
　　　　}

步驟七【消除最新文章的框線】（依所需修改）
　　‧形成假象的首圖；因為此時是還有文章的框線存在的，如果您不想要有框線就是將BORDER設定成0PX。
　　　　.articlebox{
　　　　width:720px;
　　　　background-image : url(http://);
　　　　background-repeat:no-repeat;
　　　　background-attachment: fixed;
　　　　background-position:left;
　　　　padding:10px;/*邊框空白10，依所需調整數值*/
　　　　border:0px;
　　　　}