網路城邦
上一篇 回創作列表 下一篇   字體:
【教學】UDN改版大作戰
2008/08/23 01:36:36瀏覽9529|回應17|推薦41

想跟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架構圖解

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

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

教學__『網誌改版面基本教學●1』

( 休閒生活網路生活 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=eg0501&aid=2154066
 引用者清單(4)  
2015/08/16 10:07 【jieher LEEL的部落格】 【教學】UDN改版大作戰
2009/04/26 17:48 【EG語法測試版】 【教學】UDN改版大作戰
2008/11/16 09:38 【部落格好好玩 催票告急】 UDN自訂網誌模版教學
2008/08/23 23:07 【部落格好好玩.旅行好好玩】 部落格輕鬆上手二部曲 實況

 回應文章 頁/共 2 頁  回應文章第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁

回眸
等級:6
留言加入好友
請教
2012/11/12 15:57

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

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

─=☆EG☆=─(eg0501) 於 2013-02-06 16:09 回覆:

抱歉~那麼晚回你!

看來你已經改好了^^

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

他們人很好^^


子靜
等級:7
留言加入好友
請問一下
2011/07/07 09:59

格子的山頭圖還是會重複

網誌標題也挪不上去

用了好多次都是一樣

請問問題何在呢?


─=☆EG☆=─(eg0501) 於 2011-07-26 17:11 回覆:

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

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


溫哥華 千里傳音
等級:8
留言加入好友
感恩喔
2010/08/23 12:55
請問如何讓部落格名稱, 如 REED 一樣閃 ?

謝謝!

Victor..
─=☆EG☆=─(eg0501) 於 2010-09-01 01:18 回覆:
 不好意思我不太懂你的意思...
如REED一樣閃的意思是....?

黃靜宜(辛蒂雅)
等級:7
留言加入好友
請問
2010/04/21 22:16
請問喔,步驟六「清空原本的CSS語法」要怎麼清空?我按了右鍵,但不會出現刪除的選項,所以沒法刪除,應該怎麼做呢?先謝謝了!
─=☆EG☆=─(eg0501) 於 2010-04-22 23:05 回覆:

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

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

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


壞阿壞-沒有你的日子我真的好孤單
等級:7
留言加入好友
盡信書不如無書
2009/08/09 23:18
看了好多書,對變更版面還是霧薩颯,還是你的教學簡潔有力又受用,這下可以好好改頭換面,重新做版了,感恩ㄋㄟ!
─=☆EG☆=─(eg0501) 於 2009-08-10 22:46 回覆:

UDN的版不難改!

因為都有中文標題!

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

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


鑽石公爵
等級:7
留言加入好友
感恩捏~~
2009/08/07 18:13
感恩捏~~   受益良多!  
 
見到您橫式主選單前的小圖示, 又不知如何製作呢?  
─=☆EG☆=─(eg0501) 於 2009-08-09 01:01 回覆:

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

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

範例:

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

no-repeat是指圖示不重覆

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


Jay Hsueh
等級:6
留言加入好友
很棒的教學
2009/06/19 16:49

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

─=☆EG☆=─(eg0501) 於 2009-06-21 00:13 回覆:
HAVE FUN!


等級:
留言加入好友
很棒喔~
2009/05/15 20:55
最近也一直在研究改版型的方法,看到妳的教學受益良多
謝謝分享~不過我是慣用火狐瀏覽器,還要克服很多問題,謝謝你

─=☆EG☆=─(eg0501) 於 2009-05-15 23:21 回覆:

不客氣唷!

我還是比較習慣IE呢!

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

也請多多指教囉!


蘆葦
等級:7
留言加入好友
3Q~
2009/03/20 23:09
原來不能用它提供的上傳去改背景啊,
難怪我之前改時一直有問題......


多謝教學~

輕輕的妳來了 正如妳輕輕的走

妳揮一揮衣袖 帶走了我天空所有的雲彩
─=☆EG☆=─(eg0501) 於 2009-03-22 15:30 回覆:

^^

歡迎提出問題唷!!

教學相長!!!


月亮小鬼
等級:7
留言加入好友
謝謝
2009/03/14 11:48

妳的教學真的是太清楚了

讓我這改版白痴都會改了

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

真的是很謝謝妳!


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

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

─=☆EG☆=─(eg0501) 於 2009-03-15 13:16 回覆:

謝謝你的讚美!

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

頁/共 2 頁  回應文第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