靜茉帕然

◎公告分行

管理後台→部落格管理→側邊欄位設定→內容欄→公告區塊→公告版位→設定

→公告版位內容處欲分行的地方加上<br/>→送出

→按預覽→確定無誤後儲存設定

 

※以下調整都需進入部落格後台的「樣式管理」中「自定樣式」，點選「CSS 原始碼編輯」，從此修改語法。

 

◎文章內文行距調整

Article-body後找到：(找不到的人可以按ctrl+F，搜尋關鍵字)

.article-content{
font-size:12pt;
line-height: 180% ;

letter-spacing:1.8px;

margin : 5px 0px ;
padding: 0px 0px 0px 0px;

 

紅色的地方是調整過的，就是本部落格的效果。這邊的font-size即是改變文字大小，line-height就是改變行距。建議font-size設定至少10pt以上，line-height設定至少160%以上，會比較方便閱讀。

除此之外，行距調整以單位em而言，即為word的一般行距，也就是說，1.5em即為word的1.5倍行高，以此類推。（注意：單位不同，要一併修改）

 

◎文章標題大小調整

Article→title後找到：(找不到的人可以按ctrl+F，搜尋關鍵字)

.title a{

color: #963;

font-weight: bold;

font-size:12pt;

text-shadow:1px 1px 0 #fff;}

 

這個可以慢慢試，按預覽就可以看了，直到調整到你喜歡的標題大小後，再按儲存設定即可。

 

◎關閉「你可能會有興趣的文章」

在CSS 原始碼編輯最下方加上語法：

.recommended-posts3 {display:none;}

 

◎去除文章下方的廣告

在CSS 原始碼編輯最下方加上語法：

#blog468x60Banner{display:none !important;}

※請注意，實際效果還是不能把廣告完全刪掉，但可以讓該廣告的flash動畫消失。簡言之，廣告的連結還是在的。

 

◎新增噗浪貼

你的噗浪→個人檔案的編輯(最上方)→噗浪貼→調整你喜歡的顏色樣式→將下方語法複製：(以下是以我的噗浪貼語法為例)

<div style="width:200px; height:375px;"><iframe src="http://www.plurk.com/getWidget?uid=7766409&amp;h=375&amp;w=200&amp;u_info=2&amp;bg=725454&tl=FCF4CA" width="200" frameborder="0" height="375" scrolling="no"></iframe><div style="float: right; padding: 1px;"> <a href="http://plurk.com/" target="_blank" style="font-size: 10px !important; color: #999 !important; border: none; text-decorate: none;" title="Plurk - A Social Journal for your life">Plurk.com</a></div></div>

 

接著，到痞客邦「側邊欄位設定」→版位暫存區→新增版位→貼上剛剛的語法並打上標題→將新增的版位拉到側欄→按預覽→確定無誤儲存設定

 

◎繼續閱讀修改

不知為何，我試過很多網路上的方法，但都沒法修改「繼續閱讀」的大小和位置。初步推測可能是痞客邦使用的模板不同所致，但最後還是被我試出來了^^

 

Article→content後找到：.article-content .more{}(找不到的人可以按ctrl+F，搜尋關鍵字)

在括弧裡頭加上如下，就可以改變字型大小和位置了，若想改變顏色，請自行加上，請參考CSS色碼字型嘗試。

.article-content .more{

text-align: right;
font-size:13px;}

 

◎刪除「你可能會感興趣的文章」

在CSS 原始碼編輯最下方加上語法：

#content .recommended-posts {display:none;}

※注意中間沒有3喔，有些網路查到的解決方法會有，但多了一個變數就沒有辦法刪除了！

○●

 

以上是我剛使用痞客邦所做的一點小調整，可以讓文章更加方便閱讀。茉帕認為痞客邦的「文章內文行距」還頗需要調整的，不然大多的版型按照原本設定，就像是麻糬，看起來格外吃力。

 

此外，如果是使用套用版型做微調的話，可能有一些程式碼要花一點時間尋找一下，畢竟每位設計者習慣使用的語法不同，所以，如果有一些語法實在找不到請自己加上去。不過，基本上只要看得懂英文，要改CSS其實並不難喔。

 

這一篇應該也算是給自己的紀錄吧，在此與您分享~~ 

 

○2013.5.21新增●

 

 ◎移除上方的shared AD廣告

  在CSS 原始碼編輯最下方加上語法：

 #links-row-1{margin-top: -325px}

 ※由於痞客邦的shared AD的廣告會定時替換的樣子，如果看到又跑出來了，可以自由調整後面-325px的數字，把它再擠掉就可以了。

  

○2013.05.31新增● 

 

◎調整內文邊緣寬度

article-content{ 後找到：(找不到的人可以按ctrl+F，搜尋關鍵字)

.article-content {

margin:10px ;

 

這裡的margin可以修改內文上緣(也就是前端文字到圖框邊緣的距離)，可以依個人喜好自行調整。有些模版的css裡並不會有margin的設定，這時，請在article-content 後加上：

 margin-right:7%; margin-left:3%

 

◎段落間距調整法

在article-content p{後找到：(找不到的人可以按ctrl+F，搜尋關鍵字)

.article-content p {
margin-bottom:0.7em;

 

一般模板都會設定成1em，對於調整過文字間距line-height的人來說，往往段落間距會變得太寬，可以利用這裡的margin-bottom自行調整。

至於另一個css語法，margin-top就是前面提到的上邊界margin的正名，無論用哪一個試出來的效果都是一樣的。

紅色數據的部分為本部落格呈現的效果，您也可以自行嘗試出自己最滿意的內文呈現效果喔。 

 

○2013.7.24新增●

 

※痞客邦官方css架構圖(連結請點我)

 

整個頁面

body/*整個介頁面*/

#body-div/*整個頁面*/

a/*超連結*/

a:hover/*滑鼠移動到超連結上時*/

  

後台管理

#authority/*後台管理列*/

#newpost/*發表新文章*/

#backstage/*進入後台*/

#container/*所有內容區塊*/

#container2/*所有內容區塊2*/

#container3/*所有內容區塊3*/

 

 橫幅

#header/*橫幅*/

#login-bar/*招呼語&登入登出*/

#banner/*橫幅主要內容*/

#banner h1/*部落格標題*/

#banner .skiplink/*跳到主文*/

#banner h2/*部落格描述*/

#blog-category/*部落格全站分類*/

 

其他服務頁面導覽

#navigation/*其他服務頁面導覽*/

#navigation a/*其他服務連結區塊內的所有連結*/

#navigation li/*其他服務連結區塊內的所有項目*/

#link-album/*相簿連結*/

#link-blog/*部落格連結*/

#link-guestbook/*留言版連結*/

#link-profile/*名片連結*/

  

主要內容區

#content/*主要內容區*/

↑指文章區塊的全區

  

公告區

#spotlight/*公告版位*/

#spotlight h5/*公告版位標題*/

#spotlight-text/*公告版位內容*/

  

文章區

#article-area/*文章+列表+回應區塊*/

#article-box/*文章+列表區塊*/

.article-area-title/*文章+列表區塊之標題*/

#display/*瀏覽模式*/

#display span/*瀏覽方式這四個字*/{}

#display a/*標題列表/簡短摘要*/{}

.article-head/*文章標題+發表時間*/

.publish/*發表時間*/

.month/*月*/

.date/*日*/

.dat/*週*/

.year/*年*/

.time/*時*/

.title h2 a/*文章標題*/

.title h2 img/*文章標題前的密碼圖示/隱藏圖示/好友保護圖示*/{}

.article-body/*文章內容區*/

.bookmark/*加入書籤*/

.article-content/*文章內文*/

.more/*繼續閱讀*/

.fans-club/*小圈圈討論*/

.author/*發表作者和時間*/

.farward/*轉寄文章*/

.article-footer/*文章附加資訊*/

.refer/*文章分類*/

.history/*歷史上的今天*/

h6/*歷史上的今天的標題*/

ul/*文章分類*/

.back-to-top/*回到頁首*/

.main-list/*標題模式的文章列表*/

table/*表格*/

tr/*行*/

.list-num/*標號標題*/

.list-date/*發表時間標題*/

.list-title/*文章標題標題*/

.list-visit/*人氣標題*/

 

 文章回應及引用區

.list-comment/*回應標題*/

#user-post/*回應+引用區塊*/

#trackback-box.user-post-box/*引用區塊*/

#trackback-title.user-post-title/*引用區塊標題*/

.img/*開合圖示*/

.span/*標題文字*/

#trackback-url/*引用網址*/

#trackback-input/*網址鈕*/

.input/*複製鈕*/

#trackback-text.user-post-text/*所有引用區塊*/

.single-post/*單一引用*/

.post-info/*引用者資訊*/

.post-text/*單一引用內容*/

#comment-box.user-posy-box/*回響區塊*/

#comment-title.user-post-title/*回響區塊標題*/

.img/*開合圖示*/

.span/*標題文字*/

.post-comment/*留下回響*/

a/*留下回響超連結*/

 

#comment-text.user-post-text/*所有回響區塊*/

#user-post/*引用及回應列表全部的大範圍*/

#trackback-box/*僅引用區塊*/

#trackback-text/*引用內容區塊*/

#trackback-title/*引用列表標題*/

#trackback-box .single-post/*單一引用*/

.post-comment/*留下迴響*/

#comment-box/*僅回應列表*/

#comment-title/*回應列表標題*/

#comment-text/*回應內容區塊*/

#comment-box .single-post/*單一回應*/

.reply-message/*回覆回響*/

.user-ip/*回響者IP*/

.post-photo/*回響者頭像*/

.a img/*回響者頭像*/

.post-text/*單一回響內容*/

.lireply-text/*回覆回響內容*/

a/*留下回響超連結*/

.page/*頁數*/

.post-info/*回響者資訊*/

.b/*樓層數*/

.img.hidden-message/*公開/隱藏回響*/

.user-name/*回響者名稱*/

.img.pixnet-user/*PIXNET會員圖示*/

.home-page/*回響者網址*/

.span.post-time/*留下回響時間*/

.user-post-title/*引用列表標題+回應列表標題*/;

.user-post-text/*引用內容區塊+回應內容區塊*/

.single-post/*單一引用+單一回應*/

.post-info/*引用者資訊+回應者資訊*/

.post-text/*單一引用內容+單一回應內容*/

.post-text p/*單一引用標題+單一回應標題*/

.reply-text/*版主回覆內容*/

.reply-text p/*版主回覆資訊*/

.secret/*悄悄話*/

.show-message/a.hide-message/*公開/隱藏*/

.delete-message/*刪除回響*/

 

側欄工具列

#links/*側欄工具列*/

#links-row-1/*3欄是第1欄*/

#links-row-2/*3欄式第2欄*/

 

誰來我家

#visitor.box/*誰來我家*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.li a img/*訪客頭像*/

.box-more

.a/*所有訪客列表*/

 

 碎碎唸

#murmur.box/*碎碎念*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.murmur-time/*碎碎念發表時間*/

.murmur-text/*碎碎念內容*/

.box-more/*所有歷史碎碎念*/

.box-more a/*所有歷史碎碎念*/

#my-photo/*版主頭像*/

#my-status/*碎碎唸文字內容*/

  

好友的碎碎唸聯播

#broadcast.box/*好友的碎碎念聯播*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

ul/*好友的碎碎念*/

.broadcast-photo/*好友頭像*/

.broadcast-time/*好友發表時間*/

.broadcast-text/*好友碎碎念內容*/

  

搜尋

#search/*搜尋*/

#search .box-title/*搜尋標頭*/

#search .box-text/*搜尋內容區塊*/

#search-target/*搜尋輸入文字欄位*/

#search-send/*搜尋確定鈕*/

  

麻吉交流

#headshot.box/*麻吉交流*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#headshot-img/*個人頭像*/

#friend-apply/*申請好友*/

#send-message/*傳送私訊*/

  

參觀人氣

#counter.box/*參觀人氣*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#countr .box-text span/*人氣數字*/

  

更換樣式

#change-theme/*更換樣式*/

#change-theme .box-title/*更換樣式標頭*/

#change-theme .box-text/*更換樣式內容區塊*/

#change-theme select/*更換樣式選單*/

  

新聞交換

#feed.box/*新聞交換*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#feed img/*新聞交換icon*/

  

月曆

#calendar.box/*月曆*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

table/*月曆表格*/

.mouth-nav/*切換月份的那一行*/

.cal-backward/*上個月*/

.current-mourh/*現在月份*/

.cal-forward/*下個月*/

.weekday/*星期*/

#calendar .calMonthNav/*選擇月份的那一欄*/

#calendar .calMonthHeader/*星期幾的那一欄*/

#calendar td/*日期儲存格*/

#calendar td a/*月當天有寫文章的儲存格*/

  

近期文章

#recent-article.box/*近期文章*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#recent-article .box-text .a/*文章標題*/

  

熱門文章

#hot-article.box/*熱門文章*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#hot-article .box-text .a/*文章標題*/

 

 文章分類

#category/*文章分類*/

#category .box-title/*側欄區塊標題*/

#category .box-text/*側欄區塊內容*/

#category .box-text.box-more/*總開何按鈕*/

#category .box-text.img/*按鈕*/

#category .box-text.div/*單一分類目錄*/

#category .box-text.img/*分類目錄開合按鈕*/

#category .box-text.ul/*目錄內容*/

#category .box-text.a/*目錄名稱*/

#category .box-text h6/*文章分類的分類目錄*/

 

 文章彙整

#archive.box/*文章彙整*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.select/*月份選單*/

.a/*所有文章列表超連結*/

#archive .box-text li a/*所有文章列表*/

  

最新回響

#latest-comment.box/*最新回響*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#latest-comment .box-text span/*最新迴響-迴響日期*/

#latest-comment .box-text li a/*-最新迴響-迴響摘要*/

  

最新引用

#latest-trackback.box/*最新引用*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#latest-trackback .box-text li a/*引用過去的文章標題*/

#latest-trackback .box-text li span/*引用過去的部落格主標*/

  

最新訂閱

#subscription.box/*最新訂閱*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

#subscription .box-text li a/*最新訂閱-訂閱對方的新文章標題*/

#subscription .box-text li span/*最新訂閱-訂閱對方的部落格主標*/

  

我的蒐藏

#favorite/*我的蒐藏*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.select/*我的蒐藏選單*/

 

 我的連結

#mylink.box/*我的連結*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.link-box/*單一連結分類*/

.h6/*連結分類標題*/

#my-link .box-text .link-box li.a/*單一個我的連結*/

  

自訂欄位

.folder/*所有自訂欄位*/

.folder .box-title/*所有自訂欄位標頭*/

.folder .box-text/*所有自訂欄位內容區塊*/

  

服務提供

#powered.box/*服務提供*/

.box-title/*側欄區塊標題*/

.box-text/*側欄區塊內容*/

.a/*登入登出連結*/

  

頁尾

#footer/*頁尾*/

.p/*頁尾描述*/

#bottom/*頁尾超連結*/

.bottom-skiplink/*回到頁首\回到主文*/

.bottom-pixnet/*PIXNET痞客邦\申請帳號\會員服務專區*/

 

 文章列表

.main-list/*列表*/

.main-list table/*列表表格*/

.main-list h3/*列表標題*/

.main-list th/*列表表頭表格*/

.main-list td/*列表一般表格*/

.main-list a/*列表文章名稱*/

#article-list/*所有文章列表*/

#category-list/*單一分類文章列表*/

#murmur-list/*所有歷史狀態列表*/