Dribs & Drabs
台灣旅遊 Taiwan
設計 Design
其他 Others
本篇整理一些較實用和常被問到的CSS語法問題,之後會陸續更新
有CSS相關的問題也可以在本篇留言,若是針對分享的樣式問題則還是到該篇分享文章留言喔 🙂
(請點選問題,答案會自動出現在問題下方。若無法點選請重新整理網頁,有時是因為網頁還在載入資料中)
A. 刪除部落格上不必要的區塊
1 – 如何刪除部落格上方出現的快捷功能BAR?
加入以下CSS語法
.topbar-placeholder{display: none;}
2 – 如何刪除側欄上MIB的廣告?
加入以下CSS語法
#links-row-1 .box:nth-child(1){display: none !important;}
3 – 如何刪除文章結尾出現的廣告?
請參考該篇教學 Link
4 – 如何刪除文章結尾出現的”你可能會有興趣的文章”?
加入以下CSS語法
.pix-related-post{display:none;}
5 – 如何刪除文章結尾的全站分類、個人分類、歷史上的今天等拉哩拉紮的東西?
加入以下CSS語法
.article-footer {display: none;}
B. 有關CSS語法部分
1 – 該怎麼將部落格標題用圖片取代?
請加入以下語法,並修改圖片網址與圖片長與寬
#banner h1 a{
width: 240px;
height: 80px;
display: block;
font-size: 0px;
background: url(圖片網址) left top no-repeat;
}
2 – 請問部落格的伸縮側欄怎麼達到的?
請參考以下這篇教學文的第7個應用
3 – 請問本篇文章的Q&A伸縮隱藏答案怎麼辦到的?
C. 部落格版面常見問題
1 – 請問部落格描述的地方,該怎麼將文字斷行?
在想斷行的地方加上<br>
2 – 請問痞客邦提供那些區塊供使用者自訂語法?
目前有四個地方可以讓使用者自行發揮,再搭配自訂的CSS語法。
一.側欄元件,使用者可新增N個元件,元件內容可放入HTML、JavaScript。
二.公告區塊,為內建區塊,內容可放入HTML、JavaScript,記得要設定開啟公告版位。
三.頁尾描述,為內建區塊,內容可放入HTML、JavaScript,記得要設定開啟頁尾描述。
四.部落格描述,為內建區塊,內容可放入HTML、JavaScript,預設是開啟模式。
一至三區塊都在後台>側邊管理,第四個在後台>管理首頁。
3 – 請問套用該站提供的版面,有些文章無法點圖進入文章模式?
這原因可能是該篇文章篇幅太短已經顯示完全部內容了,便無法再進入文章模式
可由後台修改,管理設定 > 部落格基本設定 > 首頁文章顯示行數
建議改成第三項 > 顯示前N行(自行修改)摘要,改完存檔並重新整理部落格應該就可以點選文章進入內文
若選擇第二項 > 顯示全文,則無法利用文章的區塊進入內文,只能利用文章標題進入內文
若選擇第一項 > 視單篇文章之設定,寫文章時如果沒有將每篇文章設定繼續閱讀的段落,則不建議選擇該項
4 – 套用樣式後,FB按讚的區塊有點破壞版面了,該如何修改?
建議停用”插入 Facebook 按讚鈕”該APP,改用”痞客邦文章分享工具”APP
此兩款APP功能類似,但”痞客邦文章分享工具”APP只會顯示在內文裡,不會出現在首頁模式
停用與安裝APP請至後台>應用市集
5 – 為什麼套用分享的圖文樣式後,首頁模式圖片都沒出來?
首先檢查圖片是否出現在首頁模式中,檢查後台,管理設定 > 部落格基本設定 > 首頁文章顯示行數
若選擇第一項 “視單篇文章之設定” ,則檢查插入記續閱讀前是否有圖片
若選擇第三項 “顯示前N行摘要” ,則檢查前N行是否有圖片
6 – 為什麼套用分享的版面,部落格版面跟範例圖片不一樣?
通常發生這個問題都是使用IE瀏覽器的關係,IE9(含)以下的版本有些CSS語法不支援
請更新IE版本或使用其他瀏覽器,如Chrome/firefox
7 – 在部落格裡貼了浮動式FB的語法,套用分享的版面會有問題,該如何修改?
大部份發生的問題是滑鼠移至左方的伸縮式側欄,在右方的浮動式FB會跟著打開
不然就是浮動式FB沒有浮動在部落格右方,而被下拉式側欄侷限住了
解決的方法是將語法放至公告版位或是頁尾描述,不要放到側欄元件裡
8 – 為什麼照片在文章模式中看起來都很小,想要滿版面該怎麼做?
後台 > 基本/進階設定 > 文章顯示相關設定 > 文章圖片大小,請選擇(1)不調整
且照片上傳時要以大於等於版面寬度上傳(上傳到痞客相簿時選擇大1024),才有辦法滿版面
9 – 套用了版面,發現在首頁時圖片有變形的情況?
撰寫文章插入圖片時,請用”插件百寶箱”裡的”上傳圖片”,不要直接拖曳圖片至文章中,也不要對調整圖片大小 (分享的版型都有用CSS調整圖片到適合該版型的大小),即可避免圖片變形。若還是會變形,請查看後台 > 基本/進階設定 > 文章顯示相關設定 > 文章圖片大小,選擇(1)不調整
10 – 怎麼得到痞客邦相簿裡圖片的網址?
請對著相簿裡的照片按右鍵,如下圖,選擇複製語法,將出現的一串語法先複製到記事本上
此串語法大至上為 < a href=”http://www.dribs-drabs.com/album/photo/202940697-bg.webp”>< img src=”http://pic.pimg.tw/weilife/1445172626-2474051079_n.webp“>< /a >
src=”….”裡的就是圖片網址,若要得到原始上傳尺寸的圖檔,請把 _n 的字樣刪除
11 – 套用樣式後,首頁代表圖片為什麼變成灰色的
請試著把痞客邦APP”延遲載入圖片”停用,能改善此問題
D. 其他
1 – 請問可以幫忙設計部落格版面嗎?
如果你欣賞我的部落格設計,可以幫你設計版面喔 😀
詳細資訊請看這裡 Link
2 – 請問目前的版面會分享嗎?
不一定喔,如果簡單好操作的版面就會分享,如果版面需要很多手動或額外語法就不會分享。另一點,如果被客戶買走也不會分享囉!
3 – 發問問題的朋友請進 <<<<<<<<<<
遇到問題,請先嘗試自行解決/Google,真的解決不了再考慮發問。如果是套用分享的版面發生問題,務必要保留該版面我才方便偵錯,截圖對我來說幫助沒那麼大喔!如果怕版面醜醜的被看到,建議申請另一個部落格供修改版面測試。
本站允許自行修改CSS語法,改得太醜版主會睜一隻眼閉一隻眼當作沒看到,但如果把版面改壞了,請不要問我該怎麼修復(所以說備份是很重要的),大幅度修改版面,發生問題也不要來找我,版主不負責這部分的偵錯。
發問問題請保持一顆學習的心,版主採用教學式問答,會給予問題的關鍵字或方向,修改請自行努力囉!
以上,謝謝你耐心看完 🙂
♥ 部落格樣式 – 實用教學: https://www.dribs-drabs.com/blog/category/1358731