如果在 WordPress 中撰寫一些程式相關的內容，通常我們都會希望程式碼的文字格式和一般文章會稍微有點不一樣，讓程式碼的閱讀性更佳。以本網站來說，目前使用了 Enlighter Sourcecode 這個外掛套件來存放程式碼的內容。不過當網站在小螢幕的裝置上閱讀的時候，會發現預設的格式是不會出現水平卷軸的，而是以斷行的方式呈現，這對程式碼來說在閱讀上實在有些的不方便。 ▍ 只需調整 CSS 屬性讓水平卷軸自動隱藏或出現，不讓畫面切斷程式碼 調整的方法很簡單，只需要修改 .enlighter-default 的 CSS Code： 調整 overflow 和 white-space 這兩個屬性，並且其中 !important 可以視情況選擇要不要加入，調整完後就會自動視螢幕大小出現水平卷軸了！ Reference Horizontal scroll on small screen | EnlighterJS / Plugin.WordPress Copyright announcement:Photo by Rishabh Pammi on Unsplash
WordPress 已經有很多免費的主題可以直接套版使用，甚至還有付費的主題提供更完整、更美觀的外觀介面可以套用，直接到 WP 的後台就可以設定。不過通常我們還是會希望套用了現成的主題樣式之後，我們還能自己調整部分的樣式。本篇會先簡介佈景主題的檔案結構，再告訴大家直接修改外觀樣式的方式及如何建立子主題 (child theme)。另外還有一些其它常見的網站外觀介面調整，如刪除 Bitnami Info Page Banner。 佈景主題的檔案結構 在前一篇的檔案結構簡介中有稍微提過佈景主題的檔案存放在 htdocs/wp-content/themes/ 的目錄下，每個主題以各別的資料夾分別儲存。如果你想要自己完全建立一個全新的佈景主題或者你想要詳細的手動調整網站每個位置的樣式設定，那麼你可能得了解整個版型 (template) 的結構及名稱，還有所有的程式及樣式設定。下面有幾個說明文件可以讀一下： 樣式主題的完整說明文件：Theme Handbook | WordPress.Org 網站結構：Site Architecture 1.5 | WordPress Codex 頁面及版型結構：Stepping into Templates | WordPress Codex 開發者說明文件：WordPress Codex 開發者說明文件：Developer Resources | WordPress.Org Understanding the WordPress Theme Structure Understanding WordPress Template Hierarchy for Faster Development 我們假設你沒有要完整開發一個新的佈景主題，只是要套用現有的版型再調整成自己想要的樣子。所以我們只對佈景主題的檔案結構做簡單的介紹，讓你知道調整外觀樣式應該修改哪個檔案，至於網站的版型結構及名稱就自己用像是 Chrome 開發者工具...
如果你對你的網站有複雜的 CSS 設定時，你可能會發現一種狀況，就是前後兩個 block 元件的邊界會有重疊的狀況。前一個元件的下邊界 (margin-bottom) 會和後一個元件的上邊界 (margin-top) 重疊，只會保留兩個之中較大的那一個，這就稱之為邊界重疊 (margin collapsing)。 不過有兩種例外狀況，當元件有設定 float 或 position: absolute 屬性，就不會產生邊界重疊的現象。 會產生邊界重疊的狀況 ▍ 同一層的元件相鄰 兩個位在同一層的 block 元件相鄰就會產生邊界重疊，margin 只會取其中最大的一邊。就像下面的範例，前後兩個段落之間的邊界最後只會有 40px。 <p style="margin-bottom: 16px">First element</p> <p style="margin-top: 40px">Second element</p> ▍ 父元素的邊界與第一個/最後一個子元素的邊界重疊 當子元素的邊界與父元素的邊界重疊時，依然只會取最大的邊界。下面的範例當中，段落 (p) 是區塊 (div) 的子元素，父子元素間的上下邊界都有邊界重疊的情況。最終上邊界取子元素的 20px、下邊界取父元素的 80px。 <div style="margin-top: 15px; margin-bottom: 80px;"> <p style="margin-top: 20px; margin-bottom: 20px;"> this parameter...
在 CSS 當中有定義一些偽元素選擇器 (pseudo element selector)，他是用兩個冒號 :: 表示指定元素的特定的狀態。例如下面這個 code 就表示所有段落 (p) 的第一行 (first-line)。 那麼要怎麼改變被選取文字的背景色呢？只需要使用 ::selection 這個偽元素就可以囉！ 假設我們要改變所有段落中被選取的文字的背景色： 下面這段文字就應用了上面這段 CSS 屬性，被選取的文字背景色會是 #0ABAB5 這個顏色 (tiffany blue)： Our deepest fear A Return to Love: Reflections on the Principles of “A Course in Miracles” — Marianne Williamson (1992) Our deepest fear is not that we are inadequate. Our...
我們在網頁當中加入表格的時候常常會遇上一個問題，就是當表格的寬度已經超過螢幕的寬度要怎麼辦？尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性，但只設定這個屬性是不夠的，還需要對表格的加入以下屬性： 首先要先讓 table 這個物件變成 block 物件，然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容，自動加入水平捲軸。 最後是 white-space: nowrap 這個屬性，讓文字不會因為寬度自動斷行，除非內容真的有斷行 <br> 存在。 這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表 有用到表格捲軸的範例： ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明： display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash
當我們想控制一個網頁上的元素要不要顯示出來，可以簡單地透過 CSS 的方式做到。隱藏元素的方式有兩種：visibility: hidden 和 display: none。 這裡有個範例，我們想隱藏文章的標題。先看看原本網頁應該長的樣子： ▍ 隱藏元素但保留元素的位置 visibility: hidden 使用 visibility: hidden 這個屬性會使得元素不顯示在網頁上，但它卻會保留元素的空白位置。 可以看到標題已經隱藏起來了，可是標題本身的位置也保留了下來，留下了一片空白。 ▍ 隱藏元素也不保留元素的位置 display: hidden 如果你想要把元素隱藏起來，連它的位置也不保留給它，就好像它完全不存一樣，那麼你就要使用 display: hidden 這個屬性。 需要注意的是，雖然我們把元素隱藏起來，好像它整個被移除了。但是實際上它還是存在在網頁上的，只需要打開 HTML 原始碼就可以看到，我們只是透過 CSS 的方式去控制它現在顯示的外觀狀態。 Copyright announcement: the featured image: Computer photo created by freepik – www.freepik.com
