博客園自定義主題樣式

記錄我在定製我的blog頁面效果時遇到的技巧及方法等。

基本流程

1. 設定博客皮膚爲BluSky
2. 定製首頁代碼：引入外部CSS

頁頂博主名字及副標題

在首頁html內輸入如下代碼可添加博主名到頁面頂端，也可添加副標題：

<header class="main-header" id="site-head">
        <div id="top" class="vertical">
            <div id="site-head-content" class="inner row">
                <div class="col-md-9">
                    <div class="site-description">
                        <h2 class="blog-title">YourBlogName</h1>
                        <h3 class="blog-description">SubtitleContent</h2>
                    </div>
                </div>
            </div>
        </div>
</header>

• YourBlogName：主標題，可寫博主名等
• SubtitleContent：副標題，可寫座右銘、博客說明等

字體及背景圖

建立CSS編寫頁面字體的信息及背景圖；首先須要引入所建立的CSS，方法爲經過link標籤引入，在首頁html輸入：

<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/YourBolg/YourTheme.css"/>

• YourBlog：我的建立博客園blog時的Blog地址名
• YourTheme：上傳編寫好的.css文檔到博客-管理-文件內，以便上述代碼調用

關於.css文件的定製信息包括各種標題、字體樣式、背景圖片等信息，能力有限暫不細講，但若採用其餘主題可有更便捷方法實現更換背景圖、修改字體等功能。

Fork me on Github 標籤

在首頁html內輸入如下代碼便可實現標籤：

<a href="https://github.com/YourGithub">  
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
    src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" 
    alt="Fork Me On GitHub" data-recalc-dims="1">
</a>

• YourGithub：我的github的連接
• src="..."：github官網提供的標籤樣式，可自行查找

參考

• 付傷年華的博客
• 止步路人 - 讓你的博客再也不單調，博客園設置隨機背景圖片教程
• Rosaynatu - 博客園我的首頁背景設置
• FEbuddy - 引入外部CSS的兩種方式及區別
• legege007 - 博客園美化
• CSS文本字體顏色
• Chrome取色器
• lunhui_zsf - 字體font-family對照表