2007/01/23

教學:在BLOG圖片加上框

我寫完才發現...這篇的範例圖片也都會被加上背景
所以會有兩層= =,目前沒想到方法,就挑著看吧!

不曉得有沒有人發現,我的BLOG內文中的圖片
在右下角都有一個類似翻頁感覺的裝飾

什麼!你沒看到= =",請按上一頁XD

今天修改了圖片,就順道來寫個說明
首先你要有一張圖片,當然我也是A來的


框框裡面就是底下的圖(框框是網頁語法,下載的圖不會有)
之後拿到PS或影像編輯軟體加字,像這樣(也是我現在用的)


之後上傳到你的網頁空間,這裡是上傳PIXNET的相簿資料夾(我是放在隱藏的地方^^)
之後請到管理介面的版面管理=>編輯CSS的地方(其他BSP請自己找)
加入
.blogbody img {
padding-top:15px;
padding-right:25px;
padding-bottom:25px;
margin-left:0px;
background:url
(http://p8.p.pixnet.net/albums/userpics/8/6/16186/1169542094.gif)
right bottom no-repeat;}

但是因為PIXNET BLOG有四個板面可以選,在"yam"模板這個指令才有用
以下分段說明:

  1. ".blogbody img {"
    這個是要指定你內文的CLASS,以PIXNET的四個版面來看
    gray,gray2 改成 ".mainEntryBase img { "
    wretch 改成 ".innertext img { "
    yam 就是 ".blogbody img { "
  2. "padding-top:15px;padding-right:25px;padding-bottom:25px;"
    因為圖片幾乎都會比背景大,所以要讓背景露出來,就必須把它"喬"一下
    PADDING就是可以讓圖片旁邊留空已達到把背景露出來,Top 上,right 右,bottom 下
    整行是說"我要圖片上面留15pixel,右邊留25pixel,下面留空25pixel
    就可以利用空白處讓背景跑出來
  3. "margin-left:0px;"
    此行可加可不加,如果覺得圖片太靠左或靠右才需要加上
    0是都不動,正值(EX:5px)往右邊移,負值(EX:-5px)往左邊移
  4. "background:url(你的圖片網址) right bottom no-repeat;}"
    請把你上傳後的圖片網址放到()裡面,說明後面的東西:
    right bottom no-repeat:背景圖片"靠右" "靠下" "不要重複"

結束,收工
儲存看看結果是不是你要的,再慢慢修正
祝各位有美美的BLOG

沒有留言:

張貼留言