2009.9.30 更新
目前Blogger已經推出新版的編輯器，圖片上傳方式也有改變，請參閱，
Blogger文章編輯區新版模式正式啟用
最近研究了一下，原來blogger提供的大中小圖片格式，為400px、320px、200px，譬如我這張圖片大小為500px*375，
原始尺寸
大
中
小
所以最大的也只有400px，對於我想放風景照的圖片就很不方便，總覺得太小，後來發現只要更改一個地方就會讓他以原來的尺寸呈現，下面是我們插入圖片會產生的語法，注意下面語法紅色處
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXZV6l4uqvSYBjZz7jR4-V9QI3zqQSG-C-eYJK5MiLsC4P4Rge_HkLrlCxXS6LxZSfiRrW1TwJmcWR0GMq2XlXmEYEv8jpHC4TTarF5tWaRDqW9zRBNeLLNlN9Ba3HtMDaNBRi3vHL6c/s1600-h/train.jpg"><img id="BLOGGER_PHOTO_ID_5162330399660371938" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXZV6l4uqvSYBjZz7jR4-V9QI3zqQSG-C-eYJK5MiLsC4P4Rge_HkLrlCxXS6LxZSfiRrW1TwJmcWR0GMq2XlXmEYEv8jpHC4TTarF5tWaRDqW9zRBNeLLNlN9Ba3HtMDaNBRi3vHL6c/s400/train.jpg" border="0" /></a>
img src= 這一段是原始圖片的來源，即是從你電腦上載經過blogger縮放的圖片
s1600-h以最最大尺寸呈現
s400 官方所設定"大"的尺寸，如果你上載圖片時選擇小，這時就不是s400而是s200，以此類推s320就是中。
所以我們在這裡將s400改成s1600（官方設定可呈現的最大值）就會讓圖呈現最大，也就是你原始圖片的大小（最大也只能到1600PX）。
其實我不知道google官方為何要這樣設定，我猜是為了讓網頁更快的顯示，圖形小顯示速度會較快，只是在我自己的習慣，我不喜歡按下圖片再去看原始的圖片大小，總覺得很浪費時間，又要多按一次鍵，除非是類似圖說的圖片，才有這必要，如果blogger的版面能容納，儘量就在圖片處理時將圖片整理好，否則一篇遊記的圖片，每張都需要網友去點閱看更大的圖，誰願意呢?我自己都不想呢！
其實這問題困擾我蠻久了，但在中文網站都看不到類似的說明，官方也沒有說明，最近看到一個日文網站有提到這個問題，雖然日文不是很通，但大概有個譜，就自己試試看，將圖片語法的img src裡的s400改成s1600，就能夠以原始的圖片大小呈現了。
而圖片格式除了上述的大小之外，還有72px、144px、288px、512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px的大小，最小是72PX，最大是1600PX，你都可以視版面自行變化，可以利用在超連結（a href）這部分圖片或是原始（img src）的圖片內容裡，要注意的是如果你原始圖片只有500px，就不可能拉大到576px大小，他會以500px呈現，反之你的圖片大過1600px，最大也只能呈現1600px大小。
像有的人喜歡用文繞圖，有時覺得圖片太大又要更改，這時就可以將語法改成s144(像左圖大小)，然後圖片置左或是右，作彈性的運用，所以發現這個秘訣之後，以後運用圖片就能夠更多變化了。其實最佳利用圖片的方式應該是存在網路相簿裡，以指定url的方式來利用，那你就不用改設定，直接連結即可，目前blogger上載的相片都是指定存在PICASA的相簿裡，你也可以另開相簿本來存你要利用的圖片，將整理好的圖片直接匯入，這樣會方便許多。
如果你不是BLOGGER的使用者，也還沒有PICASA的相簿，建議可以利用PICASA的免費相簿，這套軟體是免費的，可以管理、組織、為你的相片加上標籤，也可以修圖及作種種運用，是一套很專業的相片管理程式。而目前免費所提供的功能限制為，儲存空間為1GB、相片不可以大於 20MB，詳細情形可參閱PICASA網站說明。
2008.11.24更新
Blogger內建圖片語法增加了width及height，如何解決，請見
Blogger內建圖片語法改變
參考網站
Blogger で画像の表示サイズを変更する方法
想請問張貼flash在文章裡
回覆刪除也一樣是用相同語法嗎?
flash的語法通常是用<embed....或是<script language="text/javascript" ，是不一樣的。
回覆刪除謝謝您的回答
回覆刪除目前正苦於製作出的flash過大超過邊界
我正在製作專題的blog
以後會常常打擾您 先說聲抱歉
你好.很多謝你這個post.我差點為了100px的分別而轉去yahoo開blog~~這個資料十分實用~~
回覆刪除有的人會嫌麻煩還要自己改，其實常用的人複製貼上習慣就好，我也是一張一張改。
回覆刪除其實最佳利用圖片的方式應該是存在網路相簿裡，以指定url的方式來利用
回覆刪除請問連結要貼在 ''撰寫'' 還是 ''修改 Html'' 用連結還能調整大小嗎?
相簿裡的圖片連結是http://picasaweb.google.com.tw/nusjmevms/FrondgetSBlog/photo?authkey=RI2dwxr4xf8#5217679632761466290
就貼上就好了嗎?
你的語法應該是有另外設一個專用相簿吧，不是部落格預設的那一個，在picasa後台介面不是有專供調整大小的選項嗎?用那個調整後再把與法貼到"修改 Html'裡即可，我這篇文章的用法是直接在撰寫裡插入圖片所產生的語法，不知這樣解釋你能了解嗎?可以再討論。
回覆刪除"你的語法應該是有另外設一個專用相簿吧"請問語法是只我的網址嗎？
回覆刪除''後台介面''是什麼？
部落格預設是上傳圖片時,他幫我放到picasa相簿的嗎？
其實那個相簿不是我建的,是我在張貼blog時要上傳圖片時,他幫我放到picasa相簿
"調整大小的選項"找不到,只有離線的picasa軟體可以改
之前我把圖片上傳在到"修改 Html"修改語法是成功的,只是還是不太懂''指定url的方式''
有一張圖是這樣的,就不知要怎麼改了
語法網址http://docs.google.com/Doc?id=ddnm5572_4fpphfcd9
-------------------------------------------------------
你的blog首頁有《 閱讀全文... 》
我是參考http://jas9beta.blogspot.com/2006/12/beta.html
用
語法網址http://docs.google.com/Doc?id=ddnm5572_5fvqs6vdd
來寫,可是我又習慣在windows Live Writer寫blog所以沒辦法設文章範本結果最後每次po玩後又要改語法
把多的< / span >刪掉
不知道您是用這種語法還是不一樣的,哪一種語法是可以加快速度？
聽說有些只是隱藏起來,其實還是會讀取，另一種的好像可以不預先讀取全文
非常感謝您的教導
是啊，一般picasa自建的語法應該是http://bp0.blogger.com/_c2........可是你的語法是http://picasaweb.google.com.tw/nusjmevms...這是自己有另設相簿的語法，所以我才覺得奇怪，要在web上使用picasa語法，進入picasa後台就可找到調整的語法，你有Google帳號就可啟動，picasa線上服務，離線的picasa軟體我很少用在，如果是指定url你就把圖片裁剪成你要的大小，然後插入<img src="你的網址">，就可插入圖片，指定url就是不要再利用語法控制大小的作法，而是將實際的圖片上載到部落格上。
回覆刪除我是用羊男的繼續閱讀，每次都要自己加上<span class="fullpost">不用預跑全文應該會快一些。
請問picasa自建的語法的相簿在哪裡?
回覆刪除我在建blogger之前就有開picasa相簿,沒放圖片,直到建blogger之後張貼文章上傳圖片後相簿才多了圖片,那些圖片刪掉blogger圖片就會不見
這種"實際的圖片上載到部落格"的方式沒有1600px的限制嗎？
最大的問題是"picasa後台"到底在哪裡，到處都找不到
------------------------------------------------------------------------------------
如果要引用別人的blog的文字,而該blog沒有明講引用方式,除了在自己blog註明,還要在被引用的blog通知嗎？如果b引用a,c引用b的文章那要
c要註明b寫的還是a寫的
假設我要在我的blog寫上"背叛"的歌詞,這也要引用之類的嗎？
-------------------------------------------------------------------
"本網誌文章授權使用創用CC"我的blog也想遷入這個東西,但都找不到程式碼
------------------------------------------------
我看到很多blog都有recent reader的功能我去申請了mybloglog但是找不到遷入blog的方法
要回的東西太多，下午我會把picasa的教學文寫出來，引用部份目前只有相同是blogger的可以引用，其他都是自己用註明的，通知對方留下自己文章的網址，就看自己的習慣，引用的文章，如果是一模一樣的文章，當然是註明原始的，其它的自己判斷，其他問題晚一點我再回覆你。
回覆刪除創用CC使用這個網站http://creativecommons.org/license/?lang=zh_TW
回覆刪除選擇你要的，然後按下"選擇一份授權條款"就會出現語法了。
進入Mybloglog後台，你的部落格圖案下方有個widget選項按下就會出現語法的設定，但你的部落格要先認證才行。
帮了很大的忙，一定要感谢你。
回覆刪除不客氣，歡迎常來逛逛。
回覆刪除好文!非常實用, 這個問題困擾我好久, 今天終於有解了^^
回覆刪除謝謝，不過最近picasa好像有改版，好像有些地方不一樣，有空要再測試看看。
回覆刪除感恩哈~
回覆刪除作者已經移除這則留言。
回覆刪除謝謝你的詳細教學，真的獲益良多。
回覆刪除關於上載圖片，我遇到一個令人費解的問題。雖然已依你的指導更改語法設定為原始圖片的大小，但是呈現出來的圖片總有明顯的失真情況，如模糊了、雜訊多了等；奇怪的是，在一般圖像軟體上看是正常的。這是甚麼原因引致？有解決方法嗎？請指教。謝謝！
文章最下方11.24更新那篇你可以看看，是不是有用，我們再來討論，因為你的網誌沒有開放，我看不到你的圖片。
回覆刪除http://01mistery.blogspot.com/2008/11/blogger.html
謝謝你的回覆。
回覆刪除之前有參考過那篇更新文章，不過它與我的問題並無直接關係。
如果你不介意，我過兩天把網誌開放給你看看，好嗎？
你也有把width和height改成實際的大小吧，你可以先把圖片語法貼上來給我看看即可，先看語法哪裡有問題，記得將<>改成全形，不然無法在留言區貼成功。
回覆刪除以下是把width和height改成圖片實際大小的語法，也有把s400改成s1600。請看看：
回覆刪除＜img style="width: 640px; height: 480px;" src="http://1.bp.blogspot.com/_C56Cxi30Vwc/SZ1uIaQId5I/AAAAAAAAAWc/L3gZIf-A_zM/s1600/3+new+books.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5304517026877306770" /＞
你的語法沒有錯誤，應該不至於影響圖片的展示，我想你可以參考這篇文章的解釋
回覆刪除http://blog.dcview.com.tw/article.php?a=UmwGYgJnCj8%3D#replyDzIGYwZhBzc=
因為這方面我不是很了解，是否是因為browser支援色彩的關係。
綸太郎，您好
回覆刪除我的部落格在pixnet，
http://chris8106.pixnet.net/blog
每次都要將滑鼠移到圖片上面才會顯示原來大小，請問我需要改什麼才能固定圖片原來的大小呢？
謝謝解答^^
Pixnet問到這裏，真佩服你，進入後台，到部落格»部落格管理»基本／進階設定，有一個"文章顯示相關設定"，把文章圖片大小，強制調整至400px選項取消，改成不調整即可。
回覆刪除謝謝你的幫忙。可是那篇參考文章中提供的CMSProxy下載點已失效，因此無法試驗一下。
回覆刪除噢！請問為何在Firefox可正常呈現自訂的背景圖，但在IE卻看不到呢？
我知道IE6不支援透明圖層的圖檔，或是你的IE功能選項針對某個圖檔的連結有阻擋，因為我沒有網址可看，只能這樣猜測。
回覆刪除綸太郎，
回覆刪除我已經改設完成了，無限感激啊～
我要把你的網站加入連結，為你宣傳啦～
甘嗯啊～^^
謝謝，歡迎有天搬來blogger啦，哈。
回覆刪除理解。謝謝！
回覆刪除請教站長.
回覆刪除文章首頁顯示的圖片能夠縮放的嗎?
就是我的圖可能太大了,而圖片只顯示一半.
謝謝
你應該是從後台標頭處直接上傳首頁圖片吧，建議可以直接修改後台html用語法代替，找到#header-inner將裡面的圖片網址改成你現在的http://lh6.ggpht.com/_3yauRk4JgU8/SgZaNbgyXNI/AAAAAAAAJiU/M-rvqOcdwUA/s800/%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg
回覆刪除記得備份先 還有我不知道我現在看到的是否是你已經改好的東西，因為圖片應該已經是顯示全部。
我想請問有關blogger圖片的問題，但和大小控制無關。blogger文章內的圖片，是否能設定把圖片鎖住，換句話說，讓瀏覽者無法點照片就會跑到另一頁面，或是無法按右鍵複製？
回覆刪除謝謝。
在文章介面找到圖片的語法，類似＜a href...＞＜img src...＞＜/a＞，把前後的＜a href...＞及＜/a＞拿掉就不會有超連結的效果，另在picasa介面也有提供不連接到圖片頁的語法，你注意看一下就可找到，至於不要右鍵複製，如果對方用的是Firefox瀏覽器就破功了，不想被複製，只好自己在圖片上加浮水印是比較建議的方式，不然鎖右鍵很容易被破解，Google一下，"鎖右鍵"就會找到很多方法了。
回覆刪除成功囉！綸太郎，謝謝你。
回覆刪除你好
回覆刪除我想請教一下，我的banner版型的語法要怎麼改才能讓我的圖片符合他版型的大小．圖片不重覆的話，我的banner右旁總會多一塊空白出來，我試過放大我的圖片大小，可是它會縮小我的圖片，請問有辦法救嗎？我試很多都沒用。先謝謝你了。
你把圖片網址從s720改成s1600應該就可以了
回覆刪除有問題想再請教你
回覆刪除想請問如何限制圖片在文章中的大小
我想控制所有圖片最大只有800x600
這樣要去哪裡修改html呢
謝謝
我是在文章html編輯區一張一張改的。
回覆刪除謝謝
回覆刪除我已經可以調整圖片大小了
可是為什麼還是會出現手指頭可以點圖片..
這要怎樣取消
我已經是放到最大了
圖片本身是800x400
文章欄寬都調整好了
可是沒法取消手指頭
@_@"
手指頭會比較麻煩，你必須要將<img src=...>前後的<a href=....>和最後的</a>都去除才行。
回覆刪除可以了
回覆刪除謝謝
綸太郎
回覆刪除不好意思又來打擾你了...
我用新版編輯器上傳圖片，不管圖片大小是選擇怎樣的size
放上去後圖片寬度都會變成和文章版面的寬度一樣寬，
所以整個圖片都會變形...(就像最新的那篇test的圖片一樣)
我也試過進Html版面把圖片解析度改成s1600，也試過調整圖片的寬度和高度
但依舊沒用...
請問我是哪個部份沒修改嗎??
再次麻煩你了...謝謝你~~~ ^^
附上我圖片的語法:
＜div class="separator" style="clear: both; text-align: center;">
＜a href="http://4.bp.blogspot.com/_ATPhipi-49w/TG1Jcc4bPbI/AAAAAAAAEHM/BKNyh6Zi6L0/s1600/IMG_6376.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"＞＜img border="0" height="150" ox="true" src="http://4.bp.blogspot.com/_ATPhipi-49w/TG1Jcc4bPbI/AAAAAAAAEHM/BKNyh6Zi6L0/s1600/IMG_6376.JPG" width="200" /＞＜/a＞＜/div＞
s1600就是最大的尺寸，你應該是調成s200才會是200px的大小，
回覆刪除另外，你看你後台整個模版的html的語法，有一行是
.post img { padding: 0; width: 100%; text-align:left; display: block; padding: 3px; border: solid 1px #f2f2f2; }
你把裡面的width: 100%; 刪除掉，看看會不會恢復正常。
耶~~ 成功了耶~~~~
回覆刪除圖片終於恢復正常了...
謝謝綸太郎!!! :)
在第 20 的回覆那邊 發現到跟我遇到同樣問題的問題
回覆刪除就是圖片上傳 picasa 會失真模糊......
.
根據原始圖檔與上傳的圖檔比對之後發現
picasa 會壓縮圖檔的大小
造成失真模糊的情況......
.
請問綸太郎大大 是否有解決的方式 ??
不要讓 picasa 壓縮圖檔的大小呢 ???
謝謝~
.
by 小兔~
picasa本來就會壓縮，你可以參考這篇 http://picasa.google.com/support/bin/answer.py?&answer=13821 或許使用picasa的軟體，失真情況可以好些，但是要進到程式再貼相關程式碼到部落格就比較麻煩。
回覆刪除你好，不好意思請問一下，如果我想要將文章預覽裡的圖片變大，該怎麼調比較好呢?因為我去POST區域怎樣都找不到可以調圖片大小的....
回覆刪除http://keepopz.blogspot.com/ 這個是我的部落格，我想要用成http://linyenchou.blogspot.com/ 這樣的文章預覽模式QQ
謝謝你!!!!
你就將後台html裡的語法
回覆刪除img_thumb_height = 195;
img_thumb_width = 260;
改成你要的大小即可
你好，真的非常感謝你:)
回覆刪除圖片已經可以調了~好開心喔!!
不好意思再請教一下，我想要將預覽裡面的文字不繞圖，
.post-body,overflow:auto{margin:px;padding:0px 40px 0px 0px;font-family:Arial, Helvetica, Sans-serif;font-size:15px;line-height:25px;} 所在在這段語法裡面加了overflow:auto，可是發現竟然無法改字的大小和間距。
請問有另外的解決辦法嗎?
謝謝你!!!!不好意思麻煩妳了
第一，語法錯誤
回覆刪除第二，應該是
.post-body {
裡面放你要的格式}
第三，預覽的頁面設定，應該是在thumb同一個script裡改的，跟.post-body是一般文章的設定應該是不一樣，你可能要自己每個都試看看修改。
你好，我這幾天找了很久，想請問一下你說所說的thumb同一個script裡改的 是img_thumb_height = 195;
回覆刪除img_thumb_width = 260; 裡同一個script嗎?
因為看到有一塊script發現裡面就是包含.post-body。
真的是不好意思麻煩了QQ 謝謝
我找了好久還是無法解決阿...
因為我看不到你後台所有的原始碼，只能憑部分猜測，如果方便的話，可以告訴我你用的是哪個模板嗎?我才能幫你看。
刪除你好，我是使用這個http://www.zoomtemplate.com/2011/11/blogger-template-locksmith.html 版型。
刪除我是想用成http://linyenchou.blogspot.com/ 這個網站的文章預覽模式。
非常感謝你抽空幫忙!!!真的是麻煩你了!!!!萬分感謝
如果不想文繞圖，就在img_thumb_height = 290;這個scrip語法裡，將imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"> 裡面的float:left;拿掉即可。但是他的文字就會跑到圖片下方，如果你要的是文字要在左邊，預覽時文字不要跑到圖片下方，只能靠你的readmore的文字數量來控制。
回覆刪除至於字的大小和間距，改這個.post-body{margin:0px;padding:0px 10px 0px 0px;font-family:Arial, Helvetica, Sans-serif;font-size:12px;line-height: 20px;}
改成font-size:15px;
文字間距 letter-spacing: 3px;
行與行的距離 line-height: 20px;
改過就是
.post-body{margin:0px;padding:0px 10px 0px 0px;font-family:Arial, Helvetica, Sans-serif;font-size:15px;line-height: 25px;letter-spacing: 3px;}
你自己在慢慢調整。
非常感謝你:) 這個問題真的解決了!!!(爆淚)
回覆刪除但我發現如果要靠readmore的文字數量來控制的話，官方的readmore在我這個版型似乎無法調左右耶，我已經看了你的教學文旦沒有發現官方的readmore，是這個版型的問題嗎? 謝謝
另外再請教一個問題，http://i.imgur.com/01FeO.png 其實這是我最終想要調整個文章預覽模式，只是想沒到我這個版型這麼複雜(汗) 我想要將日期和文章標題放在一起，我套用了一下別人的一塊語法
h2 {
border-bottom: 1px solid #D9D9D9;
color: #1F2122;
font-size: 15px;
font-weight: normal;
margin: 0 0 20px;
padding: 0 0 15px;
text-transform: uppercase;
}
h1,h2,h3,h4,h5,h6 {font-family: Georgia,Geneva,"Times New Roman",times;}
有顯示了日期，但標題怎樣也無法移動....我也改過了post-title，但部落格都沒動靜..請問一下如何變動?這幾天都麻煩你了真心感到不好意思，謝謝版主總是如此熱心的幫助我這語法殘手阿QQQQQ
抱歉，太久沒改模版了，readmore是這個模版的關係，跟官網沒有關係，要修改的話，找到
刪除summary_noimg = 600;沒有圖片的摘要字數
summary_img = 420;有圖片的摘要字數
數字自己調整，越小越好。
如果要顯示日期，改這個 h2.date-header{margin:1.5em 0 .5em;display:none;} 將display:none;拿掉，日期才會顯示出來
至於要將兩者並排，post-title的字型大小及行距都要調整，因為左手邊有日期，所以要設padding-left跟左邊界的距離，然後其他的東西不要，所以將.meta_date裡面的都顯示無display:none;
改成像下面這樣
h2.date-header{margin:0 0 .5em;font-size:12px; float:left;}
.post-title{color:#6A645A;margin:0 0 10px 0;
padding-left:100px;font-family:Arial,Helvetica,Sans-serif;
font-size:12px;font-weight:bold;}
.meta_date{display:none;background-後略....)}
.meta_author(display:none;
.meta_comments{display:none;
其實再過不久blogger要改版，這個舊型的也不知道可以用到什麼時候，所以我都很少再改了，
所以說現在改的語法到時候如果blogger改版，有些可能就會失效了嗎?QQ
刪除http://www.garancedore.fr/en 請問一下這個版型的文章預覽模式要改是不是很複雜?
總覺得用部落格這種東西問題好像都會一直跑出來啊哀
謝謝TTTTT
你現在用的版本是2010年6月更新前的，如果想用更多blogger的官方功能，還是用目前最新的，我是這樣想的，至於會不會失效，你應該有在後台看到這行字吧，"舊版 Blogger 介面將於幾個月後停用。"
刪除至於你說的版型，他不是Blogger的，應該是WordPress，如果你以後還是要這類型的模板，建議你研究http://wordpress.org/
還是動態模版你也可以參考看看 http://01mistery.blogspot.com/2011/10/blogger-dynamic-views.html
最後我的建議是 部落格內容比較重要，模板挑個順眼的就好，這是我改過N次之後的感想。