My site has changed!

8.png

之前做了一款以大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

壯兔 發表在 痞客邦 PIXNET 留言(28) 人氣()


留言列表 (28)

發表留言
  • bille
  • 好耶~~有新版面用了,我也要試試看, 謝謝壯壯的的分享
  • BB最近都搶了頭香,
    開心哦>////<...
    支持物件又支持面板>///<,
    謝謝買肉BB >///<

    壯兔 於 2011/01/14 17:08 回覆

  • 喵喵
  • 耶耶耶!!好清爽!!♥
    我最愛大面板了,這款也很讚!!
    謝謝壯壯的分享。>333<♥(扭屁股)
  • 喵喵>///<
    不扣氣啦>///<
    喵喵也對我很好,
    一直都有套用我的版面,
    很開心>///<,愛你

    壯兔 於 2011/01/14 17:09 回覆

  • A-Miu
  • 好耶 兔兔又推出新樣版
    偶要立刻試用
    謝謝兔兔的分享
    愛死泥了 >3<
  • AMIU也幫我試用>///<
    開心哦><
    希望會合AMIU滿意^3^
    愛你 too!

    壯兔 於 2011/01/14 17:10 回覆

  • Dill
  • 大面板感覺起來比較清爽耶~
    好適合用來放m3的banner~
    等過一陣要換版型時~就來取用~
    感謝壯壯的分享~>///<
  • DD>///<,
    大家都對我好好哦><
    大BANNER真的很適合放模三LOGO耶XD
    不過版型是以我喜歡的色調下去調整
    不知道會不會符合大家口味><
    謝謝DD(羞奔),愛你哦(///)

    壯兔 於 2011/01/14 17:16 回覆

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

    壯兔 於 2011/01/14 17:18 回覆

  • 飛尋
  • 換版型囉~正好極需要>"<,
    我比較喜歡大banner說,
    之前舊的…感覺很小
  • 感動>///<
    飛尋也套用了>///<
    大家真好><~
    希望版面會合飛尋的意哦^///^

    壯兔 於 2011/01/14 18:28 回覆

  • 飛尋
  • ~恩~而且裡面寫的很詳細,對我這個css生手很有幫助^^,
    目前正在狂相簿的= =+
  • 希望真的有幫道你的忙啦!
    謝謝飛尋!
    換空間真的很辛苦,加油哦!

    壯兔 於 2011/01/14 19:38 回覆

  • 水晶
  • 壯兔真好,還把教學給附上了
    這樣式看起來好舒服^^
    最近很喜歡圓角,好看
  • 只是一些小注解XD
    希望會幫倒需要的人><~
    圓角一直都好精緻哦!
    我也喜歡>////<
    用了有很大加分效果呢!

    壯兔 於 2011/01/14 21:03 回覆

  • 飛尋
  • 有幫助到我啊^^只是在參透妳的語法,

    我算是CSS門外漢,要慢慢改的說…

    剛把一些顏色換掉…

    不知為何…變成偏紫色XD,其實我喜歡白色QQ"

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

    壯兔 於 2011/01/14 21:06 回覆

  • 飛尋
  • 呼…弄了一部分,
    還好有壯兔大的格式…讓我更換部落格的風格進度超前,
    不然面對css樣式…我還真的…會發呆一陣子的說。
    先感謝壯兔大囉
  • 不客氣哦XD~~
    很高興有幫到忙>///<~
    首圖的于曦配上紫色好浪漫呀!
    于曦果然很適合晨昏和紫色呢!
    話說可以到後台把文章內的圖片寬條大,
    這樣圖片就不會被迫縮小囉^^~~

    壯兔 於 2011/01/14 21:36 回覆

  • 飛尋
  • 恩恩~謝謝>"<我剛才才發現有地方可以調,
    想再請問一個問題,就是圓角部分的語法在哪?
    我剛找不到@@"首頁圖上沒圓角的說~"~
  • 不客氣啦~
    圓角的部分要用火狐,CHROME瀏覽器等才看的到唷!
    因為IE沒支援圓角框,是比較麻煩的地方><
    我的瀏覽器中看你家是有圓角框的,沒問題唷!
    另外圓角的語法是這樣的:
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    壯兔 於 2011/01/14 22:46 回覆

  • 飛尋
  • soga,原來是ie不支援,因為我剛在對語法的時候,想說沒有缺漏xd
  • 恩恩,IE沒有支援圓角,有點可惜><...
    似乎連IE8也不支援呢...
    到底什麼時候會支援呢...OTZ...
    屏除IE瀏覽器的話,其他瀏覽器倒是可以正常顯示的^^
    飛尋可以安心使用XD

    壯兔 於 2011/01/15 00:40 回覆

  • 喵貝
  • 好棒好棒~是我喜歡的版型呀!
    整個看起來很清爽,
    好可惜IE沒有支援圓角,有圓角會有更精緻的感覺~
    大家都好喜歡壯兔的版面呀:目
    看書看到一半一定要上來支持~
    然後我又發現了新的眼線.眼影XD
    好愛壯兔阿~[抱]
  • 可愛的喵貝>///<
    最近要期末了應該很忙碌吧?
    喵貝加油哦!
    大家都對我很好,很支持我,所以我很感動呢>///<
    希望眼線和眼影也會讓喵貝滿意!
    再說一次加油!!
    祝喵貝考試順利!

    壯兔 於 2011/01/16 14:26 回覆

  • Pika
  • 噢噢!可以輕易修改大圖片的樣式真的太棒了!
    之前苦惱著想要找可以有放大圖的樣式
    狀兔真的太謝謝你了!!
    多才多藝的狀兔做的新眼線和眼影pika有用在小人身上看看
    效果很棒的說!
    狀兔~I love you!! (羞
  • PIKA不客氣哦>///<
    你們喜歡我就很開心了>////<
    PIKA也幫我測試了眼線和眼影嗎?
    真的是太謝謝PIKA了><!
    天阿你們都好好哦>///<
    I LOVE YOU TOO,PIKA!

    壯兔 於 2011/01/16 14:24 回覆

  • 水晶
  • 可惜圓角IE不支援
    不知道以後弄個IE9的話會不會有突破,呵呵
    是說為了要照顧到每個瀏覽器不同
    語法什麼有時候要寫兩份不同的,真是麻煩
  • 對呀...真的是很麻煩,
    只能說IE瀏覽器很不乖 T.T
    但是IE的使用者又是最廣的...
    甚至還有人還在用IE6呢...
    要照顧很多瀏覽器來寫語法真的也很不方便的說...

    壯兔 於 2011/01/16 14:14 回覆

  • TzuChing
  • 壯兔會自己做版型啊,太厲害了~^^
    我之前就一直在找可以更換大banner的版型,
    結果不是太小,就是作者不開放修改語法(好鬱卒~)
    以後一定要來換成你的版面來用~
    謝謝你的分享~^^
  • 其實做版型也是興趣啦XD
    不過不知道這樣的版型會不會符合大家所需要><~
    所以內部配色也是依自己的喜好去修改><~
    謝謝晴>///< (抱)

    壯兔 於 2011/01/17 13:28 回覆

  • ∮雪莉∮
  • 謝謝你的分享

    希望你不停的創作新的作品(期待中~)

    要加油喔~

    雖然我不認識你

    不過因為我部落格是用狀兔而你的作品的緣故

    所以我已經推了喔~

    加油!!狀兔兒!!期待你再次出新的作品!!要加油喔!!

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

    壯兔 於 2011/01/21 15:08 回覆

  • ∮雪莉∮
  • 狀兔兒!!謝謝你^^!!(我已經加為好友了~)
  • 不客氣哦XD
    ^^

    壯兔 於 2011/01/21 15:22 回覆

  • 魚ㄦ
  • 壯兔兔
    這款樣式我要包走了喔
    可以自己換BANNER真的太好了

    很謝謝你^^
  • 不客氣哦!!!
    小布喜歡我也開心啦!
    (抱)

    壯兔 於 2011/02/01 21:08 回覆

  • Albee
  • 耶,這款好可愛
    剛好最近忙好要來重新整理網誌。

    補一下新年快樂哦,雖然過了 (汗顏)
    kekeke.
  • 歡迎歡迎歡迎~~
    Albee也新年快樂!
    很開心你喜歡耶!^^

    壯兔 於 2011/02/24 02:57 回覆

  • 依是
  • 之前有先打包了
    終於有空可以整理一下
    也改了欄位,很喜歡
    謝謝妳^^
  • 唯
  • 很清新的風格,剛好適合酷熱的夏天
    微微的涼風吹來格外清爽^^
    謝謝分享~~
    樣式帶回家了^^
  • 很高興唯喜歡這個樣式哦!
    最近真的很炎熱,,,,希望真的能帶給唯清涼的感覺XD
    歡迎帶回家^^
    謝謝唯的留言^^

    壯兔 於 2011/06/28 20:49 回覆

  • 秋野杏
  • 我還蠻喜歡這種簡單的風格呢~謝謝^^
  • 悄悄話
  • 悄悄話
  • 新東港美學
  • 這個樣式好舒服喔~ 可是下載頁面無法顯示網頁呢? ><
  • ChinHsi
  • 想帶走這個版型
    但請問壯兔一下
    不知能不能修改一些圖片呢?!