佈景主題：琉璃夢（Luriyume）

版型作者：莎絳（莎堇）

最後更新：2020-10-10

圖片來源：取自 Pixabay 免版權圖片

樣式特色

• 整體風格唯美一致
  使用CSS製作出半透明彩虹效果
  搭配使用免版權的花卉背景
• 響應式網頁設計（RWD）
  電腦版：螢幕寬度 ≧ 1000 px
  行動版：螢幕寬度 ＜ 1000 px
• 優化官方導覽列呈現方式
  電腦版：精簡按鈕、透明調整（移入顯示／移出隱藏）
  行動版：固定浮動、精簡按鈕
• 優化官方小工具呈現方式
  電腦版：工具列（左下角）、小狐狸（右上角）
  行動版：工具列（左下角）、小狐狸（隱藏※1）
• 特色網站標題與橫幅
  電腦版：固定左側、直式顯示
  行動版：固定浮動、精簡描述
• 摘要模式封面支持※2
  電腦版：浮動左側、固定尺寸
  行動版：區塊顯示、螢幕寬度
• 文章內容層級設定
  版本共通
  詳細請見下方「文章內容效果展示」
• 美化文章留言區塊
  原則上版本共通
  呈現方式有稍做調整
• 工具欄位呈現方式※3
  電腦版：右側排列、特色處理
  行動版：下方排列、特色處理
• 隱藏不必要的干擾※4
• 後續更新的優化功能※5

文章內容效果展示

這裡是標題區「H1～H6」。

一般段落的基準字級大小是100%，預設字體採用等寬思源黑體（來自Google的免費字體），其次是等寬的英文字體「Consolas」與「微軟正黑體」（皆為Windows系統既有字體） 。

因此文章內容的字級大小，會隨著使用者的瀏覽器設定而自動調整，不太會發生螢幕解析度太高而造成螞蟻字的問題，字體也比較美觀易讀。

H1 字級大小 200%

H2 字級大小 150%

H3 字級大小 135%

H4 字級大小 120%

H5 字級大小 110%

H6 字級大小 100%

上面這排櫻花瓣即為「HR」水平線。

內文圖檔

將會自動調整尺寸，寬度為100%內文區塊等比例縮放。

既然要放圖，就100%大大地看吧！

靠左對齊的段落一

置中對齊的段落二
斷行
其實一般段落的斷行與一般段落的高度一樣

靠右對齊的段落三

項目清單

方塊擺在外圍，方便文字對齊。

• 項目清單一
• 項目清單二
• 項目清單三

編號清單

編號擺在外圍，方便文字對齊，並且使用特色的大寫羅馬數字（作者偏好）。

1. 編號清單一
2. 編號清單二
3. 編號清單三

備註（※）

1. 手機螢幕太窄，顯示小狐狸與其相關文章功能，會嚴重造成讀者體驗！
   因此，只有在行動版隱藏它，電腦版則放置於明顯又不會干擾讀者的位置。
2. 只要在文章的第一段的「<p>」到「</p>）」之間插入圖片，並將圖片的「title」設為「封面」，就能套用封面設定。
   如果沒有在第一斷設定封面圖片，將會自動顯示灰底的「No Image」。
   在「More」之前放四個段落效果最佳，可作為整齊美觀的文章摘要。
3. 部分側欄工具已特製化，例如：個人資訊、我的好友及其視窗、月曆、文章搜尋、文章分類、熱門文章、最新留言、誰來我家、參觀人氣等。
4. 有鑑於大量彈出浮動廣告太過驚悚，經常造成讀者誤點或頁面卡住等問題，故能用CSS隱藏的都已隱藏。
   至於部分不易造成讀者困擾的官方廣告，則保持顯示狀態，例如：側欄廣告。
   在官方推出更友善的廣告自訂後台之前，大概都會維持現狀吧。
5. 預計後續更新將製作浮動工具列，例如：調整文章的基準字體大小的按鈕等。
   目前已知Pixnet禁止導入JQuery腳本，因此確定「GoTop」滾動效果無法使用。
   當下的替代方案，是以空白超連結重新整理頁面，好讓讀者回到畫面的最上方。
   v.o.
   經由實際嘗試，發現Pixnet是否有手機認證都不是那麼重要了。
   因為就算認證，能被允許的JavaScript也很少。