部落格樣式∥Wind

1月 14 週五 201105:46
部落格樣式∥Wind

之前做了一款以大BANNER為主的樣式 - Change Photo
因為期間痞客邦有更新一些新的功能,
再加上之前的樣式有一些我想更新的地方,
所以重新做了同樣可以更改大BANNER的樣式,
應該也是今年我發表的第一個樣式哦

名子叫WIND,因為想不到用什麼名子好XD
剛好拍下這張照片的時候有微微涼風~~
真的很舒服,連帶著心情也好起來>///<
所以就叫做WIND了!

另外與前版一樣,
這是可以輕易修改大圖片以及文章寬度、側欄寬度的樣式
還有很細微的地方也可以更改,更改位置我都標注在CSS裡囉!

與前版不一樣的地方大概是這次多加了圓角,
還有把配色改為稍微舒服一點的淡色系,
不過如果覺得字太淡,也可以在CSS內做修改(常用的位置我都有做中文注解)

雖然CSS內已經有注解,
不過下面還是稍微介紹一下幾個常用的CSS修改
(這裡介紹的方法僅限於這個樣式哦!)

修改大圖片:

修改大圖片的CSS是以下這段,
修改圖片網址還有圖片寬高就可以喔!

#banner{
background:url(http://pic.pimg.tw/paula3844/f376415c7087a50fb9b8eb5c9e67fca0.png) no-repeat left top; /*若要修改大圖片,修改此段內的網址即可*/
width:880px; /*大圖片的寬度*/
height:415px; /*大圖片的高度*/
border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
}

修改文章與側欄寬度:

如果覺得文章與側欄寬度不夠你使用,
可以照以下兩個步驟做修改

1.先修改想要的文章與側欄寬度

文章寬度請先找到#content
之後找到#content{}之內的width,如以下
修改數值即可
width:680px;/*文章區塊的寬,側欄與文章區塊相加不能超過整個部落格大小*/

側欄寬度請先找到#link
之後找到#link{}之內的width,如以下
修改數值即可
width:180px;/*側欄區塊的寬,側欄與文章區塊相加不能超過整個部落格大小*/

2.文章與側欄寬度修改完後,修改整個部落格的寬度
先找到#container
之後修改#container{}內的width,如以下
width:880px; /*整個部落格大小*/

*整個部落格大小的寬度=文章寬度+側欄寬度+20

最後希望大家會喜歡這個樣式啦^^~
照著CSS內的注解更改應該可以改蠻多地方,可以再摸索~
最近天氣好冷,大家要注意保暖哦~~

點我前往下載樣式

*最近我分享樣式的空間好像有點怪怪,如果點不進去,多重新整理幾次應該可以^^

壯兔

Paulean R Sims

壯兔發表在痞客邦留言(48) 人氣(786)

全站分類：
個人分類：樣式分享

▲top

28 則留言

bille

好耶~~有新版面用了,我也要試試看, 謝謝壯壯的的分享

2011-01-14 09:58

壯兔

BB最近都搶了頭香, 開心哦>////<... 支持物件又支持面板>///<, 謝謝買肉BB >///<

2011-01-14 17:08

喵喵

耶耶耶!!好清爽!!♥ 我最愛大面板了，這款也很讚!! 謝謝壯壯的分享。>333<♥(扭屁股)

2011-01-14 12:52

壯兔

喵喵>///< 不扣氣啦>///< 喵喵也對我很好, 一直都有套用我的版面, 很開心>///<,愛你

2011-01-14 17:09

妮可喵(A-Miu)

好耶兔兔又推出新樣版偶要立刻試用謝謝兔兔的分享愛死泥了 >3<

2011-01-14 15:09

壯兔

AMIU也幫我試用>///< 開心哦>< 希望會合AMIU滿意^3^ 愛你 too!

2011-01-14 17:10

關閉中

大面板感覺起來比較清爽耶~ 好適合用來放m3的banner~ 等過一陣要換版型時~就來取用~ 感謝壯壯的分享~>///<

2011-01-14 16:54

壯兔

DD>///<, 大家都對我好好哦>< 大BANNER真的很適合放模三LOGO耶XD 不過版型是以我喜歡的色調下去調整不知道會不會符合大家口味>< 謝謝DD(羞奔),愛你哦(///)

2011-01-14 17:16

伊伊索

多肉植物很可愛!!!!

2011-01-14 17:11

壯兔

原來那是多肉植物呀! 雖然我有種仙人掌,可是竟然沒有發現是多肉植物(羞奔) 那是在人家家裡偷偷拍的 CCC 有沒有看了很舒服的感覺>///<

2011-01-14 17:18

飛尋

換版型囉~正好極需要>"<，我比較喜歡大banner說，之前舊的…感覺很小

2011-01-14 18:26

壯兔

