2009年5月從無名小站搬過來後,
使用上都很順利,
但每次PO完文章,
就會遇到二個不大不小的問題。



一、文章中的相片自己會縮小,用滑鼠游標碰到才會再放大。


第一個問題其實無啥大礙,
但許多相片中的文字或臉型,
會因此被擠壓,
龜毛的大西瓜覺得很難看。

而且這個問題比較好解決,
從「管理後台/部落格管理/基本、進階設定/文章顯示相關設定/文章圖片大小」選項中,
選擇「不調整」即可。

這樣圖片尺寸就跟相簿一樣,
不會自己隨便亂縮小。




但這樣一來又遇到另一個問題:

二、照片右側明顯被切邊。


解決這個問題的最單純方法,
是直接更換部落格樣式即可。

但念舊(實際是懶惰)的大西瓜,
不想隨便換掉已經看得很習慣的樣式,
更何況之前找過幾個滿意的樣式,
預覽之後,
問題不但沒解決,
甚至被切得更誇張。

而痞客邦部落格樣式的設定,
是用CSS語法,
釜底抽薪的方式,
就是從原始碼中直接變更。

對網頁設計完全沒概念的大西瓜,
開始在網路爬文,
還好有熱心的網友提供資訊,
給了大西瓜靈感,
加上自行測試過幾遍之後,
總算找到解決的方法。



一、
先進入:「管理後台/部落格/樣式管理/自訂樣式/CSS原始碼編輯」

二、
修改其中三項參數「#article-area 」、「#content」、「#container3」中的「width」數值。


以大西瓜的部落格為例,
會切到文章中的照片,
最關鍵的參數是文章區域「article-area」寬度。

原先樣式預設的數值為 width:570px,
大西瓜加寬變更為 600px,
這樣一來文章欄位寬度跟相片一致,
右側不再莫名奇妙被切邊了。

但文章區域加寬之後,
右邊會被原本的側邊欄位蓋住。

這時候必須再把內容區域參數「#content」再加寬,
效果等於將原本的側邊欄位向右推一些出去,
免得蓋住已經加寬的文章內容,
樣式的預設值是 width:580px,
大西瓜將其調整為 620px。

如此文章右半邊不會被遮住,
與側邊欄位之間,
又能保持適當的間距方便瀏覽。

但是第一次照上述順序修正後,
側邊欄位居然整個消失不見,
跑到文章最下面才出現,
原來是文章區域及內容區域皆加寬後,
整體部落格的區塊「#container3」寬度不足。

大西瓜將預設值從 width:820px,
調整為830px之後,
側邊欄位又從最下面,
回到右邊正常位置了。

找到解決方案後,
將來若是要放更大張的照片,
也不成問題了。

沒學過網頁設計的大西瓜,
將此自行摸索的過程紀錄起來,
以備不時之需,
並提供給有需要的朋友們參考,
如果大大們有更適合的解決方案,
也希望不吝告知。



從Yahoo知識中找到的資訊:痞客邦部落格CSS問題

hn8501 發表在 痞客邦 PIXNET 留言(8) 人氣()


留言列表 (8)

發表留言
  • hominwu
  • 不好意思 想請教您, 我把版面改大之後, 如何把最上面的Title圖片也變長變大? 我下面的文章變寬了, 可是最上頭的圖片沒變寬, 變成兩張連在一起? CSS語法改哪裡呢? 謝謝喔~
  • taiwannomad
  • 版大您好。想請教一下,pixnet預設是滑鼠移到圖片上會放大成原大小,但是會被側邊欄蓋住,如果我希望能夠反過來蓋住側邊欄,像這樣http://goo.gl/GgdsH ,應該怎麼改呢?謝謝^^
  • julofivey
  • 謝謝分享
  • 訪客
  • 很棒噢~謝謝你的分享
  • birdplus
  • 謝謝分享,第一個問題順利解決囉!
  • remia
  • 非常實用,太感謝您了~>///<
  • 飛翔
  • 謝謝你
    受惠良多
    假日快樂
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消