首頁 » 程式語言 » CSS » 【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

WordPress 主題建立完成後,有時候會跑出一些多餘的區塊,卻又不知道該如何刪除。

本篇文章將會教一些 CSS 、開發者工具,快速的隱藏 WordPress 網站多餘的區塊。

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊
【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

影片教學

可以的話,麻煩點進去影片,幫我按個訂閱按紐!

 

Chrome 開發者工具

首先要來介紹一下 Chrome 的開發者工具,功能非常非常的多,本篇文章著重在 Elements,若有人需要其他教學,可以在底下留言。

首先,要如何開啟 Chrome 的開發者工具呢?

使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。

Chrome 開發者工具
Chrome 開發者工具

首先在上面先選擇 Elements,上半部的那些程式碼是網頁的HTML,下半部的程式碼是網頁的CSS。

HTML 是用來顯示文字、表格、區塊等等。

CSS 是用來調整 HTML 的樣式,像是文字大小、字體、位置等等。

 

CSS 語法

我這裡列出幾個比較常用到的CSS語法:

  1. background-color : 背景顏色
  2. font-family : 字型
  3. color : 文字顏色
  4. font-size : 文字大小
  5. line-height : 行距
  6. display : 顯示方式

如果想要練習,可以到這個網站學習與實作:w3schools

想要學習更完整的CSS語法,可以參考以下兩本書:

1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

2. CSS 大全(第四版)

 

隱藏區塊

step 1

透過開發者工具的左上角的箭頭,選取要修改的區塊,再到開發者工具大概上下點一下,尋找最符合的區塊。

尋找要修改的區塊
尋找要修改的區塊

step 2

選擇要修改的區塊後,在下方按+的符號,輸入 CSS 語法。

新增CSS
新增CSS

這裡列出幾個常用的語法:

display: none; /*隱藏區塊*/

color: #ffffff; /*文字顏色*/

font-size: 20px; /*文字大小*/

background: red; /*背景顏色*/

step 3

接著到佈景主題自訂的地方,選擇客製化CSS,將語法貼進去,下圖是原本的樣子。

修改前
修改前

step 4

貼上隱藏的語法後,上面的 bar 就消失了。

修改後
修改後

 

結論

本篇文章是阿璋第一次透過影片來教學,教大家如何快速的客製化自己的網站,並且透過隱藏區塊來作為示範。

不知道這樣的影片教學大家的感受如何? 希望可以在下面給我一點回應,我才知道接下來要不要繼續照這種模式。

如果想要學習更完整的前端語法,可以看看以下這部影片,教得很好很清楚!

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站
建網百科全書

覺得自學很困難,不想要花時間在這上面,可以看看本站外包服務,由阿璋幫你客製化!

如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。

還沒訂閱部落格的朋友們,記得在下方填入信箱,收到我最新文章的通知。

歡迎按讚我的粉絲專頁,會有最新文章、程式語言課程、WordPress主題外掛優惠的訊息。

追蹤我的Instagram,最近有一系列的#不務正業工程師、#工程師之路!

阿璋也陸續開始拍攝影片,訂閱我的 Youtube 頻道,並開啟小鈴鐺🔔

如果這篇文章對你有幫助,可以幫我在下方按 5 個Like,讓我得到一些回饋,支持我繼續寫出更多好文章!

阿璋有創立一個社團,歡迎加入!
WordPress / 部落格經營 / 網路行銷 / 斜槓青年 / 自由工作者 / 接案 / 發案 | Johntool-工具王阿璋


by Johntool-工具王阿璋

訂閱我的文章

如果喜歡我的文章,可以留下信箱,每發佈新文章時,就會準時通知您!

28 thoughts on “【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊”

  1. 我覺得有影片很好,之前在找資料的時候,很常看到叫我貼在哪一段到哪一段之間,我不是找不到,就是找到了不知道怎麼用,有影片教學真的好很多。以前想解決都要找英文教學,超痛苦…於是被網站搞瘋的我怒買主題…然後發現還是要懂一點基礎語法qwq 相見恨晚

    1. 好XD 那我之後盡量把文章的影片都補齊,希望可以讓你更好理解!
      我覺得真的至少要懂一些基本的網頁語法,不然遇到問題只能到處求助。

  2. 這篇先收藏了!真的很多免費主題都不如一開始預覽的好看QQ
    我也找過很多首頁圖片過大怎麼辦的文 上一步還懂,下一步就不知道跳到哪去了@@
    感謝阿璋~~~

發表迴響

Scroll Top