零基礎自製部落格園「賽博朋克」主題 10分鐘詳解 – 精簡歸納

2020 年 8 月 28 日
筆記
JERRY'S 教程大本營

零基礎自製部落格園「賽博朋克」主題 10分鐘詳解 – 精簡歸納

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

零基礎自製部落格園「賽博朋克」主題 10分鐘詳解 – 精簡歸納

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 樣式

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

/*
 * @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：//blog.csdn.net/D_si_God

Cnblogs：//www.cnblogs.com/JERRY-Z-J-R/

GitHub：//github.com/JERRY-Z-J-R

Gitee：//gitee.com/JERRY-Z-J-R

Tags: JERRY'S 教程大本營