2006-12-14

在版面格式中放入小圖示

在 Hack Blogger 的過程中,改版型和調整範本的時候發現,原來放圖片貼圖示也是很有技巧的。舉例來說,文章裡面我們想貼圖,大多直接用標準的 HTML 語法,像是這樣的標籤: <img src="網址">,最多加一些參數調整。可是呢,很多的項目在 Blogger 裡面被模組化,定義在特定的 Class 或 ID 裡面,就不能用 <img> 這個標籤了。後來研究偷看到 Blogger 的系統圖示在 CSS 裡的定義方式,喔~原來是這樣,他用背景圖和 no-repeat 參數來貼圖示,而且還可以微調圖片的位置,CSS 還有模組化的好處(而且也沒辦法另存新檔偷你的圖示),實在是學到了啊!利用上述技巧替 Blog 版面格式的一些項目加些圖示吧!(整理如下,每個人的版型不同,以下程式並不一定都適用)

首先,在每篇文章的發表日期前面加上小圖示:

h2.date-header {
  margin: 0;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Date.gif") no-repeat 1px 2px; 
}

Sidebar 上不是會有一些條列式的項目嗎?在這些項目前面加上一個小圖示,條列起來更整齊更一目了然:

.sidebar li {
  margin:0;
  line-height:1.5em;
  background:url("http://abinlee.link.googlepages.com/Icon-Bullet.gif") no-repeat 3px .45em;
  padding:0 0 5px 15px;
}

個人 Profile 的連結一樣可以動手腳,在連結前面加一個圖示:

.profile-link {
  font: normal normal 82% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Profile.gif") no-repeat 0 0;
}

以上整理,如果要放到 CSS 的版面圖示,要用類似上面的方法來做才有彈性。好,那如果文章裡面的貼圖也想搞花樣呢?那還是要搞 <img> 標籤了。我舉自己的例子,像我想在文章的貼圖裡自動加線框,並保留一點點文繞圖的空間,範例如下:

.post-body img {
  padding:4px;
  border:1px solid #333333;
}

回應: 25

讀書人 提到...

我借用了~~~sidebar小圖~~~謝謝!

Owen 提到...

hi~
另外我想請問如何加小圖在文章末這幾個文字前1.發表於2.分類標籤3.相關文..
謝謝你喔!!你的blog幫助我很大!

Abin 提到...

To owen: 請展開你完整的的樣版程式碼,在以下標籤前加入小圖連結即可:
1. 發表於 -> <data:top.timestampLabel/>
2. 分類標籤 -> <data:postLabelsLabel/>
3. 相關文章 -> 顯示相關文章的程式碼前
進階一點,我是利用 CSS 自己定義區段,將要顯示小圖的文字用 span 標籤括起來,詳細的 CSS 用法可以參考我這篇文章

凱蒂薑 提到...

我想請問 如果說我現在加入了小圖示在日期旁邊
可是日期的字樣就跟著變大了(可能本來大約是8,但加了圖是就變成14 orz)
到了字型那邊就改不掉了...那有什麼方法可以改嗎?:)
另外想請問的就是,如何把文章的時間和回應改成一行一行分段排好,而不是完全排在同一行的呢?^^謝謝你喔

Abin 提到...

To 凱蒂薑:

你的問題,除非你挑更適合的樣板去套用,不然就只好自己去修改樣板的程式碼。
日期小圖,你可以用繪圖軟體把圖示改小 (縮圖到 8),排在日期前才會不影響大小,否則,你就要去改日期的字型大小(改成 14,在樣板原始碼裡應該是像 h2.date-header 之類的樣式宣告),看起來才不會奇怪。
而時間、回應不想在同一行,你要找樣板原始碼裡(展開小裝置樣板)、關於 data:post.timestamp 和 data:post.numComments (這兩個變數就是顯示時間和回應),你可以用 html 標籤去分段和換行 (中間加個 <br> 或是 <p>),就不會排在同一行了。

Ned 提到...

作者已經移除這則留言。

Ned 提到...

請問一下,我在blogger的版面設置--網頁元素--blog文章--編輯--顯示快速編輯中,打勾,結果快速編輯的筆圖示沒有出現,測試一下,下方的顯示電子郵件發佈連結及在文章中顯示廣告,也都沒有出現,請教您,我該如何著手讓這些功能正常display

armaniboy.blogspot.com

Abin 提到...

To Ned:
經由你的提醒,我發現,原來我的也不正常、不會動啊!
我查了一下我的程式碼,因為這些個功能,預設都是由 Blogger 提供,該功能的顯示與否,也都是用系統預設的樣式和定義,該功能失效的原因只有一個:Blogger 自己的 Bug!
像「快速編輯」、「電子郵件發佈連結」,對應到程式碼,是使用樣式:class='quick-edit-icon' 和 class='email-post-icon' (ADSense 我沒在用),我怎麼看程式碼都沒錯,但是該 CSS 樣式定義的「圖示」卻沒有顯示出來,我只能假設那段樣式定義可能被誰不小心在 Blogger 的預設 CSS 樣式表裡弄掉了,解決方法有兩種,第一種,等 Blogger 自己找到 Bug 並解決(我很懶,所以我選這一種),第二種,自己定義那個小筆或是郵件圖示的 CSS 樣式,更改樣板,這樣該功能就正常了。

Ned 提到...

background: url("圖片位置") ;
我想利用這程式碼,更改標題背景圖
但不知該下什麼參數可以延伸填滿呢?

Abin 提到...

