【教學】UDN改版大作戰 - ＝☆EG分享樂園☆＝ - udn部落格
＝☆EG分享樂園☆＝
作家：─=☆EG☆=─
文章分類
    Top
    【教學】UDN改版大作戰
    2008/08/23 01:36:36
    瀏覽：9760
    迴響：17
    推薦：41
    引用4

    想跟EG一樣有自己風格的部落格嗎？

    千萬別錯過~這次EG嘔心瀝血製作的教學唷！

    只要八個流程就讓你從新手變高手唷！

    準備好了嗎？要開始囉！

    Tips:

    1.請善用【Ctrl+f】搜尋關鍵字!

    2.如果發現按下確認後無任何變化請按【F5】重新整理

    3.EG推薦到Maggy的網頁圖片收集簿找素材唷!
    或到EG的推薦連結／《素材。網站》 尋找圖片素材唷!

    4.別在下圖紅框區上傳圖片

    流程一、選定模版

    流程二、改背景

    repeat為重覆
    no-repeat為不重覆
    這端看你找的素材適不適合重覆背景
    ps.要換上背景時切記別在下面的【背景圖：】上傳背景圖!
    因為更改語法後將不會變更，會維持原樣!
    例如:不想讓背景重覆時，它還是會重覆!
    請將你的背景圖存在相簿中，再複製圖片網址!
    貼到background-image: url(圖片網址);/* 背景圖 */

    2008/08/23
    Photo by EG

    流程三、改山頭

    原版模的山頭→大改造

    這裡的山頭圖~如果比山頭版寬小~EG見意將背景設為不重覆(no-repeat)
    再則背景顏色也是看你需不需要加!
    如果要換上山頭圖，請上傳到相簿之後將網址貼到
    background:url(圖片網址)
    background-position: center;/* 背景位置 */
    right為靠右 left為靠左 center為置中
    ps.要換上山頭時切記別在下面的【山頭圖：】上傳山頭圖!
    因為更改語法後將不會變更，會維持原樣!
      關鍵字:【山頭區塊】
    2008/08/23
    Photo by EG

    流程四、改網名位置

    【font-family:】為更改字型語法
    小叮嚀一下:如果改變字型可能別台電腦會看不到，
    只看到預設的字型(通常為細明體)。
    因為其他台電腦未必有您換上的字型。
      關鍵字:【山頭】網誌名稱
    2008/08/23
    Photo by EG

    流程五、改作者和推薦區位置

      關鍵字1:【山頭】網誌簡短網址與作家  

      關鍵字2:【山頭】加入好友、推薦本網誌等

    流程六、改搜尋位置

      關鍵字:【山頭】搜尋區塊

    流程七、改橫式主選單位置

      關鍵字: 網誌橫式主選單的定位

    流程八、變身成功

     

    可利用以下的選色器找出你想要的顏色~

    再從COLOR CODE:中取出色碼!

    感謝星際訪客提供如此棒的另類色碼表!哈

    最後還請各位高手多多指教囉^^

    Update：2009/01/21

    延伸閱讀:

    網誌風格CSS架構圖解

    玩模板》如何更改更改山頭圖檔？

    玩模板》如何更改部落格名稱的顏色和樣式？

    教學＿＿『網誌改版面基本教學●１』

    回應
    迴響（17） ：
    17樓. 回眸
    2012/11/12 15:57
    請教

    到模板管理改網誌名稱[比如您是EG夢想樂園]一直沒成功,

    可否詳細教導步驟.  謝謝.

    抱歉~那麼晚回你!

    看來你已經改好了^^

    跟你說唷~如果你一直問不到人...可以直接問電小E或電小二唷!

    他們人很好^^

    ─=☆EG☆=─ 於 2013/02/06 16:09回覆
    16樓. 子靜
    2011/07/07 09:59
    請問一下

    格子的山頭圖還是會重複

    網誌標題也挪不上去

    用了好多次都是一樣

    請問問題何在呢?

    首先別在下圖所示的地方上傳背景圖

    再來就是在流程二的地方: background-repeat:no-repeat

    ─=☆EG☆=─ 於 2011/07/26 17:11回覆
    15樓. 溫哥華 千里傳音
    2010/08/23 12:55
    感恩喔
    請問如何讓部落格名稱，　如　REED 一樣閃 ？

    謝謝！

    Victor..
    　不好意思我不太懂你的意思...
    如REED一樣閃的意思是....?
    ─=☆EG☆=─ 於 2010/09/01 01:18回覆
    14樓. 黃靜宜(辛蒂雅)
    2010/04/21 22:16
    請問
    請問喔，步驟六「清空原本的CSS語法」要怎麼清空？我按了右鍵，但不會出現刪除的選項，所以沒法刪除，應該怎麼做呢？先謝謝了！

    請先用滑鼠把滑鼠點在css編輯欄裡

    先全選
    方法1. 用滑鼠反白 
    方法2. 快速鍵ctrl+A

    然後清除 
    方法1. 按BACKSPACE(enter上面那一個鍵"←") 
    方法2. 按Delete

    ─=☆EG☆=─ 於 2010/04/22 23:05回覆
    13樓. 壞阿壞-沒有你的日子我真的好孤單
    2009/08/09 23:18
    盡信書不如無書
    看了好多書，對變更版面還是霧薩颯，還是你的教學簡潔有力又受用，這下可以好好改頭換面，重新做版了，感恩ㄋㄟ！

    UDN的版不難改!

    因為都有中文標題!

    只要懷抱著一顆科學家的精神~try try try!!!

    就可以改到你想到的版面囉

    ─=☆EG☆=─ 於 2009/08/10 22:46回覆
    12樓. 鑽石公爵
    2009/08/07 18:13
    感恩捏~~
    感恩捏~~   受益良多!  
     
    見到您橫式主選單前的小圖示, 又不知如何製作呢?  

    在"【網誌橫式主選單】小圖示"

    欲更換小圖示，請修改url為圖檔所在地的絕對連結

    範例:

    background: url(http://album.udn.com/community/img/PSN_PHOTO/eg0501/f_2226802_1.gif) no-repeat  left center;

    no-repeat是指圖示不重覆

    LEFT CENTER為圖示靠左、右、中間

    ─=☆EG☆=─ 於 2009/08/09 01:01回覆
    11樓. Jay Hsueh
    2009/06/19 16:49
    很棒的教學

    妳的教學好清楚喔，對我這個想要把部落格裝潢一番的新手真的很有幫助呢！

    HAVE FUN! ─=☆EG☆=─ 於 2009/06/21 00:13回覆
    10樓.
    2009/05/15 20:55
    很棒喔～
    最近也一直在研究改版型的方法，看到妳的教學受益良多
    謝謝分享～不過我是慣用火狐瀏覽器，還要克服很多問題，謝謝你

    不客氣唷!

    我還是比較習慣IE呢!

    火狐瀏覽器的確有些語法會走樣!

    也請多多指教囉!

    ─=☆EG☆=─ 於 2009/05/15 23:21回覆
    9樓. 蘆葦
    2009/03/20 23:09
    3Q~
    原來不能用它提供的上傳去改背景啊，
    難怪我之前改時一直有問題......


    多謝教學~
    輕輕的妳來了 正如妳輕輕的走

    妳揮一揮衣袖 帶走了我天空所有的雲彩

    ^^

    歡迎提出問題唷!!

    教學相長!!!

    ─=☆EG☆=─ 於 2009/03/22 15:30回覆
    8樓. 月亮小鬼
    2009/03/14 11:48
    謝謝

    妳的教學真的是太清楚了

    讓我這改版白痴都會改了

    這是我第一次看懂如何改版

    真的是很謝謝妳！

    想去窺探月球的欲望，來自古人望月時的憂愁。

    想飛奔去月亮的希望，來自從小美少女戰士的洗腦。

    謝謝你的讚美!

    能幫上妳的忙  我真的很開心^^

    ─=☆EG☆=─ 於 2009/03/15 13:16回覆
    發表迴響

    會員登入