☼ 歡迎光臨!麻煩把跟文章無關的留言(或問題)留在留言板,請勿用注音文,謝謝。科學相關文章或交流歡迎到臉書頁(見右欄)。
對我來說,文章中有插圖時,最討厭的就是圖片太大造成右邊選單整個往下移,因為這樣很不整齊、不雅觀,而且想換篇文章看還要不停的往下捲到最下面才能找到選單,邊捲心裡還邊OS:「有完沒完阿!」太麻煩了啦!

我這麼龜毛的人怎麼能容忍這種事發生在我網誌中呢!基本上我知道的有四種方法。


#1. 把#Content 的寬度加大

這是我用的方法。通常樣式選擇裡的因為作者希望有某些風格,所以整個#Container 的部份不能改。其實,也不是不能改,而是#Top 的圖寬度是固定的,如果加寬的話就不美觀了。

因為我也只是剛開始研究CSS,要我自己寫一篇樣式出來太難了,我都是先挑我覺得可以改的,把#Container 和#Content 的寬度加大。

我目前的樣式:

#Container: 920px;
#Top: 920px;
#Content: 680 px;
#Sidebar: 240px;

我的#Container, #Top 和#pagefooter 是一樣寬的,覺得這樣看起來比較整齊。然後...
#Container (920px) = #Content (680px) + #Sidebar (240px)

是不是這樣算我也不知道,我是這樣算的。

基本上,對我來說,600px 已經夠寬得可以放很多圖都不會超出邊界而讓選單往下移了。


2. 把圖縮小

這聽起來好像廢話,可是對我來說也是可行的。因為我#Content的寬度已經有680px了,所以圖再縮也不用縮到很小,只要在600px以內都可以,通常我都把圖片縮到550-600px之間,看起來比較整齊。

怎麼知道你的圖片多大?要怎麼縮到你想要的大小呢?

我是用光影魔術手,裡面有一個縮放的功能可以讓你把圖片縮到你想要的大小。



把圖叫出來後,按下「縮放」的功能,也就是圖中標(1)的地方,就會出現一個小視窗(2),上面有給你設長寬的地方,長寬的比例是固定的,所以你只要改一個,另一個就會跟著變,如果想要寬度為500px,就在寬度(3)的地方改成500就好了,不知道圖片大小的也可以利用這個功能看圖片多大(用ACDSee看也可以知道圖片大小)。


#3. 放置捲軸

如果圖片真的很大,又不想縮小,那就放捲軸吧!

在圖片的地方加入下面的語法。

<div style=" OVERFLOW: auto; overflow-x: hidden; WIDTH:280px; HEIGHT:400px">(放入圖片語法)</div>

顯示圖片的長寬可以自己改,就是淺藍色字體的地方。

如果只想顯示寬度(x)的捲軸的話,就把顯示長度的捲軸(y)藏起來,就是把[x](深藍色字體)的地方改成[y],變成:

overflow-y: hiden;

Example:

插入圖片語法:<img src="http://p2.p.pixnet.net/albums/userpics/2/1/225821/1164150183.jpg" />

捲軸語法:<div style=" OVERFLOW: auto; overflow-y:hidden; WIDTH:400px; HEIGHT:333px"><div>

完成語法:<div style=" OVERFLOW: auto; overflow-y:hidden; WIDTH:400px; HEIGHT:333px"><img src="http://p2.p.pixnet.net/albums/userpics/2/1/225821/1164150183.jpg" /><div>

就會變成下圖。


這樣解釋應該很清楚了吧!


4. 固定文內圖片大小

這是Pixnet的新功能,在「網誌管理」的「網誌設定」那頁的最下面,有個「網誌圖片大小」設定,也就是下圖桃紅色框框的地方。



在那個選項裡輸入你想要的圖片大小,發表文章的時後,裡面的圖片就會自動縮成你設的大小,這樣就不用用上述第二種方法自己改大小了。這個新功能應該是這兩天才開放給非VIP會員,我自己是還沒用過,大家可以自己試用看看,應該是非常方便的呢!











創作者介紹

min'cellanea

minc 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • karencif88
  • 謝謝你,我要去試試囉!
  • karencif88
  • 在網誌的地方設定圖片大小很方便,但是很恐怖,它幫我修改圖片的地方,滑鼠指到的地方會閃個不停,像快斷電似的,真傷腦筋!
  • karencif88
  • 又發現另一個問題,朋友要回應時看不到迴響列表旁的"發表留言",因為顏色太不清楚了,而我用的grey2的版面找不到comment這個,怎麼改顏色呢?
  • minc
  • 嗯... 試看看加入 ".commentTitle a {color: #______;}" 的語法,color 改成你想要的顏色。
  • karencif88
  • 剛改的時候閃得厲害,後來就不會了,..另外我一個一個試,在li.subclass {
    padding-left:25px;
    }

    a {
    text-decoration: none;
    color: #701c0d;
    這個地方改了顏色,就可以看到"發表留言"了,也不知道這是什麼,總之,謝謝!真是開心~
找更多相關文章與討論