今天打算寫個簡單的介紹關於如何使用「引文框線」的方法 

首先,何為引文框線:
 
通常文章中我們有許多需要引經據典,或是特別強調的部分,比如引用他人相關文章裡的段落,或是某電影、書中的經典台詞,這時我們可以不單單只是利用顏色、粗體、斜體的編輯,而是透過框線、縮排、置中,或增加底色方塊等方式來更靈活的突顯文字,並替自己的blog增加一點花樣。這,就是引文框線的作用(如下)
範例:我是引文框線的一種我是引文框線的一種我是引文框線的一種
製作的方法其實 非 常 簡 單
只需要到後台的版面管理編輯CSS→加一段blockquote的語法(如下):

/*引文框線*/
blockquote { 
color:#787878; /* 這是框內文字的顏色 */ 
font-family:Verdana, Geneva, Arial; /* 框內的字體 */ 
border:0px dotted; /* 框線的粗細與形式 */ 
border-left:8px solid; /* 框線的粗細與形式 */ 
border-color:#99cc33; 
background: ; /* 框內的背景顏色 */ 
padding-left:10px; /* 框內文字與左框線的距離 */ 
padding-right:10px; /* 框內文字與右框線的距離 */ 
padding-top:3px; /* 框內文字與上框線的距離 */ 
paddinf-bottom:3px; /* 框內文字與下框線的距離 */ 
margin-left: 10px; /* 左框線與框外邊界的距離 */ 
margin-right: 10px; /* 右框線與框外邊界的距離 */
 }
這個動作在樂多的步驟是進管理介面→網頁樣式設定→按下個人化設定(不是點選它按樣式變更)→同樣的到CSS語法的最後面貼上上段語法;在天空部落則是在後台進入功能設定→在左邊選樣式設定→然後按下編輯CSS檔→如前貼上語法

其他像無名小站Xuite等BSP都是大同小異,反正就是找到編輯CSS的地方把語法貼到最後面去就對了

接下來,只要在往後的文章中,當你有想要強調的文字段落時便在其前後加上<blockquote>那段文字</blockquote>(使用時左右大小於符號請用半型,這邊是避免語法顯示才用全型符號)就可以出現像敝小格一樣的綠線縮排效果

當然語法裡頭的後面都加上了註解,你也可以修改製作自己喜歡的引文框線

以上
創作者介紹

Moho-cast

abuza 發表在 痞客邦 PIXNET 留言(0) 人氣()