零基礎自制 部落格園 “賽博朋克” 主題 10分鐘詳解 - 精簡歸納
阿新 • • 發佈：2020-08-28
# 零基礎自制 部落格園 “賽博朋克” 主題 10分鐘詳解 - 精簡歸納
> *JERRY_Z. ~ 2020 / 8 / 28*
> *轉載請註明出處！*
---
[TOC]
---
#### 1.簡單說明（零基礎、超詳細）
###### (1)、為什麼要寫這篇部落格？
作為一名計算機專業的學生，擁有自己的部落格並持續維護更新對於學習掌握知識點及技能是非常重要的！！！
寫這篇文章的時候我也才剛接觸部落格不久，目前主要用的是：CSDN、部落格園，但是作為一個曾經差一點報了設計學專業的我來說，一個簡約漂亮的部落格對我來說太太太重要了！！！
可問題來了，我不懂 HTML CSS JavaScript 啊，僅僅是瞭解一點最最最基本的標籤使用而已，這對我想自定義部落格主題頁面的想法來說太難了，所以我就摸索有沒有什麼簡單的方法，結果還真搞懂了……
先給大家看一下我現在的部落格主頁介面 (“賽博朋克” 風格）：
PC端：
移動端：
所以，我想應該還有許多小白像我一樣渴望定製自己的部落格園主題卻不知道怎麼辦，而這就是我寫這篇部落格的主要目的，感興趣的小朋友就繼續往下看吧！！！
> 寫部落格很費精力，轉載的話，請註明一下出處！
###### (2)、部落格園如何零基礎定製自己的主題？
> 由於零基礎不懂任何前端的網頁開發技術，所以這裡只是在部落格園所提供的主題基礎上修改 CSS 樣式，從而制定自己的風格，當然，不要看只是修改樣式，只要你厲害是可以弄出非常漂亮的效果哦！！！
部落格園修改 CSS 樣式詳細步驟：
<1>. 進入自己的部落格主頁點選管理
<2>. 點選設定
<3>. 當前頁面下滑找到部落格面板及定製 CSS
<4>. 選擇一個部落格面板模板，並寫入要替換的 CSS 樣式
<5>. 儲存設定
---
#### 2.運用舉例
> 下文以 SimpleMemory 模板為例
SimpleMemory 預設如下：
在瀏覽器中按 F12 鍵（某些鍵盤為：Fn + F12）
便可開啟部落格頁面的 HTML CSS 程式碼
###### (1)、修改字型顏色
假如我要把標題改為粉紅色
<1>. 點選左上角檢查元素按鈕
<2>. 滑鼠點選標題文字
<3>. 此時右下角自動定位到標題文字的 CSS 樣式
<4>. 找到控制標題文字的 CSS 程式碼段點選顏色並更改顏色
> 如果不知道具體是哪一個，可以一個一個試一下
此時頁面上的標題顏色已經變成粉紅色了，但此時還沒有結束，這裡只是預覽效果，還沒有真正改變
<5>. 複製控制顏色的那一段 CSS 程式碼段
<6>. 貼上 CSS 樣式
此時部落格頁面的顏色便定製為粉紅色了！！！
###### (2)、修改字型大小
假如我要把標題放大
基本步驟與更改顏色一樣，不同的是這裡不是修改顏色而是更改或重設字型大小
再次找到剛才標題的 CSS 程式碼塊
新增 font-size:
> 假如本來就有 font-size: 那麼只需要修改值即可
選擇一個合適的大小，然後複製貼上到 CSS 設定框中去
完成後的效果：
###### (3)、修改字型位置
假如我要把標題居中
基本步驟與更改顏色一樣，不同的是這裡不是修改顏色而是更改或重設字型在樣式框中的位置
這次不是點選標題文字，而是點選標題文字所在樣式框
左下角同樣出現了標題框樣式的 CSS 程式碼段
新增 text-align:
這裡選擇居中
> 當然，如果原本就有 text-align: 就只有修改值便可以了
>
同樣把程式碼段複製貼上到 CSS 修改框中
儲存後，最終效果：
其他還有許多可定製的地方，但基本原理相同……
---
#### 3.“賽博朋克” 定製步驟
###### (1)、切換 MTTrendy 主題
###### (2)、複製貼上 CSS 樣式
> 轉載請註明出處！！！不可用作商業用途！！！
```css
/*
* @Author: JEYYR_Z. MTTrendy
* @Date: 2020-08-27 23:21:16
* @LastEditTime: 2020-08-28 12:28:54
* @LastEditors: Please set LastEditors
* @Description: 轉載請註明出處！！！不可用作商業用途！！！
* @FilePath: \undefinede:\MyCode\MyBlog\DIY CSS.css
*/
#main {
background-color: #000;
}
#top {
background: #000;
}
body {
background: #000;
}
#rightmenu li {
text-align: center;
}
#top a, #top a:link, #top a:visited, #top a:active, #top a:hover {
font-size: 66px;
color: #ff9696;
}
h1 {
background: #000;
text-align: center;
}
#tagline {
text-align: center;
color: #666;
}
div.post {
background: #000;
border-left: 12px solid #666;
border-right: 12px solid #666;
border-top: 12px solid #666;
border-bottom: 12px solid #666;
}
p.postfoot {
color: #00ffff;
}
a:link {
font-weight: normal;
text-decoration: none;
color: #ff6699;
font-size: larger
}
a:visited {
font-weight: normal;
text-decoration: none;
color: #ff6699;
font-size: larger;
}
#profile_block {
text-align: center;
}
.div_my_zzk {
text-align: center;
}
#rightmenu ul {
color: #ffffa6;
font-size: larger;
}
#footer {
text-align: center;
}
#rightmenu h3 {
background: #000;
text-align: center;
font-size: xx-large;
color: #f8f8f8;
}
div.post h2 a {
color: #ccc;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
div.post h2 a:link {
color: #f8f8f8;
}
div.post h2 a:visited {
color: #f8f8f8;
}
a:hover {
color:#f8f8f8
}
p.date {
color: #a9a9a9;
font-size: large;
text-align: center;
}
```
###### (3)、最終效果
PC:
移動：
---
#### 4.附
==*交流方式：*==
**QQ：** 1846334075
**WeChat：** zhoujirui54
**CSDN：**
**Gitee：**