To ned:
background: url("圖片位置") 這個 CSS 宣告,後面只能帶「重複」的參數,像是 no-repeat (不重複), repeat-y (y軸重複) 和 repeat-x (x軸重複),或是指定對齊的方法 (top, center, bottom, left, center, right) 和位置 (position),他不是「桌面圖片」,還可以讓你動態「延伸填滿」。
唯一的作法,只有你算好那塊區域的大小、貼入一張剛剛好大小的圖才能解決。

小束 提到...

請問站長...我要貼入小圖, 但是如果網頁是有底色的, 像站長是黑色的, 圖就會跑出邊邊白色的, 但我看站長你的圖示都沒有白邊, 請問要怎麼解決呢?

小束 提到...

不好意思, 再請問, '較舊的文章'、 '較新的文章'、'首頁'
這些頁尾的文字要怎麼改成像站長一樣用圖示或是其他文字表現呢??

JhaoHeng 提到...

請問要怎麼找到"留言者名稱左邊圖示"的語法位置呢@@?

找了半天~頭都快昏了~只找到張貼意見 和 回應的位置

找不到"每個留言者留言後,就有小圖示出現在留言者名子左邊"的語法位置

請板大提示感激0rz...

Abin 提到...

To JhaoHeng:
那個小圖示也是 Blogger 系統變數新增的,如果動過樣板的人該變數就會沒被加進去。基本上那是顯示留言者的「樣式」,在留言者的「連結」 <a expr:name='data:comment.anchorName'/> 這一行前面,有定義一個 CSS 樣式 class 叫 comment-author,只要在樣式裡加入要顯示「身份」的 class,小圖示就會出來了。
本來是 expr:class='&quot;comment-author&quot;',變成 expr:class='&quot;comment-author &quot; + data:comment.authorClass' 就好了。(加了一個 class = data:comment.authorClass)

dickson 提到...

我想問一下,如果想把文章下面的[較新的文章]、[首頁]和[較舊的文章]改成圖案或其他文字,應該去哪裡改和要怎麼改呢?我看了上面的教學,好像沒有提到要怎麼改,還是我領悟力低,看不明白。請指點一下吧!
麻煩你了!

在此致上,十萬分 感激和謝謝。

Abin 提到...

To dickson:
在樣板原始碼裡(打開小裝置範本),有一段 <div class='blog-pager' id='blog-pager'>,這段 DIV 標籤裡就是在顯示文章下面那個「較新的文章」(blog-pager-newer-link)、「首頁」(home-link) 和「較舊的文章」(blog-pager-older-link),我是套自訂的 CSS 來改的。

bluesky 提到...

請教版主,blogspot的「較新的文章」、「首頁」、「較舊的文章」一般都是在文章末端,但我若想拷貝一組到文章的頂端,不知該如何改CSS?感謝版主!

Abin 提到...

To bluesky:
在完整樣板的原始碼裡,有一段 <b:includable id='nextprev'> .... </b:includable>,一般來說是放在 Blog 網誌文章的下面,因此在顯示上會在文章末端。
如果你想搬到文章前面,那就是把上面那一段的內容複製一份放到網誌文章的前面,這樣應該就行了(我沒力氣去試,如果那一段裡的語法和網誌文章沒有先後關係的話,應該就沒問題,不過改之前記得先備份原始碼)。

黃企鵝 提到...

我注意到為了加入icon而特地用span class"..."把任意段文字包起來,再由此文章的技巧弄icon,如此反而會失效,甚至造成整個版型無法完整載入。

黃企鵝 提到...

可是我卻眼睜睜看到Abin分別用exist-comments與post-comments把回應數與張貼回應包起來。(?)

黃企鵝 提到...

已解決,改用div id="xxx"包起來,CSS從#xxx開頭,如此就可以和平的放上icon了。
不知道為何我用span class=""包起來會出問題。Orz

(抱歉因此佔了3樓)

Abin 提到...

To 黃企鵝:
用 span 是比較好的作法,你可以看 WWW 的文件標籤定義,span 是用來做文內句子中的樣式變化,也因此很多的工具在一句話的樣式變化(像改顏色、插圖示),都儘量用 span 標籤。div 通常都是來定義段落、區塊,當然要混著交換用是沒問題,沒硬性規定,但如果你用 span 不行但 div 可以,應該是你的樣板內某些 span 標籤會衝突到(和我的範例沒關係),把它找出來解決才是根本之道。

iLYuSha 提到...

請問哦~~~我試著根據文章修改了post footer的圖示
不過有個問題無法解决

就是在首頁能顯示出所有定義的小圖示以及『回應的數量』、還有『張貼意見』~
就是《span class='post-comment-link'》底下的(程式碼貌似不能打出來...)
exist-comments與post-comments這兩個東西

不過如果我開啓文章之後,這兩個東西會消失不見,只留下圖示,就是張貼意見的字樣與回應數量的數字會不見該怎麽辦?

同時我發現這個部落格在開啓文章之後,這兩個圖示與功能已經消失,只剩下『時間』、『標簽』與『相關文章』是怎樣讓他隱藏起來的?

http://ilyusha-sdfdsf.blogspot.com/2009/10/blog-post.html
http://ilyusha-sdfdsf.blogspot.com/

我測試用的部落格

Abin 提到...

To iLYuSha:
那些字樣都是 Blogger 的系統變數字串,建議你別去動它。至於那些圖示,也建議你放在這些字串變數的前後,因為那些字串會不會出現,系統樣板都有判斷的條件式(像開啟文章進入全文模式就是一個條件,不用另外用程式去隱藏什麼東西),放錯位置就會發生你說的問題,不是字串出不來、就是空留圖示。

Haleny 提到...

我想請問,怎麼在語法裡決定哪裡可以加入框架?就是可以在網頁元素那新增HTML的框架,因為現有的模板那位置不能加。謝謝。

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!