廢宅人生
(駄目ヲタの人生)

為方便修改Blog，將更動的地方做一些記錄

2017/06/06

1.管理頁首→部落格描述

如何分行/斷行:在要分行/斷行的地方加上<br>

2.發現一個介紹痞客幫CSS 架構的網頁

連結在此、連結2

3.部落格描述下面有一張圖片是屬於上方背景

可從「樣式管理→文字背景設計工具→部落格最上方」那邊可選擇/上傳圖片做更改

然後有個東西叫作橫幅，它就是蓋在上方背景上面的

我的部落格模板的預設是這張圖(連結在此)

在CSS原始碼內有一串語法是寫在#header {/*橫幅*/}下面:

    #banner {/*橫幅主要內容*/
        height: 0px;
        background: url(http://橫幅圖片網址.jpg) no-repeat;
    }

裡面的height是調整橫幅露出的高度，我調0，因為我不太需要用到這個東西，有上方背景就好了，暫時不需要我就遮掉它了

no-repeat就是指不要重複

2017/06/07

4.續上面的橫幅，接在後面的是h1─部落格標題

我的設定如下

#banner h1 {/*部落格標題*/
                position: absolute;
                top: 20px;/*標題上下移動，正往下，負往上*/
                left: 0px;/*標題左右移動，正往右，負往左*/
                width: 200px;/*標題寬度*/
                text-align: left;/*文字對齊，center:中央對齊；justify:左右對齊；left:靠左對齊；靠右對齊*/
                line-height: 30px;/*行距*/
                height: 60px;/*標題高度*/
                overflow: hidden;/*捲軸，visible；auto；scroll；hidden*/
                font-size: 15px;
                border-right: 2px solid #d3d3d3;/*邊框:厚度 顏色*/
                padding: 0px 20px;/*裡邊界調整上下 左右*/
}

捲軸我是參考此連結的說明:

overflow:控制當內容超過顯示區域時捲軸的顯示
overflow-x:x捲軸的顯示
overflow-y:y捲軸的顯示
捲軸顯示有四種狀態
visible(預設):內容完全顯示不嵌入顯示區域
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動
hidden:內容嵌入顯示區域，捲軸不會出現

padding與margin相關的說明我是參考此連結:

1.上下左右的邊界都一樣:
就直接打margin: 10px;
意思就是上下左右的邊界都為10px。(這裡以10px做範例，可自行調整數值。)

2.上下左右的邊界都不同:
例如:上邊界5px、下邊界6px、左邊界7px、右邊界8px。
就這樣打：margin: 5px 8px 6px 7px;
順序是:上右下左。

3.上下邊界一樣，左右邊界一樣:
例如:上邊界5px、下邊界5px、左邊界10px、右邊界10px。
就這樣打:margin: 5px 10px;
順序是:上下、左右。

注意:上面的範例都是margin，但padding用的也是一樣的方法

2017/07/29

5.續之前的banner h1(部落格標題)之後，緊接著是h2(部落格描述)

功能上和h1差不多，有更動的地方只有文字大小和顏色的改變，這些改變可從「樣式管理→文字背景設計工具→部落格最上方」更動

#banner h2 {/*部落格描述*/
                position: absolute;
                top: 10px;
                left: 260px;
                width: 670px;
                height: 90px;
                line-height: 30px;
                overflow: hidden;
}

下一段則是"跳到主文"跟"部落格全站分類"，一開始我還找不到這個功能在哪

原先預設的文字顏色和大小讓我比較不容易找到，後來改成這樣↓

主要更動文字大小及顏色，它的a是指超連結

.skiplink {/*跳到主文*/
            position: absolute;
            top: -20px;
            left: 10px;
            font-size: 16px;
}
.skiplink a { color: #fff; }
#blog-category {/*部落格全站分類*/
                        position: absolute;
                        top: -20px;
                        left: 80px;/*因為"跳到主文"的文字大小有改所以"部落格全站分類"的左邊寬度也要改動*/
                        font-size: 16px;
                        color: #fff;
}
#blog-category a { color: #fff; }

2017/10/14

1.更動背景及部落格描述字體顏色及粗細

因為上方背景我用藍色較多的圖片，為了要讓部落格描述的字體看得比較清楚，所以選用藍色的相反色

顏色的改變從樣式管理→文字背景設計工具裡面改

字體的粗細我是參考這篇文章→連結

從「管理頁首」→「部落格描述」

在你的文字前後用

<span style="font-weight:bold;">

及

</span>

來包住你想改變的字體

另外如果自己要調整粗細可以改成→<span style="font-weight:bold;數字=bold">

數字的地方打上粗細度

另外附上我參考網站上除了bold之外的語法

normal:基本上就是預設字體，通常不需要特別寫出來。
bolder:比粗體更粗一點的字體
lighter:比預設字體更細的文字。
數字:直接給400~900 的數字。400=normal;700=bold。