零基礎自制 部落格園 ”Mac & ios 黑暗“ 主題 10分鐘詳解 - 精簡歸納
阿新 • • 發佈:2020-08-29
# 零基礎自制 部落格園 “Mac & ios 黑暗” 主題 10分鐘詳解 - 精簡歸納
> *JERRY_Z. ~ 2020 / 8 / 29*
> *轉載請註明出處!*
---
[TOC]
---
#### 1.簡單說明(零基礎、超詳細)
###### (1)、為什麼要寫這篇部落格?
昨天我寫了一篇[《零基礎自制 部落格園 “賽博朋克” 主題 10分鐘詳解 - 精簡歸納》](https://www.cnblogs.com/JERRY-Z-J-R/p/13577558.html)的部落格釋出到部落格園首頁後很快內便得到了600+的閱讀量,當天晚上我在部落格中加入了一個統計訪問量及訪問地的小工具,通過IP訪問記錄所示:中國香港、美國、印度、馬來西亞、新加坡、土耳其,都有IP訪問過我的這篇部落格!(當時部落格已經不在部落格園首頁了,所以流量高峰期並沒有被記錄,不然應該會有更多的IP訪問被記錄)這對我非常的鼓舞,非常開心!!!所以今天我再次寫一篇名為:《零基礎自制 部落格園 ”Mac & ios 黑暗“ 主題 10分鐘詳解 - 精簡歸納》的主題,希望大家喜歡!!!
![訪問地圖](https://img-blog.csdnimg.cn/2020082914422676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
![訪問地區](https://img-blog.csdnimg.cn/20200829144327124.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
![訪問統計](https://img-blog.csdnimg.cn/20200829144344130.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
先給大家看一下我上一篇部落格主頁介面 (“賽博朋克” 風格):
PC端:
![PC](https://img-blog.csdnimg.cn/20200828134621338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
移動端:
這是這次的 (”Mac & ios 黑暗“ 風格):
PC端:
![PC](https://img-blog.csdnimg.cn/20200829144045546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
移動端:
![移動](https://img-blog.csdnimg.cn/20200829144112835.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
> 寫部落格很費精力,轉載的話,請註明一下出處!
###### (2)、部落格園如何零基礎定製自己的主題?
> 由於零基礎不懂任何前端的網頁開發技術,所以這裡只是在部落格園所提供的主題基礎上修改 CSS 樣式,從而制定自己的風格,當然,不要看只是修改樣式,只要你厲害是可以弄出非常漂亮的效果哦!!!
部落格園修改 CSS 樣式詳細步驟:
<1>. 進入自己的部落格主頁點選管理
![管理](https://img-blog.csdnimg.cn/20200828135710951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<2>. 點選設定
![設定](https://img-blog.csdnimg.cn/20200828135739926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<3>. 當前頁面下滑找到部落格面板及定製 CSS
![面板 CSS](https://img-blog.csdnimg.cn/20200828135829326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<4>. 選擇一個部落格面板模板,並寫入要替換的 CSS 樣式
<5>. 儲存設定
---
#### 2.運用舉例
> 下文以 SimpleMemory 模板為例
SimpleMemory 預設如下:
![SimpleMemory](https://img-blog.csdnimg.cn/20200828140514951.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
在瀏覽器中按 F12 鍵(某些鍵盤為:Fn + F12)
便可開啟部落格頁面的 HTML CSS 程式碼
![F12](https://img-blog.csdnimg.cn/20200828140936241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
###### (1)、修改字型顏色
假如我要把標題改為粉紅色
<1>. 點選左上角檢查元素按鈕
![檢查元素](https://img-blog.csdnimg.cn/20200828141220914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<2>. 滑鼠點選標題文字
![標題文字](https://img-blog.csdnimg.cn/20200828141711265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<3>. 此時右下角自動定位到標題文字的 CSS 樣式
![標題CSS樣式](https://img-blog.csdnimg.cn/20200828141812113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<4>. 找到控制標題文字的 CSS 程式碼段點選顏色並更改顏色
> 如果不知道具體是哪一個,可以一個一個試一下
![更改顏色](https://img-blog.csdnimg.cn/20200828142052885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
此時頁面上的標題顏色已經變成粉紅色了,但此時還沒有結束,這裡只是預覽效果,還沒有真正改變
<5>. 複製控制顏色的那一段 CSS 程式碼段
![複製 CSS](https://img-blog.csdnimg.cn/20200828142429762.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
<6>. 貼上 CSS 樣式
![貼上 CSS 樣式](https://img-blog.csdnimg.cn/20200828142802285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
此時部落格頁面的顏色便定製為粉紅色了!!!
###### (2)、修改字型大小
假如我要把標題放大
基本步驟與更改顏色一樣,不同的是這裡不是修改顏色而是更改或重設字型大小
再次找到剛才標題的 CSS 程式碼塊
新增 font-size:
> 假如本來就有 font-size: 那麼只需要修改值即可
![字型大小](https://img-blog.csdnimg.cn/20200828143318222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
選擇一個合適的大小,然後複製貼上到 CSS 設定框中去
完成後的效果:
![字型放大效果](https://img-blog.csdnimg.cn/20200828143524208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
###### (3)、修改字型位置
假如我要把標題居中
基本步驟與更改顏色一樣,不同的是這裡不是修改顏色而是更改或重設字型在樣式框中的位置
這次不是點選標題文字,而是點選標題文字所在樣式框
![標題框](https://img-blog.csdnimg.cn/20200828144132644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
左下角同樣出現了標題框樣式的 CSS 程式碼段
新增 text-align:
這裡選擇居中
> 當然,如果原本就有 text-align: 就只有修改值便可以了
>
![font-size:](https://img-blog.csdnimg.cn/20200828144220552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
同樣把程式碼段複製貼上到 CSS 修改框中
![複製貼上](https://img-blog.csdnimg.cn/20200828144358137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
儲存後,最終效果:
![最終效果](https://img-blog.csdnimg.cn/20200828144427236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
其他還有許多可定製的地方,但基本原理相同……
---
#### 3.“Mac & ios 黑暗” 定製步驟
###### (1)、切換 SimpleMemory 主題
![SimpleMemory](https://img-blog.csdnimg.cn/20200829143138545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
###### (2)、複製貼上 CSS 樣式
> 轉載請註明出處!!!不可用作商業用途!!!
```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;
}
```
###### (3)、最終效果
PC:
![PC](https://img-blog.csdnimg.cn/20200829143516181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
移動:
![移動](https://img-blog.csdnimg.cn/20200829143547776.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Rfc2lfR29k,size_16,color_FFFFFF,t_70#pic_center)
---
#### 4.附
==*交流方式:*==
**QQ:** 1846334075
**WeChat:** zhoujirui54
**CSDN:**
**Cnblogs:**
**GitHub:**
**Gitee:**