零基礎自制部落格園 ”Mac & ios 黑暗“ 主題 10分鐘詳解 - 精簡歸納

JERRY_Z發表於2020-08-29

零基礎自制部落格園 “Mac & ios 黑暗” 主題 10分鐘詳解 - 精簡歸納

JERRY_Z. ~ 2020 / 8 / 29
轉載請註明出處！

零基礎自制部落格園 “Mac & ios 黑暗” 主題 10分鐘詳解 - 精簡歸納

1.簡單說明（零基礎、超詳細）

(1)、為什麼要寫這篇部落格？

昨天我寫了一篇《零基礎自制部落格園 “賽博朋克” 主題 10分鐘詳解 - 精簡歸納》的部落格釋出到部落格園首頁後很快內便得到了600+的閱讀量，當天晚上我在部落格中加入了一個統計訪問量及訪問地的小工具，通過IP訪問記錄所示：中國香港、美國、印度、馬來西亞、新加坡、土耳其，都有IP訪問過我的這篇部落格！（當時部落格已經不在部落格園首頁了，所以流量高峰期並沒有被記錄，不然應該會有更多的IP訪問被記錄）這對我非常的鼓舞，非常開心！！！所以今天我再次寫一篇名為：《零基礎自制部落格園 ”Mac & ios 黑暗“ 主題 10分鐘詳解 - 精簡歸納》的主題，希望大家喜歡！！！
訪問地圖
訪問地區
訪問統計

先給大家看一下我上一篇部落格主頁介面 (“賽博朋克” 風格）：

PC端：

移動端：

這是這次的 (”Mac & ios 黑暗“ 風格)：

PC端：

移動端：

寫部落格很費精力，轉載的話，請註明一下出處！

(2)、部落格園如何零基礎定製自己的主題？

由於零基礎不懂任何前端的網頁開發技術，所以這裡只是在部落格園所提供的主題基礎上修改 CSS 樣式，從而制定自己的風格，當然，不要看只是修改樣式，只要你厲害是可以弄出非常漂亮的效果哦！！！

部落格園修改 CSS 樣式詳細步驟：
<1>. 進入自己的部落格主頁點選管理

<2>. 點選設定

<3>. 當前頁面下滑找到部落格皮膚及定製 CSS
皮膚 CSS
<4>. 選擇一個部落格皮膚模板，並寫入要替換的 CSS 樣式
<5>. 儲存設定

2.運用舉例

下文以 SimpleMemory 模板為例

SimpleMemory 預設如下：

在瀏覽器中按 F12 鍵（某些鍵盤為：Fn + F12）
便可開啟部落格頁面的 HTML CSS 程式碼
F12

(1)、修改字型顏色

假如我要把標題改為粉紅色
<1>. 點選左上角檢查元素按鈕

<2>. 滑鼠點選標題文字

<3>. 此時右下角自動定位到標題文字的 CSS 樣式
標題CSS樣式
<4>. 找到控制標題文字的 CSS 程式碼段點選顏色並更改顏色

如果不知道具體是哪一個，可以一個一個試一下

此時頁面上的標題顏色已經變成粉紅色了，但此時還沒有結束，這裡只是預覽效果，還沒有真正改變
<5>. 複製控制顏色的那一段 CSS 程式碼段
複製 CSS
<6>. 貼上 CSS 樣式

此時部落格頁面的顏色便定製為粉紅色了！！！

(2)、修改字型大小

假如我要把標題放大
基本步驟與更改顏色一樣，不同的是這裡不是修改顏色而是更改或重設字型大小
再次找到剛才標題的 CSS 程式碼塊
新增 font-size:

假如本來就有 font-size: 那麼只需要修改值即可

字型大小
選擇一個合適的大小，然後複製貼上到 CSS 設定框中去
完成後的效果：
字型放大效果

(3)、修改字型位置

假如我要把標題居中
基本步驟與更改顏色一樣，不同的是這裡不是修改顏色而是更改或重設字型在樣式框中的位置
這次不是點選標題文字，而是點選標題文字所在樣式框

左下角同樣出現了標題框樣式的 CSS 程式碼段
新增 text-align:
這裡選擇居中

當然，如果原本就有 text-align: 就只有修改值便可以了

font-size:
同樣把程式碼段複製貼上到 CSS 修改框中

儲存後，最終效果：

其他還有許多可定製的地方，但基本原理相同……

3.“Mac & ios 黑暗” 定製步驟

(1)、切換 SimpleMemory 主題

SimpleMemory

(2)、複製貼上 CSS 樣式

轉載請註明出處！！！不可用作商業用途！！！

/*
 * @Author: JEYYR_Z.  SimpleMemory
 * @Date: 2020-08-29 13:40:27
 * @LastEditTime: 2020-08-29 13:44:41
 * @LastEditors: Please set LastEditors
 * @Description: 轉載請註明出處！！！不可用作商業用途！！！
 * @FilePath: \undefinede:\MyCode\MyBlog\JERRY'S 教程大本營\零基礎自制 部落格園 ”暗夜極簡“ 主題 10分鐘詳解 - 精簡歸納\新建文字文件.css
 */
body {
    color: #fff;
    background-color: #000;
}
#home {
    background-color: #000;
}
#blogTitle h1 a {
    color: #ffffff;
    font-size: xxx-large;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #a3e2ff;
    transition: all .4s linear 0s;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #ff1493;
}
.postDesc {
    color: #b7b7b7;
}
#sideBar a {
    color: #ffffff;
}
#navList a:link, #navList a:visited, #navList a:active {
    color: #e6e6e6;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: #000;
}
.postBody {
    color: #fff;
    line-height: 1.7;
    font-size: 14px;
}
.postBody blockquote {
    background: url(images/comment.gif) no-repeat 25px 0;
    min-height: 35px;
    _height: 35px;
    line-height: 1.6em;
    color: #fff;
}
a:link {
    color: #fff;
}
.postBody h4 {
    color: #fff;
}
a:visited {
    color: #ff1493;
}