雖然不是少女,但卻恬不知恥弄了很可愛風的版面......

自今年二年搬到來 pixnet,當時太倉促,只隨意找了一個樣式。但隨即也發覺那個樣版的 CSS 寫得不好。舉例說我想把網誌寛度增加至 1000,因為我想現時家家也用1024*768了吧?這樣文章內可放寛度 600 px 的圖片,會看得比較清楚。但之前那個CSS 試改了很多次,也無法調教網誌寛度......

但因為一直抽不到時間跟進,就湊合著用。

我只正式學過 html,無法從零開始寫 CSS,而且過程也太花時間,所以我只會先選用站內提供的樣版,再作個人修改。這一次只選「推薦」的樣版,果然 CSS 寫得比較一目瞭然,要修改也不太費勁。

我對左欄有偏好,但站內提供的樣版選擇不多,最終選了這一個。將第一張圖和第二張圖比較一下,不難發覺製成品已面目全非。

這就是 CSS 編碼,我的版面共有十二頁 A4 大小的編碼。不是看來那麼複雜。我只是修改顏色、字體大小、寛度、高度等,只要找到適當的編碼改過來就可以了。

每個在 pixnet 的網誌,原則上也會顯示 Album、Blog、Guestbook 和 Profile,但我的相片不放這個相簿、而且我也不大理會「留言簿」的留言。要留言的話,在任何一篇文章可以留下呀~ 而「關於我」這個嘛!我還沒有認真想過要怎樣寫....... 所以我把這四個連結從橫幅中除去了。

此外,網誌的主標題和副標題,從我一開始寫網誌就不顯示。純粹個人喜好。

我對顏色的要求十分高,曾經很認真想過買配色書,但因為配色書很貴,而且每當我這樣說,熊主就會用看怪物的眼神看著我,所以還是打消了念頭。

每次要定主題色系的時候,就會有點後悔當年用「紫熊」這個暱稱。因為好像我非用紫色不可似的,但每次也用紫色很悶呀!

 

說主題色系之前,還是先說橫幅設計。我寫網誌這麼久,試過不少設計,但只有一次沒有用「紫熊」去做橫幅。那一次被狠狠責備了,所以之後再也不敢不用「紫熊」。

我想說,處理相片很困難呀!上一次把熊仔的頭割下來 (好殘忍!) 放在薰衣草的背景上,要經歷無數次失敗呀!而且只要你細心看的話,會發現瑕疵的!嘻嘻~

因為今次想用左下圖的底紋圖和小鳥圖,所以用色就是以黃色圓圈作基準的米色 (主要用作底色)、底紋圖出現過的淺桃紅色 (主要用作連結的顏色) 和灰色 (留言區用色)、以及小鳥的啡色 (主要用作標題色)。為了閱讀舒適度,文章的文字還是沿用 #444 的褐色。 

雖然網上會有免費素材,但還是要有工具書在手。左邊那本買了好幾年,但這一次沒有用;而《手繪雜貨風紋樣1011》則是新買的,今次用的底紋圖和小鳥圖都是來自這一本的:-

今次沒想像中花時間,好像只是用了三個多小時。

希望你喜歡啦~ ^^

Posted by 紫熊 at 痞客邦 PIXNET Guestbook(26) 人氣()


留言列表 (26)

