↓
將自定欄位圖片式超連結樣式表置入自訂樣式中
圖片式超連結範例：
(2008/08/05修正，原因：教學文章範例干擾欄位語法)
連續串接覺的太長是嗎?給它加個捲軸(滑軌)
本篇沒有測試總共可置入幾個超連結按鈕圖片，請有需要的網友自行測試
PS：圖片型式需自行製作上傳圖片空間，取得連結網址，圖片尺寸預設建議 100pxX40px
PS：引用時請勿刻意改變文章格式，直接由引導複製箭頭反白下拉至
文章頁底複製貼入文章編輯，不要預覽，不用切換至HTML，直接按發
表，以免產生格式上的錯誤，在此叮嚀！自訂樣式與自訂欄位不同，語
法應用時不要貼錯地方
|
將自定欄位圖片式超連結樣式表置入自訂樣式中-增加有限的字元寫入，五個欄位同時使用，可共同宣告相同超連結框模式規則， (二度空間)語法應用編輯 |
|
將以下樣式表複製加入自訂樣式最底層(樣式參考) |
| #fi1{ WIDTH:130px;HEIGHT:250px; OVERFLOW:auto; SCROLLBAR-FACE-COLOR:#CCCCCC; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-SHADOW-COLOR:#FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#CCCCCC; SCROLLBAR-ARROW-COLOR:#FFFFFF; SCROLLBAR-TRACK-COLOR:#CCCCCC; SCROLLBAR-DARKSHADOW-COLOR:#CCCCCC;} #fi2 a {border:2px double #9900CC;} #fi3 a {border:2px double #ff0000;} #fi2 img, #fi3 img {WIDTH:105px;HEIGHT:40px;border:0px;margin-top:5px;} |
|
應用語法解說 |
| #fi1{ WIDTH:130px;/*捲軸寬度*/HEIGHT:250px;/*捲軸高度*/ OVERFLOW: auto;/*內容超出區塊自動由瀏覽器決定*/ /*以下捲軸各部顏色(捲軸語法部分避免使用小寫，可能受到 html 中的捲軸語法影響*/ SCROLLBAR-FACE-COLOR: #CCCCCC; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #CCCCCC; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #CCCCCC; SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;} #fi2 a {border:2px double #9900CC;}/*按鈕圖片邊線樣式*/ #fi3 a {border:2px double #ff0000;}/*按鈕圖片邊線樣式*/ #fi2 img, #fi3 img {WIDTH:105px;/*按鈕圖片寬度*/HEIGHT:40px;/*按鈕圖片高度*/border:0px;margin-top:5px;/*按鈕圖片間的距離*/} 自訂樣式檢圖說明範例→ http://xs320.xs.to/xs320/07421/W6-4.jpg |
| 如果捲軸自動由部落格自訂樣式CSS決定，則在此 SCROLLBAR 部分的字串不須寫入，只留下↓如：
#fi1{WIDTH:130px;HEIGHT:250px; OVERFLOW: auto;} |
|
將以下連結 id 複製加入自訂欄位中，可連續串接，每組為上下兩個不同邊線作區分 |
| <div id="fi1"> <div id="fi2"> <a href="超連結網址"><img src="按鈕圖片網址"></a></div> <div id="fi3"> <a href="超連結網址"><img src="按鈕圖片網址"></a></div> </div> |
|
重點說明 |
| <div id="fi1">/*捲軸 id*/<div id="fi2">/*上超連結 id*/<div id="fi3">/*下超連結 id*/
無論串接幾個超連結，需要在最前框與最後框加入 <center><串接 id></center> 以便將超連結欄位置中。 PS：串接時，只要再串接<div id="fi2">～<div id="fi3">，然後改變其中連結網址即可 應用如下： <center> 貼語法路徑→管理部落格→管理自定欄位→填寫自定欄位名稱→將語法貼入自定欄位內容→按儲存 PS :重新修改時，語法建議重貼 自訂欄位檢圖說明範例→http://xs320.xs.to/xs320/07442/W6-5.jpg |
|
另開視窗開啟 |
| 在超連結語法中加入 target="_blank" 以新視窗開啟
例如：<a target="_blank" href="超連結網址"><img src="按鈕圖片網址"></a> |
框線條樣式 : ( 無、 點線、 實線、 雙線、 溝線、 脊線、 嵌入線、浮出線 、 虛線)
相對應語法 : none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset ｜dashed
| 捲軸色碼位置解說：
SCROLLBAR-FACE-COLOR: #CCCCCC |
祝您使用愉快
