轉載自 Youtube 五月天傷心的人別聽慢歌 MV 封面
你有在寫部落格嗎?
如果有的話不知道你有沒有寫過教學文章呢?
Kent 我自己經常會在部落格上分享一些3C及網頁設計上的小技巧，
有些教學的步驟會使用圖片來說明，
但是圖片在痞客邦上最大能顯示的解析度大約在寬度900左右…
所以有些圖片顯示上就不是非常的清楚…
那麼該怎麼處理呢?
這就是 Kent 要與你分享的網頁設計小秘密~
痞客邦預設圖片縮放功能
你有注意到嗎?
假設你跟Kent一樣使用痞客邦來寫部落格的話，
你的文章裡的圖會在滑鼠移到圖片時會自動幫你放大，
這時候你的圖片又剛好很大的話就會跑出版面或是整個圖被放大後有部份被裁掉…
在滑鼠移到圖片上面的時候放大縮小造成的文章上下晃動其實對於讀者來說蠻不友善的，
所以Kent會建議你先到痞客邦的後台把這個貼心(?)的功能關掉。
痞客邦關閉圖片縮放功能
把痞客邦的圖片縮放功能關閉後文章的排版看起來就不會任意晃動了~
接下來Kent要教你該怎麼幫圖片動次動次起來，並且不太會影響到文章的排版。
首先在痞客邦的文字編輯器裡插入一張圖，
然後切換到原始碼介面找到剛才的圖片，
你會看到類似下面的語法:
<img src="圖片網址" alt="圖片替代文字" title="圖片標題">
我們在裡面加入一個屬性 class="zoom"，語法如下
<img src="圖片網址" alt="圖片替代文字" title="圖片標題" class="zoom">
你可以在想要放大的每一張圖片裡加入 class="zoom" 這個屬性，
裡面沒有任何的空格~
然後在文章的最上面加入下面的語法
<style type="text/css">
.zoom {
width: 70%; /* 可調整，不要超過下方的寬度否則不會有變形的效果 */
height: auto;
transition: all .5s;
}
width: 70%; /* 可調整，不要超過下方的寬度否則不會有變形的效果 */
height: auto;
transition: all .5s;
}
.zoom:hover{
width: 90%; /* 可調整，最大值100% */
</style>
width: 90%; /* 可調整，最大值100% */
</style>
完成後就能切換回一般文章的編輯頁面，
這樣一來我們就能自己控制有哪幾張圖片要放大，
而且還不會影響到版面。
另外再與你分享一個小技巧，
如果你用來教學的圖片字實在是太小，
放大後依然不是很清楚的話，
你可以將圖片加上超連結，
讓讀者點擊圖片就可以看大圖，
這樣一來讀者能看的更詳細，
也不會讓你的好不容易做好的教學白費了~
留言列表
