在圖片加邊框(基本、應用)

20.自訂樣板
01 /16 2015
幫部落格文章中的圖片加上邊框吧!
用戶可以套用的樣式將文章中的圖片加上框線。

此篇說明將以官方樣板的「white_style」為例。




在圖片上加邊框・基本篇

基本篇裡,用如同裝飾的線為圖片加上邊框。

frame4.gif 

1. 在樣式單(CSS)的編輯上,尋找「entry_body」

將本文展開後所顯示含括獨立標籤的母要素為<div class="entry_body">

在樣板的設定頁面的樣式單(CSS)上,尋找指定的「entry_body」位置。
(使用Windows時,用Ctrl+F、使用Mac時,用command+F來開啟搜尋頁面做尋找)

初期狀態
frame1.png 
為了能插入代碼,請稍微向下換行留空。

2. 紅色框框中的地方請輸入樣式

在該位置輸入的樣式


.entry_body img {
border : 2px solid #000; /
}

如此一來即可將框線設定為「寬度為2px的黑色直線」

插入代碼後

frame2.png 
此將在所有的圖片上加上邊框。若有必要時,請另外追加級別和指定選擇器。

在圖片上加邊框・應用篇

應用篇裡,將圖片加上如同拍立得照片的邊框。

frame5.gif 

1. 與上述基本篇的1.一樣,在樣式單上找出要插入代碼的位置。

2紅色框框中的地方請輸入樣式

在該位置輸入的樣式

p span img {
padding : 5px; /
background-color : #fff; /
border : 1px solid #000; /
}

*代碼的含意
padding : 5px; /* 設定照片邊緣的留白為5px */
background-color : #fff; /*設定照片邊緣的留白顏色為白色 */
border : 1px solid #000; /*設定照片邊框的顏色為黑色 */

插入代碼後

frame6.png

3. 套用樣式後,請進入文章的編輯頁面。

在文章中插入圖片後,如下面所示的圖片標籤將會自動插入。
(* 如果有連結相簿頁面時,則將會是不同的網址)

<a href="圖片的連結位置" target="_blank"><img src="圖片的URL" alt="圖片無法顯示時的代替文字" border="0"></a>

4. 請將圖片標籤以<p><span> --- </p></span>含括

<p><span><a href="圖片的連結位置" target="_blank"><img src="圖片的URL" alt="圖片無法顯示時的代替文字" border="0"></a></p></span>
只有以<p><span> --- </p></span>所含括的圖片標籤,才可以套用在樣板的編輯上所指定的框限。

blogmanualtw

歡迎來到FC2部落格!