〔總整理〕修改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;}




    這個網誌中的熱門文章

    〔筆記〕與 風水 有關的點點滴滴 (持續收錄中 ... .. .)

    〔行程規劃〕台中.三天兩夜(適合老人、小小孩)

    〔總整理〕 Chrome Extension 推薦|Google瀏覽器 擴充功能 必下載|Chrome快速鍵(會持續更新、、、)