〔總整理〕修改Blogger設定｜修改部落格版面設定｜修改css、html（2015.07.24.）

前言：最近看到別人的部落格．Blogger，都弄得很漂亮，想說，也來改改自己的部落格 — 不管是文章字體大小、行距、段距、字體間距、小工具等等，看能不能讓部落格看起來更順眼、更舒服、更讓人看的下去。（如果自己都不喜歡自己的部落格，別人是要怎麼喜歡？）

作法：Google 搜尋

利用 Google 搜尋「關鍵字」（如：blogger 行高設定），看到相關文章，就試試看。一下子改 HTML、一下子改 CSS，因為自己不懂語法，只能依樣畫葫蘆，能學多少、就學多少。萬萬沒想到，越改，自己的部落格文章格式→越看越不順眼；行高 超高，不知哪個環節弄錯了，導致自己的部落格文章越看越奇怪。（心裡十分懊惱，明明是把部落格要弄漂亮一點，怎麼越弄越糟。）做中學，錯中學。慢慢改、慢慢修，總是會有一天能改到自己滿意的。

@@ 結論．整理

記錄一下自己曾經修改過的<strong>CSS</strong>、<strong>HTML</strong>，目前的版型、文字大小、行距等等，看起來都很滿意，希望自己能多專注在產出優質的文字內容，咱們拭目以待。

---

---

h2 {

font-size: 1.4em;

line-height: 1.4em;

}

h3 {

font-size: 1.4em;

line-height: 1.4em;

}

h2{

text-align: center;

}

h3{

text-align: center;

}

h2{

font-weight:bold;

}

h3{

font-weight:bold;

}

h2{

font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

}

h3{

font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

}

blockquote{

margin: 1em;

padding: 1em;

font-size: 1.4em;

font-style: normal;

background-color: #E9EBEE;

border-left: 6px solid #007ee5;;

border-radius: 10px;

}

.post-body img {max-width: 85%; height: auto}

.titlewrapper {padding-top: 40px&nbsp; !important;}

.blog-feeds, .post-feeds {display :none;}

.post-body {

font-size:130%;

color:#222222;

line-height: 1.8em;

letter-spacing: 1.4px;

}

---

---

@@ 調整「H2、H3」字體大小、字型、置中、粗體

h2 {

font-size: 1.4em;

line-height: 1.4em;

}

h3 {

font-size: 1.4em;

line-height: 1.4em;

}

h2{

text-align: center;

}

h3{

text-align: center;

}

h2{

font-weight:bold;

}

h3{

font-weight:bold;

}

h2{

font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

}

h3{

font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

}

@@ 調整「引用段落．Blockquote」背景、邊框、角度

blockquote{

margin: 1em;

padding: 1em;

font-size: 1.4em;

font-style: normal;

background-color: #E9EBEE;

border-left: 6px solid #007ee5;;

border-radius: 10px;

}

@@ 調整「照片」大小、位置

.post-body img {max-width: 85%; height: auto}

.titlewrapper {padding-top: 40px&nbsp; !important;}

.blog-feeds, .post-feeds {display :none;}

@@ 調整「內文」字體大小、行高、間距

.post-body {

font-size:130%;

color:#222222;

line-height: 1.8em;

letter-spacing: 1.4px;

}

---

---

（以下整理搜尋到的相關文章，加減看、加減有收穫！）

---

---

修改文章內文 行距、字元間距

．〔參考文章〕在 Blogger 範本中調整文章標題的位置，及文章的位置、字體大小、字距、行距 - 櫻桃椒的網誌
．http://licoriceguava.blogspot.tw/2014/06/blogger.html

隨機 文章（直接貼上 此 HTML）

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

．〔參考文章〕裝上隨機文章(Random Posts)，加強部落格的黏著度 >> 0 與 1 謎詭世界
．http://01mistery.blogspot.com/2009/10/random-posts.html

---

---

===以下是直接改 CSS===
===以下是直接改 CSS===


（將預設的字型，改成「微軟正黑體」）
h3.post-title, h3.entry-title {
font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;
}
.post-body, .entry-content {
font-family: '微軟正黑體', 'Microsoft JhengHei', Arial;
}

（照片最大寬度）
.post-body img { max-width:720px; }

（行距 1.8）
. post-body {line-height: 1.8em;}

（網誌標題、網誌說明的文字 置中）
#header-inner {text-align: center ;}

（取消 blogger 內建的 訂閱 atom）
.blog-feeds, .post-feeds {display :none;}

（部落格網站標題 離 網頁頂端多遠）
.titlewrapper {padding-top: 40px !important;}

h3.post-title, h3.entry-title {
font-family: '微軟正黑體', 'Microsoft JhengHei', Georgia;
}
.post-body, .entry-content {
font-family: '微軟正黑體', 'Microsoft JhengHei', Arial;
}
.post-body img { max-width:720px; }
. post-body {line-height: 1.8em;}
letter-spacing: 0.8px;
#header-inner {text-align: center ;}
.blog-feeds, .post-feeds {display :none;}
.titlewrapper {padding-top: 40px !important;}