最後更新日期:2019 年 11 月 20 日
WordPress 主題建立完成後,有時候會跑出一些多餘的區塊,卻又不知道該如何刪除。
本篇文章將會教一些 CSS 、開發者工具,快速的隱藏 WordPress 網站多餘的區塊。
影片教學
如果喜歡我的文章或是影片,可以訂閱我的 Youtube 頻道、按讚、分享,我會分享更多實用的教學影片!訂閱 Youtube 頻道
Chrome 開發者工具
首先要來介紹一下 Chrome 的開發者工具,功能非常非常的多,本篇文章著重在 Elements,若有人需要其他教學,可以在底下留言。
首先,要如何開啟 Chrome 的開發者工具呢?
使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。
首先在上面先選擇 Elements,上半部的那些程式碼是網頁的HTML,下半部的程式碼是網頁的CSS。
HTML 是用來顯示文字、表格、區塊等等。
CSS 是用來調整 HTML 的樣式,像是文字大小、字體、位置等等。
CSS 語法
我這裡列出幾個比較常用到的CSS語法:
- background-color : 背景顏色
- font-family : 字型
- color : 文字顏色
- font-size : 文字大小
- line-height : 行距
- display : 顯示方式
如果想要練習,可以到這個網站學習與實作:w3schools
想要學習更完整的CSS語法,可以參考以下兩本書:
1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)
2. CSS 大全(第四版)
隱藏區塊
step 1
透過開發者工具的左上角的箭頭,選取要修改的區塊,再到開發者工具大概上下點一下,尋找最符合的區塊。
step 2
選擇要修改的區塊後,在下方按+的符號,輸入 CSS 語法。
這裡列出幾個常用的語法:
display: none; /*隱藏區塊*/ color: #ffffff; /*文字顏色*/ font-size: 20px; /*文字大小*/ background: red; /*背景顏色*/
step 3
接著到佈景主題自訂的地方,選擇客製化CSS,將語法貼進去,下圖是原本的樣子。
step 4
貼上隱藏的語法後,上面的 bar 就消失了。
結論
本篇文章是阿璋第一次透過影片來教學,教大家如何快速的客製化自己的網站,並且透過隱藏區塊來作為示範。
不知道這樣的影片教學大家的感受如何? 希望可以在下面給我一點回應,我才知道接下來要不要繼續照這種模式。
如果想要學習更完整的前端語法,可以看看以下這部影片,教得很好很清楚!
(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站
覺得自學很困難,不想要花時間在這上面,可以看看本站外包服務,由阿璋幫你客製化!
支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦
推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢:站長之路
更多相關社群連結:工具王阿璋社群列表
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。
文章引用請來信索取授權,否則將保留法律追訴權。
by Johntool-工具王阿璋
探索更多來自 Johntool-工具王阿璋 的內容
訂閱後即可透過電子郵件收到最新文章。
謝謝你的分享!因為更新佈景主題之後多了一個區塊,困擾了兩天!
你的解釋簡單清楚,立刻解決了我的問題。(已收藏)
歡迎分享出去~
請問像是結論那樣的語法怎麼寫?!有沒有推薦的可以看
可以參考這篇文章唷:【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學
謝謝璋哥,這篇文章真的很實用
把上面那個隱藏
看起來版面也比較乾淨呢
這還是要取決個人感官啦,只是做一個示範!
已訂閱~~~
之前自己在喬網站格式時
都找不到去哪裡修改….
有影片直接簡單又快速就能處理好問題
我以後有操作程式的步驟,盡量以影片呈現
這篇先收藏了!真的很多免費主題都不如一開始預覽的好看QQ
我也找過很多首頁圖片過大怎麼辦的文 上一步還懂,下一步就不知道跳到哪去了@@
感謝阿璋~~~
對阿,很多主題並沒有一開始瀏覽的樣子,學一些語法才是最棒的方式