WordPress 版面「Crococolors」

Theme: Crococolors Theme: Crococolors - Single

名稱:Crococolors
作者:Wanico
網站:Lab Crocodile

這次的版面應該可說是所有版面中花最多時間做的,先是在整體設計的泥濘中打滾,接著又在 flexbox 的沼澤載浮載沉,最後就是各種小問題之海了!還好新版面目前上線看來一切順利,下面就來簡單列幾個製作要點。

Flexbox 的運用

小彌的介紹很 lag 地認識了 flexbox 這個布局方式,剛開始因為不熟悉而碰到不少問題,但後來在 RWD 方面省很多時間。唯一美中不足的就是 IE 舊版本不支援、特別是 IE6 看起來特崩潰,但其他瀏覽器支援都挺不錯的,就不是那麼在意。

印象較深刻的問題是,當網頁內容的主要容器使用 flexbox 布局、且列印內容超過一頁,用 Firefox 列印時第二頁會跑不出來;解決方式也很簡單,就是另外寫 print.css 把該容器設定為 flex: none; 就好了。

參考文章:
阮一峰的网络日志:Flex 布局教程:语法篇
OXXO.STUDIO:深入解析 CSS Flexbox

回歸 HTML 符號

前幾個版面都使用 Font Awesome 來顯示圖示,這次考量網站載入的速度,決定回歸單純的 HTML 符號;雖然圖示類型沒有 Font Awesome 這麼豐富、且部分符號並非所有系統都能顯示,但少數幾個就頗堪用。符號表的部分這邊參考了 HTML ArrowsCSS Entities,相當方便、有興趣也可試試。

Facebook 粉專外掛的 RWD 方式

本次最折騰的非「Facebook 粉絲專頁外掛程式如何 RWD」莫屬,一開始想單純用 iframe 達到效果,但試了多種方法外掛就是不會隨著視窗寬度調整大小;後來千百個不願意才改用 JavaScript 載入外掛,參考 “How to make the Facebook Like Box responsive?” 的最高票解答,加入下列 css 才順利解決問題。當然前置作業還是要做好才有效果!

#fb-root {
    display: none;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

小結

寫到這兒、覺得這次其實也沒什麼大改動,只是工作太忙、回到家沒什麼多餘心力,才覺得做這版面度日如年吧?下次做新版面又不知是何年何月了,以前的設計總是白白一片,這次多了不少顏色,就給它放一陣子吧!

其他參考網站及文章:
MDN:writing-mode
WDD studio:[ CSS3 ] 字串選擇器”^”, “$”, “*”
可丁丹尼 @ 一路往前走2.0:搜尋取代SQL資料庫內容 (mariadb mysql)

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料