從去年2月開始,陸陸續續開始進行騏格子大翻修,最近總算做到一個段落,測試Chrome、Firefox、IE等瀏覽器也都沒什麼大問題,終於可以發表這篇公告一下新完成的樣式了~

rillakuma-css_0-banner.png

這次做的主題,簡單來說就是把我最喜歡的東西通通湊在一起

像是騏格子最上面的牛奶熊(拉拉熊的好夥伴),還有右上角及繼續閱讀的淘氣小貓(拉拉熊貓咪系列中的小夥伴)等等,由於大家都是拉拉熊的好朋友(唯獨沒有讓拉拉熊現身XD)所以就幫新樣式命名為「LOVE拉拉熊的好朋友」囉~(其實超隨便的 (揍))

接下來就來介紹一下這個新樣式的特點吧~~~

 

Check Point 1. 騏格子首頁概觀

rillakuma-css_1-homepage.png

一進騏格子首頁,就可以看到大大的牛奶熊(我都叫她懶妹),而且穿著小鹿裝還拿著一隻小鹿(真的是超可愛的)~右上方還有從側邊冒出來的兩隻小貓,硬要跑出來湊熱鬧~在每篇文章「繼續閱讀」的地方,可以再看到另一隻淘氣小貓,帶你進去看完整文章唷~

部落格樣式的整體色系,一樣採用粉紅色~在部落格標題「chi0*: 騏格子」的右下邊,有淺粉紅色的騏格子LOGO圖唷~

痞客邦的四個基本導覽按鈕:「相簿」、「網誌」、「留言」、「名片」是用淺粉紅色的小貓掌做底圖。在部落格背景裡,其實也暗藏了很多小貓掌唷~

TOP按鈕:在騏格子中往下拉,右下角會出現「↑」的圓形粉紅色按鈕,按下後可以回到頁面最頂端。

文章發表時間,是用淺粉紅色的圓角矩形做裝飾~側欄標題是斜斜的橫bar,每個側欄的尾巴處有淡淡的粉紅點點~

其中側欄「關於騏騏」也是這次做樣式一併修改的,把自我簡介重新打過,並把照片用CSS的方式做圓形展示,比較不會一堆方塊看起來很死板~

說到這裡,其實下面的「搜尋」也是新做的。因為痞客邦內建的搜尋不太夠力,常常需要等待一段時間建檔,才搜尋得到... 就我自己搜尋寫過的文章,就常常有找不到的情況,所以改用了Google的自訂搜尋,果然用起來方便多了!

Google爬蟲建檔的速度超快,用到現在還沒出現過明明已發表,卻搜尋不到的狀況。而且搜尋視窗是疊在既有畫面上,若要取消搜尋,點一下旁邊或按「X」就可以回到原本畫面,使用起來也更有彈性。

 

Check Point 2. 文章分類-簡短摘要

rillakuma-css_2-cat%26;tag.png

在點選各個文章分類時,上方的「標題列表」、「簡短摘要」做成粉紅色小按鈕的樣子~

每篇文章的「文章標籤」(關鍵字)也小巧不占空間地出現在繼續閱讀的左邊~

 

Check Point 3. 文章分類-標題列表

rillakuma-css_3-list.png

點選文章分類的「標題列表」,會列出每篇文章的發表日期及標題,每篇文章則用粉紅色小點點隔開,提供快速瀏覽~

 

Check Point 4. 側欄-最新留言

rillakuma-css_4-reply.png

用淺粉紅色框住留言日期,讓每則留言看起來更清楚囉~

 

Check Point 5. 側欄-月曆

rillakuma-css_5-calendar.png

用粉紅色圈圈表示有發表文章的日子~把滑鼠移到日期上的時候,會有類似反白,變深粉紅色的效果唷~

 

Check Point 6. 文章尾端-相關文章、留言回覆

rillakuma-css_6-footer.png

在每篇文章的尾巴,用淺粉紅色的點點隔開「相關文章」及「歷史文章」~每個連結的前面,也有放「▸」小小的箭頭符號,增添活潑的感覺唷~

緊接著出現的留言區,是用從《著色練習~奇幻森林童話貓❤》這篇的貓貓做成「就等你留言!」橫幅~每一則留言是用右上角有圓角的淺粉紅色區塊呈現;在格友留言跟騏騏的回覆的中間,則是用白色的大點點隔開~

※ 若想要回顧在這之前的樣式究竟長什麼樣子,可以看這篇
 ➤ 新樣式!「寶貝說騏~」 

以上~就是這次新樣式的分享~~
你們覺得如何呢?歡迎留言說出你的想法唷~~

創作者介紹

chi0*: 騏格子

騏騏 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 咻
  • [:emotion1484661369-3767678555_s.png]
  • 咻
  • NICE!
    [:emotion1484661368-2824392181_s.png]
  • 感謝支持~~~ ^/////^!!

    騏騏 於 2017/08/03 18:02 回覆

找更多相關文章與討論