梅花問路

梅花問路

進版畫面是全版的封面大圖，文章和側欄區塊的框架我全部都打掉了

不過有個壞處是我的版面就是用電腦視窗開到最大才可以完整看見它的美 XDD

背景有一 些錯誤在跑，不過我目前還抓不出來到底是什麼問題 (Debug漫漫長路...)

我有參照DRIBS&DRABS的教學文章，把文章分類變成下拉式選單，放在封面的底下

把搜尋文章的功能，自己設計按鈕的放大鏡圖案，還有框框的框架跟顏色

另外加入了"實用工具"、"幸福人生精選"這兩個自訂的側欄區塊，一樣釘選在封面底下，弄成下拉式選單

我自己硬是把文章分類跟我的自訂選單區塊合在一起

不過我還沒有學會更好的方式來合併這兩塊，所以應該不難發現這兩塊有時候會硬生生的分離

我目前把廣告1放在側欄2裡面，然後用語法隱藏整個側欄2

但是也有思考是不是要把這幾個我想要統一釘選的區塊全部放側欄2

在用語法調整，它們就可以自動在同一列了吧 (?) ---還未實驗 

如果有大神經過，麻煩指導一下小的我....該怎麼做比較好，賞我個方向

有用一塊側欄欄位做成頁尾廣告釘選在頁面最後面，youtube的部分有採用lazy load(如何做請點我)，不然網頁要跑好久喔

孔雀問路

點我參觀孔雀問路

這個版原本的設計整體色調都是黃的，我把它全部調整紅色系的

原本的版型那個關於我"ABOUT ME"區塊，你自己的照片不管怎麼換，你的照片也會是黃的...(也許就是想要弄出一個懷舊感  ?)

但梅花和孔雀都覺得那樣實在不太符合整體感...所以我們就把它改回正常顏色了!

我有拉高封面的高度，拓寬文章和側欄的寬度、調整字體大小

拿掉了 相簿、部落格、名片的連結

關於我和熱門文章這兩塊的顏色我用小畫家把它們塗成跟孔雀照片上的洋裝類似的色系 (別懷疑，我用的就是小畫家)

LOGO和底圖都是孔雀自己找的圖片以及自己的創意設計

我覺得整體感看起來很舒服，非常喜歡~~~

憂蘭問路

點我參觀憂蘭問路

進版畫面是全版的封面大圖

文章和公告區塊的版面都是有點半透明的設計

字體大小基礎是設定在18px

蘭花是個忙碌的護理師，那時候請我幫忙的時候，我就慢慢地找圖

熊熊找到這張封面，看起來很有忘憂的感覺，就決定用了它

還好弄完之後蘭花覺得很喜歡

封面上面的憂蘭問路，是梅花幫蘭花用兩張圖和文字三層搭配在一起弄的

ALBUM、BLOG、PROFILE這三個字是我用Power Point寫的(別懷疑，我用的就是PPT)

這個版型原本文章區塊就夠寬了，但我還是有在拓寬它一點點.....

側欄的部分是原本的版型設計，但我把背景全部調成透明的(梅花覺得這樣比較有整體感)

龍吟問路

點我參觀龍吟問路

龍吟仙子的封面圖用的是一個去背、半透明的水墨畫山景圖

此外文章區塊和側欄區塊我一樣都有拓寬

然後載入圓體字體並且把字調大(想知道怎麼換字體看這裡)

側欄的標題換成跟底圖類似的色系，然後套上我最愛的半透明 XD

文章的標題前面有一個小小的圖案，我找了一張水墨畫風格的荷花圖，覺得非常美

相簿、部落格、留言、名片這四個連結，把原版設計的白色圓形以及會跑出藍色英文字體通通移除了

只剩下比較簡單的動畫，覺得搭配整個版面的山水氣勢這樣比較不會顯得突兀~

梅花SAYS...

其實梅花大部分都是用痞客邦官方版型起步，我除了換圖片之外，我會加大字體，拓寬版面...

如果您喜歡我的設計，需要我幫忙您調整、優化版型，或是有其他的問題，都可以留言給我詳談

如果要直接要版型的語法，請恕我拒絕...

每個人都希望自己的部落格可以獨樹一格，我可以幫助你設計出類似款(您自己尋找喜歡的圖，或是與我溝通想要找什麼樣的圖)

看久了應該不難發現...梅花偏好使用透明或是半透明的語法

所以換個圖、拓個版，改個透明度，看起來每個版型之間的區別就慢慢出現了

目前梅花能做到的應該還算少，希望透過持續的學習和嘗試，有朝一日可以推出更多更好的版面作品~

我覺得還滿好玩的~

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I)	＊開發人員工具＊	公告版面 #spotlight	＊公告版面應用＊	其他應用	＊梅花的語法筆記本＊
部落格整體 #body	＊換背景底圖＊	側欄區塊 #links	＊改側欄標題的背景＊		＊文章內的目錄(錨點)＊
	＊換字體＊		＊Facebook粉專外掛＊		＊關閉遮蓋版面的廣告＊
	＊換部落格ICON＊		＊音樂外掛＊		＊隱藏上方藍色選單＊
	＊設計LOGO＊		＊YouTube外掛＊		＊連結Google相簿＊
封面橫幅#banner/#header	＊換封面底圖＊		＊分享連結階層＊		＊圖片瘦身不失真＊
	＊部落格標題敘述大小位置＊	實用推薦	＊讓部落格可以被Google＊		＊看所有語法筆記文章＊
文章區塊 #content	＊改文章標題字體、背景＊		＊Google Analytics分析＊		＊看梅花的CSS標籤筆記＊
	＊改行距、邊界＊ ⛔

痞客幫新手入門

看所有梅花的語法文章

→點我看梅花所有的語法文章清單←

看梅花的版型設計作品

→點我看梅花的版型設計作品分享←