小屋創作

日誌2007-09-15 20:24

小屋系統預設圖片更換教學番外篇 - 巴哈姆特完全攻略(?)

作者:淵

今天這一篇讓各位徹底打贏巴哈姆特(?)

<<09/16新增補充教學用圖片>>

根據
u4大【CSS】巴哈小屋,首頁巴哈姆特圖修掉法這一篇的教學,

今天來讓各位學會如何完全隱藏巴哈姆特龍,順便放個新圖片上去~~
↓↓↓↓就是它↓↓↓↓



(因為這部分本來是站方預定設為上傳圖片後可以直接看到的部分,只是現在還沒開放)

建議各位在開始修改之前還是要備分哦~~


教學開始。



1.請打開


2.找到下面這段連結

請把這整段修改成下面這樣:


.article_pic{
/*border-left:1px dashed #F67383;*/
/*border-right:1px dashed #F67383;*/
/*border-top:1px dashed #F67383;*/
/*border-bottom:1px dashed #F67383;*/
border:none;
height: 0px;
width: 0px;

會這樣做是順便幫大家備個份,萬一將來站方開放此功能的話,只要把最後三行消掉
然後把第二~四行的『/*』消掉就可以了

3.按照以上作法完成的話,圖示會類似我下面這張


4.如果滿足於如此...請直接按『確定送出』




5.以下應該算是進階教學(?)

接下來請找到下面這段原始的CSS

請將這一整段修改如下:


.articlebox{
border:1px dashed #F67383;
background:url(http://圖片連結) no-repeat;
/*background:#FCD8D8;*/
background-position:left;
padding-left:15px;
height:136px;
width:720px;/*這一行的意思是強制寬度變成720px(寬度可以自訂)*/
/*width:100%;*/
}/*個人部落閣最新文章及GP值底色*/


原因和上面的一樣,幫大家備份@@
當然,其中的『width:720』,這個720請你自己調整,看你想放多大多小都可以,

↓↓↓做到這裡的話,大概會像下面這樣↓↓↓



至於圖片的部分,請各位把自己想放的圖片放在上面寫的『圖片連結』
要調整圖片靠左靠右放的話,
請修改上面的
background-position靠左:left、靠右:right、置中:center
當然也不要忘記調整一下高度height,才可以讓你的圖片完全秀出來,這裡要設成你這張圖的高度哦~

↓↓↓做到這裡的話,大概像下面這樣子↓↓↓



6.可能有人會問,如果圖片靠左放,可是文字也是靠左啊~~那怎麼辦?
請調整上面的
padding-left,這是文字距離左邊的框框有多遠的意思
如果你的圖片不是涵蓋住整張圖的話,
就大概看一下你的圖片有多寬,然後再加一點數字放在padding-left這裡就好了,
如果你按照上面的程序,然後剛好又和我一樣圖片放左邊的話,
用預覽看的話大概就會像下面這樣嚕~~



7.不過照我這樣做的話只會有一個缺點,因為這裡的圖片和GP那邊的圖片是共用的,
按照我的方法作的話,
GP那裡的樣子會變成下面這樣↓↓↓
雖然我覺得這樣還蠻可愛的啦,哈哈XD



u4大在這裡是有建議可以不要放padding,改成text-align:center可能會更好,
如果把
『padding-left:15px;』換成『text-align:center;』的話,
↓↓↓GP這裡就會回復到原來這樣↓↓↓

不過這個請看得懂的人再改="=看不懂的人就儘量不要勉強(汗)


7.如果預覽看完很順眼的話,就按『確定送出』吧~





--
順便替我自己打個廣告好了="=....
聽說我有參加小屋改造王,有興趣的人可以考慮幫我按一下
喝采這樣...

53

83

LINE 分享

相關創作

如果你的帳號遭到巴哈姆特永久禁貼 或無緣無故水桶

呼籲各位對巴哈姆特提出民事告訴

Cyberpunk 2077 Build : 我流刀劍忍者

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】