● 不想要有圖片外框
也是進入版面配置→範本→修改HTML
找到有關有 "img” 這個定義,大概有下列這些,看你要設哪一個:
a img { 或 .post img { ,這是文章內的圖片設定
.profile-img { 或 .profile-img a img {,個人簡介
#header a img { ,標頭
.sidebar a img { ,邊欄區
【每個模板大同小異,大概都是用這些來定義】
把 border: 0;
設成0即可,或是把這行敘述去除亦可。
● 想要調整某些元素的位置
通常會碰到的問題就是想調整各個元素與邊緣的距離位置,例如文章標題、日期、邊欄等等,找到你想要調整的元素區,然後找到以下的敘述,再調整距離大小即可。
也是進入版面配置→範本→修改HTML:
margin: a b c d;(上右下左,以框線為主,就是框線與外邊緣的距離)
padding: a b c d;(上右下左,以框線為主,就是框線與本文的距離)
不知這樣形容聽得懂嗎?就是一個對外,一個向內的分別。
如果只是想調整特定的元素距離,比如下面這個圖
標題區(#header-wrapper,藍色框)與上方的距離,可以設成
margin-top: 10px;
而標題(#header h1)與上方的距離,就要設成
padding-top:30px;
如果都一樣的距離,可以設 padding: 5px; 表示全部都是5px;
● 網頁元素---文章分類如何產生
標籤-就是你的文章分類
有的人喜歡用hacks,把文章分類以標籤雲方式顯示,其實我自己覺得如果你的標籤分類真的很多,是蠻適合用標籤雲方式呈現,但也有人喜歡傳統的方式,用條列式的呈現,只要新增網頁元素為"標籤"的即可,然後將標題設為文章分類。
當然以條列式的呈現,可以在前面加個項目符號,找到.sidebar ul { 這區塊,然後加上以下的敘述,任選一種
list-style-type:none; (不加任何符號)
list-style-type:disc; (實心圓形符號)
list-style-type:circle; (空心圓形符號)
list-style-type:square;(實心方形符號)
list-style-type:decimal; (阿拉伯數字)
list-style-type:lower-roman; (小寫羅馬數字)
list-style-type:upper-roman; (大寫羅馬數字)
list-style-type:lower-alpha;(小寫英文字母)
list-style-type:upper-alpha; (大寫英文字母)
list-style-image:url(“圖片網址”) no-repeat;(圖片符號)
以下的圖,是後台常見的網頁元素說明。
系列文章:
● Blogger 新手基本技巧問答(一)
● Blogger 新手基本技巧問答(三)
● Blogger 新手基本技巧問答(四)
本文對剛建立blog的人很有幫助喔,謝謝分享
回覆刪除我想請教一些問題
回覆刪除爲什麼的comment與下方的home old new 那三個文字標簽有很大的間距?
不知道如何修改~~~
(我是初學CSS的 希望能提供協助~)
我的CSS
http://sky.geocities.jp/ilyusha_kocmoc/blogyt.rtf
http://ilyusha-kosmosa.blogspot.com/2009/10/blog-post.html 忘了貼我的練習blogger
回覆刪除你是否修改嵌入留言的height='410',這語法好像沒有成功,改回原來的275,看看是否會好一些,還有#blog-pager-newer-link {和#blog-pager-older-link {
回覆刪除#blog-pager {裡面的margin-top: 10px;
可以拿掉,也是可以靠上面一些的。
margin-top: 10px; 我刪掉了 感覺沒什么改變也許是因為只有10px的高度
回覆刪除而你說的『嵌入留言的height='410』
我不知道這是什麼耶,我在我的CSS里面沒這段,怎麼修改成275呢?
我測試過了,是你挑選的模板的問題,預設是410,"展開小裝置範本",按下ctrl+F,會跳出搜尋框,輸入410,會找到我說的那個東西,把他改成275即可,如果看不懂,就參考http://01mistery.blogspot.com/2009/04/embed-comment-box.html這篇的說明,大概會比較了解。
回覆刪除感謝你~~~ 我了解了呢~
回覆刪除我想要把我的header h1放向右边一点,或者把header取消。因为它当住我的headerbackground了>< 要怎样?
回覆刪除To H♥NAbaby,可參考這篇http://01mistery.blogspot.com/2008/08/blogger-template-css.html
回覆刪除綸大您好,我想請問您..
回覆刪除我參考這篇將側欄的條列式都加上小圓點圖示..
但因為有的側欄它前面就有圖片了(如我的交換連結),此時就會同時出現二個圖片
要如何只把這個交換連結的小圓點圖示隱藏呢?
麻煩您了,我的連結如下~
http://www.ever4ever.tw
你可能已經改好了,我沒看到有同時出現兩個圖片的。
刪除抱歉,還沒改好~
刪除因為首頁不會出現,要點進去任何一篇文章就能看到
例如~
http://www.ever4ever.tw/2013/06/blog-post_21.html
右側欄最下面的FRIEND LINK(交換連結)
會同時有綠點和網誌縮圖..
我知道設定網誌清單,可以把圖示取消..這樣就只有綠點..
但~不知道可不可以仍保存縮圖,而只在這個欄位取消綠點...
麻煩你了~
你在後台css處新增一個定義,類似以下
回覆刪除#BlogList1 li {
display: none;
}
或是類似
#BlogList1 .widget-content ul {
display: none;
}
你可能是要自己試看看
ul 或是 li
非常感謝..
刪除這對我就有點難度了..
呵呵~
還是謝謝您的熱心回覆
綸大~真的很抱歉,還是要麻煩同樣的這問題..
回覆刪除側欄-我的網誌清單裏,縮圖和綠點同時存在,
我想要僅在這個欄位裏隱藏綠點該如何做呢?
照您上面試了一下都沒成功
可以幫忙看一下該怎麼做嗎? 網誌連結如下~
http://www.evershoot.com/2013/12/blog-post_27.html
我只想得出上面的方法,不過你的網誌清單已經變成 #BlogList2,改成2看看。
刪除謝謝您如此快速回覆,還是不行,
回覆刪除不知是不是哪個地方多了一個定義,使得這個定義就無效了?
還是這個定義應該放在什麼位置也有關係?
不然就是找到類似
刪除'<li><span class="item-title">' authorname ': <a href="' link '">' title '</a> - ' timestamp '</span></li>'
把前後的<li>及</li>去掉