Re: [blogger]傻瓜流圖片貼法

[del680202 (DAINA)]

※ 引述《windcanblow (戲謔人生)》之銘言：
: 與其說是心得不如說是腥得。
: 在搜尋板上已有的相關文章後，發現自己登入blogger，
: 已經是在功能相對方便的現在，像是有圖片上傳這種功能..
: 雖然看板上有推文說這個功能爛到爆，但我必須要說
: 就新手來講這個相當方便
: 因為它們自動幫忙調整大小，位置的擺設，似乎連邊框語法
: 都寫進去了，外面再加個免費的超連結。
: 總之，看了四天，在板友熱情的指導下終於稍微看懂blogg
: 內建的貼圖語法..
: 例：
: <a href="http://123.jpg">
: <img style="margin: 0px auto 10px; display: block;
:  text-align: center; cursor: pointer;
:  width: 376px; height: 490px;"
:  src="http://123.jpg" alt="" border="0" />
: </a>
: 目前腥得：
: 1.blogger其實可以一次上傳很多圖片，只要在上方的[新增其他圖片]點下去，
:   就會一直跑出新的瀏覽框，而且新手可以逃避現實地不去理會這些從電腦上
:   傳的照片都被blogger存到哪裡去XD。(就是不用開存圖區的網頁去剪語法過來)
: 2.它直接幫新手調整大小跟位置，不喜歡到時再砍掉或修改數值即可。
:     在板上大師們的教導下，我了解到了砍掉display: block，照片就可以在
:     同一列疊成一排，不會自成一列 (同時要記得CSS範本裡有沒有偷偷寫下同
:     樣的設定，有的話一樣砍掉)
:     接著是圖片長寬的設定，反正我只要記得自己文章最寬就是570px，圖片
:     寬只要疊超過這個值就會爆掉，因此不管有幾張照片，寬度只要下修到
:     總和不超過這個值就可以漂亮地並列在同一排上。(真是傻瓜到了極點)
: 3.所有的圖片一開始通通丟在最上面，可以快樂地慢慢把語法剪貼到自己想要
:   的位置(這根本不是便利好嗎XD)
: 4.<a href=   </a> 這就是超連結的語法，翻山越領終於在推文中發現這個秘密。
:   難怪看板友在討論貼圖時，為什麼連結語法總是很簡單的src=，然後我就是一長
:   串只有Neo 才看得懂的符號。
: 總結：對blogger新手來說，內建圖片上傳功能其實很堪用了。
:       (雖然我也知道熟了以後，它是非常礙手礙腳的東西)
: 以下才是偷渡的正題(被毆)
: 不過我還是有不懂的地方

w兄跟我用的是同一個基本範本阿 難怪配色一樣

: 1.   img style="margin: 0px auto 10px  這段是什麼意思呢？

style是設置他的css屬性

css網路上資料很多 margin是說這個HTML元素跟其他元素的外間距

這裡有篇文章還蠻清楚的

http://pinkyvivi.pixnet.net/blog/post/1131260

然後CSS教學推薦這個網站

http://css.1keydata.com/tw/

: 2.   alt="" border="0" 也不太明白(border好像是邊框的意思?)
border是邊框 alt則是滑鼠移到圖片上時的提示文字

: 3.<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
:    href=
:      不知動了什麼地方，圖片上傳後就多了這一串不知是什麼意思的語法
這是他的超連結語法 這段是google預設點了圖片後，會讓你移到上傳原始圖片位置

神奇的是 這還不是他圖片位置的原始連結，這個是我一直覺得他不方便得地方

上傳圖片後他連結原始長相應該是長下面這樣

 <a onblur='' href="A"><img src="B" width="" height="" alt="" /></a>


每次上傳圖片他都會產生一個size調整過的圖片B

部落格上顯示的都是這個圖片B，你直接看B的圖都是比較小的

而想看你上傳的真正圖片則必須移到連結A

然而移到連結A後，你看HTML原始碼 會在看到一段

<img src="C" alt="" border=0>

而這個C 才是你上傳圖片真正的位置

每次要找上傳圖片的URL都有夠麻煩，希望以後google會改善這點

: 4.圖片語法這麼龐大，上次板友建議的表格就不知該如何學著用..
我想到單純點的作法，直接抓出上面說的上傳圖片真正URL後

自己從新包裝 這樣或許會單純點 以上面例子為例

<img src="C" width="" height="" />

: 5.還是沒有學會圖片置中後，圖片下方多一行註解究竟該怎麼加上去，每次註解
:   都會自動切齊左邊，按space鍵無法讓它多往右邊移一點。
這點不太了解你的意思 提出一點自己的看法

或許你是想圖片用置中上傳後 可以弄一些文字在圖片下面一起置中

這樣的話你可以用一個div把你上傳後的code包住 並且把置中那段code移給他

<div style="margin: 0px auto 10px; display: block; text-align: center;">
你的圖片code
你的圖片文字
</div>

一點拙見 有錯請指正

: 不管怎樣，在大家的幫助下，短短幾天在下的blog就已經改善很多了..
: http://concerningbradleycooper.blogspot.com/2009/08/bradley-cooper_11.html
: 迴避一些不會處理的問題，網誌還是可以生得出來(駝鳥心態)
: 感謝各位QQ，尤其是snott大大還花時間丟水球教我。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.116.160.88
※ 編輯: del680202       來自: 59.116.160.88        (08/12 09:42)
→ hguei:上傳圖片後得到的網址將s400刪掉就是原始位置
試了一下 還真的

又學到了一樣東西

不過s後面的數字好像不一定 我的是s320

http://XXXX.xxx.xxx/xxxx/s320/x.jpg

的確改成

http://XXXX.xxx.xxx/xxxx/x.jpg

就是正確圖片位置

※ 編輯: del680202       來自: 140.117.42.100       (08/12 14:28)
推 windcanblow:我昨晚點進你的blog就笑了XD..
→ windcanblow:關於div的用法snott板友跟你講的一樣
→ windcanblow:看來純粹是我還沒找到訣竅..(抱頭)