教學 | CSS Q&A 問答集

1394973480 2243657139

本篇整理一些較實用和常被問到的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個應用

https://www.dribs-drabs.com/blog/post/321563384

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 – 怎麼得到痞客邦相簿裡圖片的網址?

請對著相簿裡的照片按右鍵,如下圖,選擇複製語法,將出現的一串語法先複製到記事本上

02.bmp

此串語法大至上為 < 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