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

改樣式準備工作:

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

步驟:

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

Tips:

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

 

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

 

[限時賞味。逾期作廢]

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

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

  2. Q.Q太感動了!!!<br />
    <br />
    我終於可以踏出我css的第一步了!!<br />
    <br />
    艾瑪真的是我的啟蒙老師…appreciated!!!<br />
    <br />

  3. 艾瑪~<br />
    雖然我都是期待妳的大方送~ :P<br />
    不過卻也因此而停滯不前哩..<br />
    謝謝妳無私的分享喔 🙂

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

  5. 謝謝艾瑪~~~~<br />
    現在才開始想認真的佈置自己的部落格,<br />
    先前都是直接使用範本,看了艾瑪的這篇,<br />
    我今天就利用範本把自己的家裝潢一番,<br />
    雖然現在才進行到一半,<br />
    利用範本來改,真的很方便。<br />
    <br />
    不過我覺得要把自己的家佈置的美輪美奐,<br />
    令人看起來舒服,還是要下一點功夫,<br />
    如同艾瑪說的,多欣賞別人的部落格,多看好的網頁,<br />
    這樣自己住的舒適,別人觀賞也高興。

  6. 今天的版面好清新~ 有早春氣息…<br />
    艾瑪時間過的比我們早哩!<br />
    <br />
    很簡單的一招, 卻很實用. 趕緊學起來~

  7. 搜尋還可以拿來找 banner or blogbody or side or date 等 關鍵<br />
    字,這樣也不用慢慢捲了。直接找 # or . 也可以看有哪些項目可以改。<br />
    <br />
    艾瑪這篇寫的真棒,武功心法都出來了。:P

  8. 謝謝艾瑪!<br />
    我得努力學起來<br />
    這篇真是讓我受益良多。<br />
    <br />
    另外-妳的網站真的好清新舒服唷!<br />
    我很喜歡呢。<br />
    ^_^<br />
    <br />

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

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

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

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

  13. 我家 didi 跟我妹妹一起睡<br />
    不過 didi 是夜貓子<br />
    晚上睡很少<br />
    都是下午在睡午覺:P

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

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

發表迴響

你的電子郵件位址並不會被公開。