感動>///< 飛尋也套用了>///< 大家真好><~ 希望版面會合飛尋的意哦^///^

2011-01-14 18:28

飛尋

~恩~而且裡面寫的很詳細，對我這個css生手很有幫助^^，目前正在狂相簿的= =+

2011-01-14 18:31

壯兔

希望真的有幫道你的忙啦! 謝謝飛尋! 換空間真的很辛苦,加油哦!

2011-01-14 19:38

水晶

壯兔真好，還把教學給附上了這樣式看起來好舒服^^ 最近很喜歡圓角，好看

2011-01-14 20:11

壯兔

只是一些小注解XD 希望會幫倒需要的人><~ 圓角一直都好精緻哦! 我也喜歡>////< 用了有很大加分效果呢!

2011-01-14 21:03

飛尋

有幫助到我啊^^只是在參透妳的語法，我算是CSS門外漢，要慢慢改的說… 剛把一些顏色換掉… 不知為何…變成偏紫色XD，其實我喜歡白色QQ" 但白白的蠻怪的一-一"

2011-01-14 20:35

壯兔

我挑顏色會用PHOTOSHOP下去挑顏色, 改顏色的對話框會連帶有色碼可以參考使用這樣就比較不會跟希望的有落差了XD 飛尋可以試試看^^~ CSS部分可以慢慢來呀XD 一步一步,很快就能夠順利得更改樣式了!加油^^

2011-01-14 21:06

飛尋

呼…弄了一部分，還好有壯兔大的格式…讓我更換部落格的風格進度超前，不然面對css樣式…我還真的…會發呆一陣子的說。先感謝壯兔大囉

2011-01-14 21:23

壯兔

不客氣哦XD~~ 很高興有幫到忙>///<~ 首圖的于曦配上紫色好浪漫呀! 于曦果然很適合晨昏和紫色呢! 話說可以到後台把文章內的圖片寬條大, 這樣圖片就不會被迫縮小囉^^~~

2011-01-14 21:36

飛尋

恩恩~謝謝>"<我剛才才發現有地方可以調，想再請問一個問題，就是圓角部分的語法在哪? 我剛找不到@@"首頁圖上沒圓角的說~"~

2011-01-14 21:57

壯兔

不客氣啦~ 圓角的部分要用火狐,CHROME瀏覽器等才看的到唷! 因為IE沒支援圓角框,是比較麻煩的地方>< 我的瀏覽器中看你家是有圓角框的,沒問題唷! 另外圓角的語法是這樣的: border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;

2011-01-14 22:46

飛尋

soga，原來是ie不支援，因為我剛在對語法的時候，想說沒有缺漏xd

2011-01-14 23:51

壯兔

恩恩,IE沒有支援圓角,有點可惜><... 似乎連IE8也不支援呢... 到底什麼時候會支援呢...OTZ... 屏除IE瀏覽器的話,其他瀏覽器倒是可以正常顯示的^^ 飛尋可以安心使用XD

2011-01-15 00:40

喵貝

好棒好棒~是我喜歡的版型呀! 整個看起來很清爽，好可惜IE沒有支援圓角，有圓角會有更精緻的感覺~ 大家都好喜歡壯兔的版面呀:目看書看到一半一定要上來支持~ 然後我又發現了新的眼線.眼影XD 好愛壯兔阿~[抱]

2011-01-15 13:55

壯兔

可愛的喵貝>///< 最近要期末了應該很忙碌吧? 喵貝加油哦! 大家都對我很好,很支持我,所以我很感動呢>///< 希望眼線和眼影也會讓喵貝滿意! 再說一次加油!! 祝喵貝考試順利!

2011-01-16 14:26

Pika

