[分享] 版面樣式改法攻略

Posted onAuthor艾瑪28 Comments

改樣式準備工作：

1. 調色盤（隨你用網路的、自己電腦中的或者書上的皆可）
2. 需要用到的素材圖片網址先記好
3. 編輯器一枚（Word/Frontpage/whatever…）

步驟：

  1. 當你有了這三樣之後，到網誌中隨便挑選一個你比較喜歡的樣式。
  2. 隨你要從哪一個部分開始改都可以。通常我是先改底色和blogbody的協調度。
  3. 改完底色後改字體的顏色。
  4. 最後放上素材去搭配。

Tips：

  1. 調色盤的用處在於（艾瑪喜歡用連結中的 ♡ [調色盤]大推薦!! MyChat 調色盤 or 原色大辞典 這個）你可以找出某個顏色中互補的色彩，或者跟他色調比較相近的色碼，當然你相信自己的色彩靈感也是可以，隨你怎麼搭，只要高興就好。
  2. 顏色部分最好不要超過三種，不然容易眼花撩亂。也許有人喜歡熱鬧一點、活潑一點的，大概是我比較保守，我不喜歡太多物件，感覺很凌亂，所以真的建議不要超過三種顏色。
  3. 素材圖片常有畫龍點睛之效，當然你可以自己做（艾瑪的按一下觀看原始大小圖片就是自己做的），但是如同上一點所言，如果配得太凌亂，或者圖片的色彩與你的底色、字體顏色不搭調，那麼又是可惜事一樁。
  4. 最後我提到的編輯器要做啥用呢？是的。我之前提過了，你可以用「尋找」、「取代」的功能三兩下子就把所有的色碼給代替完成。舉例：例如你今天想要將白色改成黑色，直接將#ffffff以#000000取代掉，有點像是批次處理，超快速的。當然，如果你希望一樣一樣慢慢改，我也沒意見啦！只是像我這麼急性子的人，我會希望很有效率地馬上把他改好就是了：P

　

大致上就是這麼做，我所有的樣式都是依照上面步驟去改的。至於版面要怎麼配置、色彩怎樣才叫協調，全部都是各人喜好不同。雖然我看有些部落格，就會很想要像Knowledge頻道中那個幫人改頭換面的節目主持人一樣，想把他的CSS拿來改，但是，你改好了人家不見得欣賞。所以大家還是自己動手做吧！多欣賞別人的部落格，多看好的網頁，這種改版面的能力絕對是辦得到的！艾瑪就是到了無名之後，才瞭解什麼叫做CSS，才知道怎麼改版面的囉！只是你得跟我一樣有好奇心、有大膽嘗試的精神、用力去改，改久了你一定是專家！共勉之～

　

[限時賞味。逾期作廢]

分享此篇文章

延伸閱讀

【關於作者】艾瑪 | amarylliss

 台灣第一位全職旅遊部落客受邀出國旅遊超過百次(受邀列表)，1996年起於台大椰林BBS自助旅行版(Tour Abroad)發表旅遊心得並擔任版主，2000年起於明日報/ANYWAY旅遊網分享旅遊心得，2003年起任艾瑪隨處走走部落格格主至今，從無名小站至痞客邦，目前回歸個人部落格持續經營；更詳細網路書寫歷史請參考關於我。聯繫、合作或邀約請聯繫：[email protected]

 Email Facebook Flickr YouTube Instagram

TG按讚：0
Post Views: 1,410

28 thoughts on “[分享] 版面樣式改法攻略”

  2. 好棒的分享! 又學到新東西了~
    這才知道編輯器有「尋找」以及「取代」的功能
    我以前都是一樣一樣的先找出來再一樣一樣的改
    眼睛都快花了 ==

  5. Q.Q太感動了!!!

    我終於可以踏出我css的第一步了!!

    艾瑪真的是我的啟蒙老師…appreciated!!!

  8. 艾瑪~
    雖然我都是期待妳的大方送~ 😛
    不過卻也因此而停滯不前哩..
    謝謝妳無私的分享喔 🙂

  12. 請問一下，我要怎麼設定連結部份會有反白的區塊，就是跟你
    的一樣，滑鼠移到連結的文字，會有另一個顏色和文字變色，
    要到哪裡設定?

  13. 謝謝艾瑪~~~~
    現在才開始想認真的佈置自己的部落格，
    先前都是直接使用範本，看了艾瑪的這篇，
    我今天就利用範本把自己的家裝潢一番，
    雖然現在才進行到一半，
    利用範本來改，真的很方便。

    不過我覺得要把自己的家佈置的美輪美奐，
    令人看起來舒服，還是要下一點功夫，
    如同艾瑪說的，多欣賞別人的部落格，多看好的網頁，
    這樣自己住的舒適，別人觀賞也高興。

  14. 今天的版面好清新~ 有早春氣息…
    艾瑪時間過的比我們早哩!

    很簡單的一招, 卻很實用. 趕緊學起來~

  15. 搜尋還可以拿來找 banner or blogbody or side or date 等 關鍵
    字，這樣也不用慢慢捲了。直接找 # or . 也可以看有哪些項目可以改。

    艾瑪這篇寫的真棒，武功心法都出來了。:P

  16. 謝謝艾瑪！
    我得努力學起來
    這篇真是讓我受益良多。

    另外－妳的網站真的好清新舒服唷！
    我很喜歡呢。
    ^_^

  17. 哈囉，艾瑪….
    這是我第一次留言…想要和你說，謝謝..
    一直都默默欣賞你的生活…每天用力地過生活…
    令人好不欣羨…終於…也和你一樣..追隨著你的腳步..
    也透過你無私的分享….讓我漸漸地踏出自己的一小步…
    謝謝： ）你也要繼續加油，讓世界更發光發熱唷….
    chineee

  19. 謝謝艾瑪~~
    看艾瑪的部落格已經變成每天重要的事情嚕
    謝謝艾瑪很耐心很無私的分享生活中的美好事物喔 ^^

  20. 今天終於知道為什麼艾瑪的BLOG這麼紅了, 果然是有過人之處
    哩…^__^ 嗯..雖然有看到艾瑪的BLOG上有寫可以"自行取用", 但我是
    想打聲招呼.. TKS!

  24. 感謝…感謝 大感謝
    另外我要把艾瑪的網站與我滴超連結呦
    和艾瑪報告一聲
    另外昨天晚上發現艾瑪1點多還在上網..對身體不好歐
    要早睡早起哩
    雖然寒涼的天氣　應該學貓一樣在睡覺
    艾瑪都跟ｄｉｄｉ一起睡嗎？

  25. 我家 didi 跟我妹妹一起睡
    不過 didi 是夜貓子
    晚上睡很少
    都是下午在睡午覺：P

  26. 我家加菲他都跟我一起睡呢 他現在都睡草莓沙發上 哈！
    半夜時分有時沒睡覺 就自顧自的在舔毛啦等等
    不過大多都躺在沙發上
    至於漢漢會睡一睡跑來找我 睡我旁邊 有時候還會用手摸著我的手
    窩心窩心阿 呵呵！
    有貓很快樂的！

  28. 艾瑪:
    我有引用你這篇文章喔..
    也有發出引用通知…
    可是不知為何就是沒在你的版面上看見通知…
    所以就留言告知你一下…
    謝謝你分享這個好東西喔!!

Comments are closed.