如何讓 Blogger 產生文字方塊
How to Add a Text Block in Blogger
一般部落格文章的寫作，若有重要的文字段落或程式碼需要強調，常會想用文字方塊，藉以突出重點與方便讀者閱讀。然而目前 Blogger 平台的文章寫作，在撰寫模式下並沒有提供新增文字方塊的工具可供撰寫者使用。文章撰寫者若要加入文字方塊，可以採取的方法是：切換至 HTML 模式，加入可控制網頁外觀與樣式的 CSS（Cascading Style Sheets，階層式樣式表 ) 的文字方塊樣式資訊，並新增文章所屬網頁的 HTML 編輯區中文字方塊預定位置的 <div> 標籤的 class 屬性後，再切換回撰寫模式，就可以將需要強調的重點文字段落或程式碼寫進文字方塊內。
不過，務必留意的是：對於沒有 HTML 與 CSS 基礎的讀者而言，並不建議使用以下介紹的方法來產生簡單的文字框，以免出現因 HTML 網頁在設定或插入 CSS 文字框樣式資訊發生錯誤時，無法自行修正或回復，造成文章出現無法顯示出預期效果或甚至亂碼的情況。讀者在使用下列方法前，務必斟酌並自負其可能的風險。
接下來就開始來介紹如何手動新增一個如下的簡單文字方塊：
方塊內的文字寫在這裡
1. 選擇「主題」
首先，如圖一所示，進入 Blogger 後，點選左側功能表中的「主題」。
圖一 點選主題
2. 選擇「自訂」設定
進入主題設定區後，如圖二與圖三所示，點選「我的主題」下方功能表的向下箭頭「▾」，再點選「編輯 HTML」。
圖二 點選主題
圖三 點選編輯 HTML
3. 加入 CSS 文字方塊樣式資訊
當進入主題的 HTML 編輯區後，將下面的 CSS 文字方塊樣式資訊，加入在標籤 <head> 與 </head> 之間 ( 注意不可加入至其它的起始標籤與結束標籤之間 )。接著如圖四所示，再點選右上方工具列上的儲存變更按鈕圖示，以儲存變更。
<style type='text/css'>
.round_rect_def{
border:1px #a1a1a1 solid;
border-radius:10px;
padding:10px;
width:90%;
background-color:#f0f0f0;
text-align: left;
font-size:medium;
}
</style>
圖四 點選工具列上的儲存變更按鈕
上面 CSS 文字方塊樣式資訊中的
.round_rect_def
是自行命名的類別 (class) 名稱。
而 CSS 文字方塊樣式資訊中的 border 屬性可用來設定邊框樣式，
border: 1px #a1a1a1 solid;
表示邊框的線寬為 1 個像素 (px)，邊框線顏色的 RGB 十六進制碼為 #a1a1a1，solid 則表示為實心線。
border-radius:10px;
表示邊框四個角圓弧半徑為 10 個像素 (px)。
padding:10px;
表示文字框內的內文距離邊框 10 個像素 (px)。
width:90%;
表示整個文字框寬度佔顯示區域寬度的 90%。
background-color:#f0f0f0;
表示文字框內的背景色的 RGB 十六進制碼為 #f0f0f0。
text-align: left;
表示文字框內的文字排列是靠左。
font-size:medium;
表示文字框內的文字大小為中。
4. 切換文章編輯模式
最後回到文章編輯區，如圖五所示，點選「文章編輯模式」按鈕圖示。接下來如圖六所示選擇「HTML 檢視」。
圖五 點選「文章編輯模式」按鈕
在 HTML 碼的最下方或對 HTML 有基本了解者可選適當位置鍵入：
<div class="round_rect_def"><div>這是框內</div></div>這是框外
其它樣式的文字方塊
如果想要新增如下的文字方塊
方塊內文字寫在這裡
.dark_green_left_border_only{
border-left:10px #003E3E solid;
padding:10px;
width:90%;
text-align: left;
font-size:medium;
}
CSS 文字方塊樣式資訊說明：
上面 CSS 文字方塊樣式資訊中的
.dark_green_left_border_only
是自行命名的類別 (class) 名稱。
border-left: 10px #003E3E solid;
表示方塊的左邊框的線寬為 10 個像素 (px)，邊框線顏色的 RGB 十六進制碼為 #003E3E，solid 則表示為實心線。
文章編輯區的 HTML 碼則是鍵入：
<div
class="dark_green_left_border_only"><div>這是框內</div></div>這是框外
標題列的文字寫在這裡
文字框內的文字寫在這裡
CSS 文字方塊樣式資訊
.round_rect_with_inner_rec{
border:1px ##f0f0f0 solid;
border-radius:10px;
padding:1px;
width:90%;
background-color:#003060;
font-size:medium;
}
.inner_rec{
border:1px #f0f0f0 solid;
border-radius:0px 0px 10px 10px;
padding:10px;
background-color:#f0f0f0;
text-align: left;
font-size:medium;
}
CSS 文字方塊樣式資訊說明：
上面 CSS 文字方塊樣式資訊中的
border-radius:0px 0px 10px 10px;
表示方塊的 (左上角, 右上角, 右下角, 左下角) 的圓弧半徑為 (0px, 0px, 10px, 10px)。
文章編輯區的HTML 碼則是鍵入：
HTML 碼
<div class="round_rect_with_inner_rec"><div> <span style="color: #ffff;">標題列文字</span></div><div class="inner_rec"><div>這是框內</div></div></div>這是框外
_CMOS%E5%8F%96%E4%BB%A3%E5%85%A8%E9%83%A874%E7%B3%BB%E5%88%97%20%E4%BF%AE%E6%AD%A3%E7%89%88.png)
留言
張貼留言