噢噢!可以輕易修改大圖片的樣式真的太棒了! 之前苦惱著想要找可以有放大圖的樣式狀兔真的太謝謝你了!! 多才多藝的狀兔做的新眼線和眼影pika有用在小人身上看看效果很棒的說! 狀兔~I love you!! (羞

2011-01-15 14:47

壯兔

PIKA不客氣哦>///< 你們喜歡我就很開心了>////< PIKA也幫我測試了眼線和眼影嗎? 真的是太謝謝PIKA了><! 天阿你們都好好哦>///< I LOVE YOU TOO,PIKA!

2011-01-16 14:24

水晶

可惜圓角IE不支援不知道以後弄個IE9的話會不會有突破，呵呵是說為了要照顧到每個瀏覽器不同語法什麼有時候要寫兩份不同的，真是麻煩

2011-01-16 01:14

壯兔

對呀...真的是很麻煩, 只能說IE瀏覽器很不乖 T.T 但是IE的使用者又是最廣的... 甚至還有人還在用IE6呢... 要照顧很多瀏覽器來寫語法真的也很不方便的說...

2011-01-16 14:14

Tzuching(Taco)

壯兔會自己做版型啊,太厲害了~^^ 我之前就一直在找可以更換大banner的版型, 結果不是太小,就是作者不開放修改語法(好鬱卒~) 以後一定要來換成你的版面來用~ 謝謝你的分享~^^

2011-01-17 10:50

壯兔

其實做版型也是興趣啦XD 不過不知道這樣的版型會不會符合大家所需要><~ 所以內部配色也是依自己的喜好去修改><~ 謝謝晴>///< (抱)

2011-01-17 13:28

Qiaowen Zheng

謝謝你的分享希望你不停的創作新的作品(期待中~) 要加油喔~ 雖然我不認識你不過因為我部落格是用狀兔而你的作品的緣故所以我已經推了喔~ 加油!!狀兔兒!!期待你再次出新的作品!!要加油喔!! (我可以加你為好友嗎?)

2011-01-21 14:53

壯兔

套用我的作品我好開心呢>///< 謝謝雪莉哦! 我會加油的!! +好友,當然可以呀^^

2011-01-21 15:08

Qiaowen Zheng

狀兔兒!!謝謝你^^!!(我已經加為好友了~)

2011-01-21 15:12

壯兔

不客氣哦XD ^^

2011-01-21 15:22

Qiaowen Zheng

恩恩^^

2011-01-21 15:35

sji

壯兔兔這款樣式我要包走了喔可以自己換BANNER真的太好了很謝謝你^^

2011-01-23 01:29

壯兔

不客氣哦!!! 小布喜歡我也開心啦! (抱)

2011-02-01 21:08

ABBY❤

耶，這款好可愛剛好最近忙好要來重新整理網誌。補一下新年快樂哦，雖然過了 (汗顏) kekeke.

2011-02-23 21:36

壯兔

歡迎歡迎歡迎~~ Albee也新年快樂! 很開心你喜歡耶!^^

2011-02-24 02:57

依是

之前有先打包了終於有空可以整理一下也改了欄位，很喜歡謝謝妳^^

2011-05-13 23:44

唯

很清新的風格，剛好適合酷熱的夏天微微的涼風吹來格外清爽^^ 謝謝分享~~ 樣式帶回家了^^

2011-06-26 22:49

壯兔

很高興唯喜歡這個樣式哦! 最近真的很炎熱,,,,希望真的能帶給唯清涼的感覺XD 歡迎帶回家^^ 謝謝唯的留言^^

2011-06-28 20:49

秋野杏

我還蠻喜歡這種簡單的風格呢~謝謝^^

2012-01-19 17:09

小米夏

*****

2012-05-02 16:56

壯兔

*****

2012-06-23 17:20

きよ

*****

2012-05-26 17:12

壯兔

*****

2012-06-23 17:30

欣欣

這個樣式好舒服喔~ 可是下載頁面無法顯示網頁呢? ><

2012-10-02 14:01

ChinHsi

想帶走這個版型但請問壯兔一下不知能不能修改一些圖片呢?!

2015-05-13 18:36

參觀人氣

本日人氣：
累積人氣：

Who's comming

Search

New comment

[18/11/05] 54國語言翻譯公司於文章「我搬家囉...」留言：
上裡三太就外家上樣重來聲得出，著會不個特的比把大。 6...
[18/04/24] raincchina 於文章「我搬家囉...」留言：
v3WdZzb0F75UIG真好，beautiful！！！...
[17/06/26] 艾力於文章「Simcity 5 Beta 2 - 模...」留言：
這種圓型的道路十分受歡迎, 不過空間不太足夠, 不容易興建高...
[17/06/25] 艾力於文章「Simcity 5 - 我連做夢都在當市...」留言：
遊戲的觀賞角度非常自由，從任何一個角度看都很漂亮，照片非...
[16/03/16] seyo0516 於文章「網誌樣式∥Photography...」留言：
做得很好喔~~我喜歡你的風格，留言來鼓勵一下...
[15/10/27] 阿龍於文章「母親節,台南,江南渡假村...」留言：
第一張圖是樺斑蝶，第二張是淡紋清斑蝶，第三張是紫斑蝶...
[15/08/27] 路人於文章「PHOTOSHOP BRUSH 筆刷推薦...」留言：
每個筆刷都好厲害啊!!! 感謝分享這麼實用的筆刷!!!...
[15/08/01] 李小真愛侯小穎於文章「計日∥溫馨手繪計日掛件...」留言：
拿走了謝謝...
[15/07/27] Jasmine Chen 於文章「我想飛...」留言：
很符合心情的圖片，借分享喔><...
[15/05/13] ChinHsi 於文章「部落格樣式∥Wind...」留言：
想帶走這個版型但請問壯兔一下不知能不能修改一些圖片呢...

Paulean R Sims

人生就是一場模擬市民，一場模擬市民就是人生。