Post Comment
  • 貝拉琬bellayuen
  • 你連css都會寫~~ ^^ 好厲害呀!!! 如果我想學去改我的版的話~ 該從那裡開始比較好呢?

    看慣之前的版面,這次有耳目一新的感覺!! ^^
  • 貝拉琬bellayuen 嚴格來說, 我沒有寫, 我只是作少修改而已 ^^

    你對html 和 css 有沒有基本概念?你可以先搜尋一下, 應該有不少教學文. 不過完全沒有概念的話, 看到似懂非懂的編碼, 可能會很頭痛哦?

    哦~ 謝謝呀~ 之前那個版面, 其實也只是用了半年, 這麼快便厭倦了麼?(說笑)

    紫熊 replied in 2012/10/23 00:54

  • missenvy
  • 我本來也想改css,但實在太懶惰只好作罷:)
    新版面很可愛啊:)
  • missenvy 我也覺得改css 好煩,只是之前那個有不少問題,所以無論如何也要去面對一下.

    謝謝啊~~

    紫熊 replied in 2012/10/23 00:55

  • brett10
  • CSS我以前在無名的另一個窩會改,後來就累了~
    覺得用簡單的格式也不賴,就套完簡單版再改個版頭的圖而已。
    所以把時間都放在看視頻上了!哈哈哈~~

    紫熊真的好厲害!!樣樣自己來阿! ^_^
    好有耐心,也好有學新東西的動力!
  • brett10 對, 改css 這種事很累. 我在既有的格式找不到合心意的, 我就是想找一些簡單的款式, 但都找不到, 所以唯有自行再改css 了.

    我也想把時間放在寫感想文什麼的!

    嗯, 我是很喜歡學東學西啦~ 因為沒有專長, 只好什麼也學一點. 哈哈哈.

    紫熊 replied in 2012/10/23 00:59

  • edith141
  • 紫熊~
    我覺得好靚好可愛呀!
  • edith141 你說我好靚好可愛嗎?你怎知道的(爆笑)

    紫熊 replied in 2012/10/23 00:59

  • Poe
  • 厲害!我看到密密麻麻的編碼便會頭暈...... =0=
    新版面帶點可愛也有點清新,如果左欄的文字略深色一點就更好了,清楚一些 <-- 小小意見而已 :p
  • Poe 所以我要打印出來, 做好筆記才可以在後台改. 只看屏幕的話會頭暈.

    左欄的文字的顏色改加深了. 有沒有好一點??

    紫熊 replied in 2012/10/23 01:00

  • Siub
  • 在秋意洋溢的時候 看見這個春意盎然的清新版面, 很好呀!
  • Siub 那我是不是弄錯風格呀??!!XDDD

    紫熊 replied in 2012/10/23 01:01

  • 翎然
  • 以上的步驟,很複雜的感覺...

    覺得這兒很漂亮也很清新,像春天似的。只是現在入秋了,這兒卻回到春夏了,呵呵~~
  • 翎然 唉呀. 你跟 #6 的 Siub 都這樣說, 害我在擔心我是不是弄錯風格了. 唉~ 現在也已無可挽回了. 不過, 應該很快會有聖誕主題. 所以先忍受一兩個月吧~~

    紫熊 replied in 2012/10/23 01:03

  • wing
  • 紫大,你真的很厲害哦~讚~
  • wing 呃.... 其實真的沒有啦~ 有很多專業人士在看笑話啦~ XDDD

    紫熊 replied in 2012/10/23 01:04

  • kiki
  • sorry for typing eng,
    but i dun know how to type chinese... >< (shame...)

    I followed ur blog for a long time but only commented once on ur birthday
    so this's the second time

    it's so gd to see that there is still good quality blogger in HK
    u even bought bks just for redecorating the blog

    I really like the new look ^^
    the pink color and all those tiny pattern,
    It's cute and fresh~~

    Add oil

    Support u!!!
  • kiki nevermind, chatting in English is still fine. Do leave comment whenever you like to.

    Quality bloggers in Hong Kong, unlike me, see bigger things! Sure they don't waste time in revamping their blogs, but put more effort in writing articles.

    Thanks for your kind words! and glad you like the new design.^^

    紫熊 replied in 2012/10/23 01:11

  • C'est La Vie
  • 版面顏色好粉喔~好夢幻的版面~~
    紫熊太厲害了~
    版面真的好可愛~XDD
  • C'est La Vie 好高興你喜歡新版面啊~~ 不過真的真的不是厲害啊!只是有興趣研究一下而已.

    紫熊 replied in 2012/10/23 01:13

  • Wandy01
  • Wow!新的版面好fancy!有清新嘅感覺。但你文內所寫的字我全部認得,不過卻像外星語文一樣,完全不明,anyway,恭喜你添了新粧!
  • Wandy01 你說我所寫的字都認得, 是因為你也學過html/css, 還是你有改版的經驗? 還是因為我寫的不是中文就是英文所以全部認得? (別鬧!!!) XDDDD

    紫熊 replied in 2012/10/23 01:16

  • kaka
  • 好靚呀 我好鍾意 like x 100000 紫熊你真的很叻 XD
  • kaka 你喜歡就好了!! 謝謝啊~~

    紫熊 replied in 2012/10/23 01:17

  • 訪客
  • 好靚呀,紫熊~!
  • 你又知道我好靚嗎?啊~~ XDDD

    紫熊 replied in 2012/10/23 01:17

  • jxj
  • 真的很勁,我對這些一点也不認識,就是看了解釋也不明白,我都是借用別人的樣本算了.
  • jxj 如果有合心意的, 就坐享其成, 不用費神去改呀~~

    紫熊 replied in 2012/10/23 01:19

  • 安妮公主
  • 在最初用pixnet時我也找了一下究竟怎樣弄版面,
    但真的很少地方教怎樣弄,
    所以還是用樣本的版面便算了~

    哦, 現在知道要用CSS弄了,
    但我看了編碼很頭暈耶 XDXDXD,
    這也証實了你真是一名認真的熊, 呵呵~~~

    意見:
    1) 左邊的字用粉紅色後, 反而看不出分類, 所以換一下顏色會較好
    2) 說明是"紫熊", 即是熊仔是紫色便好了, 所以保留這隻熊仔嘜頭便可, 花可以用其他都得啊

  • 安妮公主 如果純粹作簡單修改, 可利用"自訂樣式進階版"中的修改, 而不一定要改css 編碼的.

    嗯, 我從不否認我是很認真的熊. =P

    我不太明白你說什麼分類? 你說的是第一部份我以前分了韓劇, 日劇和韓綜? 這個我刪掉了呀, 因為我覺得第一部份太長了. 而且看來日劇和韓綜也不會再有新文要寫.

    最大改動那一次, 是熊仔的嘜頭也沒有用 XDDD 我想之後, 即使再改橫幅, 也只是改上下的底色/底紋, 熊仔薰衣草部份會先保留了.

    紫熊 replied in 2012/10/23 01:27

  • delisalt
  • 好可爱啊这种风格 . V . 以前我在部落格(blogspot)也常用这种色调。

    不过看久了会厌倦 XD (是指自己的部落格,别人的反而不这么觉得~

    现在网络上有很多 CSS/ html 教程喔,我大概也懂一点(?)........XD
  • delisalt 我個人很喜歡這種 pastel 顏色的. 這個嘛~ 聖誕節應該會轉色系, 希望到那時之前你沒有對我的網誌感厭倦啦~ (笑)

    嗯, 不過改css 要很小心啊~ 有時只打錯一點點會有很大的問題的.

    紫熊 replied in 2012/10/23 01:30

  • edith141
  • 紫熊~
    你怕我差啲笑噴果汁呀!!! XD
    係係係~ 你都又靚又可愛,物似主人嘛!

    我有多俊秀Concert Poster 2張,你要嗎?
  • edith141 嘻嘻~ 你很喜歡喝果汁哦? (裝儍)

    俊秀 poster 我有啦~~ 我要俊秀本人可以嗎? (喂!)

    紫熊 replied in 2012/10/23 01:31

  • Wandy01
  • 紫熊果然係聰明嘅熊,當然我認得的只是中文字同英文字啦!至於什麼HTML or CSS 我一概不懂。悄悄說給你知,我的版面是空白的啊!哈哈!我實在沒有時間寫blog同打理它,只用作溝通咋!
  • Wandy01 我知你你的網誌(?) 是空白呀. 因為也有去過嘛~ 嗯, 只是用來留言也不錯嘛~ 留言有回覆也收到通知.

    紫熊 replied in 2012/10/27 01:19

  • edith141
  • 我見有poster多嘛~
    而且我身邊鐘意JYJ/俊秀嘅朋友唔多!
    那你要嗎?
  • edith141 謝謝呀. 我不要啦~ 而且我身邊喜歡jyj 的不會沒去俊秀的演唱會和不會不買最貴的票, 所以都有海報啦.

    紫熊 replied in 2012/10/27 01:21

  • 翎然
  • 我是喜歡這種風格啦~不要誤會是投訴哦~
    不過看到你說會弄聖誕主題時就暗暗期待了XD因為我很喜歡聖誕節呢~~
  • 翎然 我知道啦~ 跟你說說笑而已. 不要期待啦~ 可能是空頭支票. 呵呵~

    紫熊 replied in 2012/10/27 01:22

  • 安妮公主
  • 分類 >> 就是標題跟詳細內容字的顏色很相似, 會看不出有多少個分類啊~
  • 安妮公主 待我有時間會處理.

    紫熊 replied in 2012/10/27 01:22

  • Poe
  • 現在更清楚了!謝謝你接受我的小意見啊~~ ^3^
  • Poe 不客氣. 我當然重視你的意見啦~ (賣口乖)

    紫熊 replied in 2012/10/27 01:23

  • SH
  • 紫大:

    Body 個堆return false 真係好煩 (而且冇用), 如果我第一次去個個site 見到e堆code, 我係唔會再去第二次!! - .-

    如果你係想防止人偷圖, 我可以話你聽係一d用都冇!! -.-
  • SH 我完全不知道你在說什麼return false呀??!!

    我防止人偷圖, 我只是用了 pixnet 禁止滑鼠右鍵而已. 而我知道只在 IE 有用.

    紫熊 replied in 2012/10/25 23:31

  • SH
  • 原來係咁 ... 係pixnet feature !! -.-
    我誤會o左你直接改HTML !!

    禁止滑鼠右鍵, 係好麻煩o既一件事, for example 我睇一篇講日劇文章, 見到一d 字/詞, 右click 想將個字/詞 copy and paste 去一d site 查讀音/解釋, 但係用唔到右click!! 又唔會話用唔到, 係麻煩D, 如果可以唔用就唔好用"禁止滑鼠右鍵"個feature !!
  • SH 我怎會這樣厲害!哈!

    開放了啦~ 不要罵我啦XDDD

    紫熊 replied in 2012/10/25 23:57

  • SH
  • 如果你對browser, cache 有認識, 就會知佢去o左你個site, 正常o黎講圖就已經落o左佢部腦o既 cache !! 即係佢已經抄o左, 右click 好多時只係係cache 抄番出o黎!!

    以下link 有堆tools 係用o黎睇唔同browser o既cache !!
    http://www.nirsoft.net/web_browser_tools.html
  • SH 我知道呀. 而且即使我"禁止滑鼠右鍵", 用firefox / chrome 也可以照抄的, 不過我本來想可以攔到多少便多少嘛~

    紫熊 replied in 2012/10/27 01:24

  • edith141
  • okok~
    我俾其他朋友吖!
  • edith141 也謝啦~ ^^

    紫熊 replied in 2012/10/30 17:15