3月 2013 --- 群紗記事 : 無責任日語翻譯

2013年3月31日星期日

【教學】有關 share buttons 的小技巧

今天說一下如何在部落格中加入 share buttons (分享按鈕?)

示範圖

方法有兩種
1) 在「版面配置」>>「網誌文章」>>「顯示分享按鈕」中打勾
再在「排列項目」中把分享按鈕拖曳到理想的位置

假如你是使用自己編輯 HTML 的範本很大可能會失敗
這時候可以用方法二
2) 在 <div class='post-header-line-1'/> 與 <div class='post-body entry-content'> 之間插入粉紅色的四行

<div class='post-header-line-1'/>
  <div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'>
   </b:include> 
  </div>
<div class='post-body entry-content'>

然後就會這樣子

而至於如何刪除 "Recommend this on Google" 那一句
可以在 CSS 裡把以下的 code 隨意加在任何一欄

.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe {
width: 32px !important;
}

2013年3月26日星期二

【教學】IE 中有關 letter-spacing 的 bug

使用 CSS 寫範本時
明明在 Chrome 和 Firefox 都沒問題
但一旦用 IE 就會有一大堆 bug 湧現
今天我們來探討一個完全不明白 IE 開發團隊為甚麼可以無視的重大漏洞 (菸)

letter-spacing 是控制字與字之間的空隙屬性

示範圖 "letter-spacing:1em;"

這可以應用在 CSS 中讓你控制網誌的字體
來看以下範例

.post-body {
padding:0px 0px 10px 0px;
font-family: Arial,MS Gothic, Sans-serif;
font-size:13px;
letter-spacing: -.1em;
line-height:1.6em;
}

當 letter-spacing 是負數時，正常的瀏覽器會出現縮排的效果

如下圖左邊是"letter-spacing:0em;"，右邊是"letter-spacing:-.1em;"

明顯看到右邊的字比較緊密
但是呢假如使用 IE 來看就會像下圖這樣

中間空格的一行都縮掉了

這是因為 IE 裡使用 "-.1em;" 連空格行的 <br /> 都縮掉了...
這時候我們要在 <header> 中 CSS 的 Post-body 屬性下附加粉紅粗體的那三行

.post-body {
padding:0px 0px 10px 0px;
font-family: Arial,MS Gothic, Meiryo,Helvetica, Sans-serif;
font-size:13px;
letter-spacing: -.1em;
line-height:1.6em;
}

.post-body br {
letter-spacing:0px;
}

這樣做目的是為了讓 <br /><br /> 兩行不會被無視掉縮為一行
萬惡的 IE 浪費了我大半天啊!!!!