如何在手機或平板隱藏側邊欄？（Astra 主題＋CSS）

一般來說在架設網站時，都會選擇加入「側邊欄（Sidebar）」，因為可以放置一些有用的功能或是資訊，例如搜尋、相關文章、相關標籤等等，對於「電腦版」的使用者來說，可以增加更多的互動，因為在閱讀內容的同時，側邊欄也會在可視範圍內（左或右），是經營部落格、新聞類型的網站必備的功能之一。

但是如果今天讀者是用行動裝置瀏覽你的網站（手機或平板），如果你的網站是採用「回應式網頁設計（RWD）」，側邊欄的存在就不比電腦板來的有用且必要，因為側邊欄會被排在「文章內容」之後，也就是說當你瀏覽完文章後，才有機會看到側邊欄的資訊，並不會「同時」在可視範圍內。

先前針對 AdSense 廣告代管的文章中，有提到「富盈數據」要求在側邊欄的廣告「不用顯示」在行動板，除了不想要違反 AdSense 政策外，就是因為在行動板的側邊欄會在內容下方，相對比較沒有價值！

本篇文章會以 Astra 佈景主題為範例，教大家如何用 CSS 在行動裝置上「隱藏側邊欄」，其餘佈景主題的方法也都是大同小異（有些可能內建），有需要的讀者一起繼續往下看喔！

什麼是側邊欄（Sidebar）？

一般來說，絕大部分的網站都會用以上架構圖劃分，會把網頁分成「四大區塊」，側邊欄會在網頁的「左或右」兩邊欄位，主要可用來放置搜尋、相關文章、相關標籤或廣告等，可以展示自己網站內的一些特色，增強讀者繼續留在站內繼續閱讀的機率，對於「部落格或新聞」類型的網站，是一個非常重要的元素。

當然側邊欄不是強制規定要有，有些站長為了網站美觀，也會選擇只單純顯示「文章內容」，捨棄側邊欄，但這個就不在今天要探討的範圍內了。

隱藏側邊欄教學

Supply:

• WordPress

Tools:

• CSS

總結

以上就是今天的教學，當然也不是所有人都想要在行動裝置上隱藏側邊欄，但是說真的側邊欄在行動裝置上的效益真的不大，相比於電腦可以「同時」看到內容與側邊欄，行動板如果有側邊欄只會顯示在文章下方，當使用者看完文章也就可能離開網頁了，變成側邊欄只是多餘！

常見問題