分享 | 痞客邦PIXNET部落格版面樣式CSS – 雜誌封面圖文集

有別於一般部落格的版面，此版面取文章中照片來當作該文章的代表圖示，最新的文章篇幅較大，設計成雜誌封面的感覺，其他篇文章篇幅較小，滑鼠移至文章區塊時圖片滑動可顯示文章摘要。另一項特點是首頁上方的下拉式側欄與左方的隱藏式側欄，讓部落格版面不再雜亂，清爽好閱讀，常用相片或圖文寫文章的部落格，快來套用吧！

版型-首頁

版型-內頁

使用規定

CSS語法 

對著文字框按右鍵可以全選，複製貼上至管理後台”自訂樣式”->”CSS原始碼編輯”

/*<br /><br />Copyright © CSS designed by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog<br /><br />主要色碼: #e60033(紅)、#e9546b(薔薇色)、#f09199(淺粉)<br /><br />*/<br /><br />/* —————————————————————————————————————————— 清空 */<br /><br />#comment-form table{<br /><br />margin: 0 auto ;<br /><br />}<br /><br />#comment-form td , #comment-form th{<br /><br />border: 0px solid #000 ;<br /><br />padding: 0px 0px;<br /><br />}<br /><br />#comment-form input#send-comment{<br /><br />padding: 0px 0px ;<br /><br />}<br /><br />body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {<br /><br />margin:0;<br /><br />padding:0;<br /><br />}<br /><br />table {<br /><br />border-collapse:collapse;<br /><br />border-spacing:0;<br /><br />}<br /><br />fieldset,img {<br /><br />border:0;<br /><br />}<br /><br />address,caption,cite,code,dfn,em,th,var {<br /><br />font-style:normal;<br /><br />font-weight:normal;<br /><br />}<br /><br />ol,ul {<br /><br />list-style:none;<br /><br />}<br /><br />caption,th {<br /><br />text-align:left;<br /><br />}<br /><br />h1,h2,h3,h4,h5,h6 {<br /><br />font-size:100%;<br /><br />font-weight:normal;<br /><br />}<br /><br />q:before,q:after {<br /><br />content:”;<br /><br />}<br /><br />abbr,acronym {<br /><br />border:0;<br /><br />}<br /><br />pre{<br /><br />font-size: 1em ;<br /><br />}<br /><br />.article-content{<br /><br />_height: 1% ;<br /><br />overflow: hidden ;<br /><br />_overflow: none;<br /><br />}<br /><br />textarea{<br /><br />font-size: 12px;<br /><br />}<br /><br />a{<br /><br />color:#000000;<br /><br />text-decoration:none ;<br /><br />}<br /><br />a:hover{<br /><br />text-decoration:none ;<br /><br />}<br /><br />/* —————————————————————————————————————————— 部落格前置設定 */<br /><br />body{<br /><br />font-size: 12px ;<br /><br />font-family: “Century Gothic” ;<br /><br />background: url(http://pic.pimg.tw/weilife/1399598020-3710604452.webp);<br /><br />overflow-x: hidden;<br /><br />min-width: 1100px;<br /><br />position: relative;<br /><br />}<br /><br />#container{<br /><br />width: 1100px;<br /><br />margin: 0 auto;<br /><br />}<br /><br />/* —————————————————————————————————————————— 部落格資訊 */<br /><br />#header{<br /><br />padding: 50px 0px 55px 0px;<br /><br />width: 910px;<br /><br />margin: 0 auto;<br /><br />}<br /><br />#banner:after{<br /><br />clear: both;<br /><br />}<br /><br />#banner h1{<br /><br />font-size: 30px;<br /><br />float: left;<br /><br />padding-right: 15px;<br /><br />}<br /><br />#banner h1:hover a{<br /><br />color: #e9546b;<br /><br />}<br /><br />#banner h2{<br /><br />color: #777;<br /><br />padding-top: 18px;<br /><br />}<br /><br />/*–其他服務連結區塊–*/<br /><br />#navigation{<br /><br />position: absolute;<br /><br />top: 108px;<br /><br />right: 50%;<br /><br />margin-right: -455px;<br /><br />}<br /><br />#navigation a{<br /><br />color: #777;<br /><br />}<br /><br />#navigation li{<br /><br />float: left;<br /><br />display: block;<br /><br />padding-right: 15px;<br /><br />}<br /><br />#navigation #link-album:before{<br /><br />content: “|”;<br /><br />padding-right: 10px;<br /><br />color: #777;<br /><br />}<br /><br />#navigation a:hover{<br /><br />color: #e9546b;<br /><br />}<br /><br />#banner .skiplink{display: none;}<br /><br />#blog-category{display: none;}<br /><br />/* —————————————————————————————————————————— 主要內文 */<br /><br />#main{}<br /><br />#content{}<br /><br />/*–公告區–*/<br /><br />#spotlight{<br /><br />width: 910px;<br /><br />margin: 0 auto;<br /><br />padding: 10px 10px 15px 10px;<br /><br />border-top: #aaa dotted 1px;<br /><br />}<br /><br />#spotlight h5{<br /><br />display: none;<br /><br />}<br /><br />#spotlight-text{<br /><br />color: #777;<br /><br />line-height: 200%;<br /><br />}<br /><br />/*–所有文章區塊–*/<br /><br />#article-area{<br /><br />width: 930px;<br /><br />padding: 35px;<br /><br />margin: 0 auto;<br /><br />overflow : auto;<br /><br />background: #ffffff;<br /><br />border-radius: 10px;<br /><br />-moz-border-radius: 10px;<br /><br />-webkit-border-radius: 10px;<br /><br />box-shadow: 2px 2px 6px -2px rgba(20%,20%,40%,0.7);<br /><br />}<br /><br />#article-box{<br /><br />overflow : auto;<br /><br />}<br /><br />/*–單篇文章設定–*/<br /><br />.article{<br /><br />position: relative;<br /><br />float: left;<br /><br />margin: 10px;<br /><br />}<br /><br />.article-content{<br /><br />color: #777;<br /><br />line-height: 220%;<br /><br />}<br /><br />.article-content a{<br /><br />color: #e9546b;<br /><br />}<br /><br />.article-content a:hover{<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />position: relative;<br /><br />}<br /><br />.title h2{<br /><br />line-height: 150%;<br /><br />}<br /><br />.article .more a{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />z-index: 4;<br /><br />width: 100%;<br /><br />height: 100%;<br /><br />display: block;<br /><br />font-size: 0px;<br /><br />position: absolute;<br /><br />}<br /><br />.publish:before{<br /><br />content: “✎ “;<br /><br />font-size: 14px;<br /><br />}<br /><br />.publish{<br /><br />font-weight: bold;<br /><br />}<br /><br />.month:after{<br /><br />content: “. “;<br /><br />font-weight: normal;<br /><br />}<br /><br />.year:after{<br /><br />content: “. “;<br /><br />font-weight: normal;<br /><br />}<br /><br />.date:after{<br /><br />content: “. “;<br /><br />font-weight: normal;<br /><br />}<br /><br />.day{display: none;}<br /><br />.time{display: none;}<br /><br />.article-keyword{display: none;}<br /><br />.bookmark{display: none;}<br /><br />.author{display:none;}<br /><br />.article-footer{display: none;}<br /><br />.page{<br /><br />margin: 10px;<br /><br />text-align: center;<br /><br />padding-top: 20px;<br /><br />border-top: dotted #bbb 1px;<br /><br />}<br /><br />.page span{<br /><br />color: #999;<br /><br />padding: 5px;<br /><br />}<br /><br />.page a{<br /><br />color: #000;<br /><br />padding: 5px;<br /><br />}<br /><br />/*–第一篇文章–*/<br /><br />.article:nth-child(-n+1){<br /><br />width: 285px;<br /><br />height: 400px;<br /><br />overflow: hidden;<br /><br />margin-bottom: 15px;<br /><br />padding: 5px 0px 20px 615px;<br /><br />border-bottom: #bbb dotted 1px;<br /><br />}<br /><br />.article:nth-child(-n+1) .title h2:before{<br /><br />content: “► “;<br /><br />font-size: 16px;<br /><br />}<br /><br />.article:nth-child(-n+1) .title h2{<br /><br />font-size: 18px;<br /><br />font-weight: bold;<br /><br />padding-right: 10px;<br /><br />padding-bottom: 20px;<br /><br />}<br /><br />.article:nth-child(-n+1) .article-content{<br /><br />padding-right: 10px;<br /><br />overflow: hidden;<br /><br />}<br /><br />#blog-main .article:nth-child(-n+1) .article-content img{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />height: auto;<br /><br />width: 600px !important;<br /><br />display: block;<br /><br />position: absolute;<br /><br />clip:rect(0px,600px,400px,0px);<br /><br />}<br /><br />#category-main .article:nth-child(-n+1) .article-content img{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />height: auto;<br /><br />width: 600px !important;<br /><br />display: block;<br /><br />position: absolute;<br /><br />clip:rect(0px,600px,400px,0px);<br /><br />}<br /><br />.article:nth-child(-n+1) .publish{<br /><br />right: 10px;<br /><br />bottom: 30px;<br /><br />position: absolute;<br /><br />}<br /><br />/*–第三篇文章之後–*/<br /><br />.article:nth-child(n+2){<br /><br />width: 290px;<br /><br />height: 350px;<br /><br />overflow: hidden;<br /><br />background: #eaeaea;<br /><br />}<br /><br />.article:nth-child(n+2) .title h2:before{<br /><br />content: “♥ “;<br /><br />font-size: 14px;<br /><br />}<br /><br />.article:nth-child(n+2) .title h2{<br /><br />left: 15px;<br /><br />top: 300px;<br /><br />width: 260px;<br /><br />position: absolute;<br /><br />}<br /><br />.article:nth-child(n+2) .article-content{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />height: 260px;<br /><br />padding: 15px;<br /><br />overflow: hidden;<br /><br />position: relative;<br /><br />}<br /><br />#blog-main .article:nth-child(n+2) .article-content img{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />z-index: 3;<br /><br />width: auto;<br /><br />height: 290px !important;<br /><br />display: block;<br /><br />position: absolute;<br /><br />opacity: 1;<br /><br />transition: opacity 0.5s ease-out;<br /><br />-o-transition: opacity 0.5s ease-out;<br /><br />-moz-transition: opacity 0.5s ease-out;<br /><br />-webkit-transition: opacity 0.5s ease-out;<br /><br />}<br /><br />#category-main .article:nth-child(n+2) .article-content img{<br /><br />top: 0px;<br /><br />left: 0px;<br /><br />z-index: 3;<br /><br />width: auto;<br /><br />height: 290px !important;<br /><br />display: block;<br /><br />position: absolute;<br /><br />opacity: 1;<br /><br />transition: opacity 0.5s ease-out;<br /><br />-o-transition: opacity 0.5s ease-out;<br /><br />-moz-transition: opacity 0.5s ease-out;<br /><br />-webkit-transition: opacity 0.5s ease-out;<br /><br />}<br /><br />#blog-main .article:nth-child(n+2):hover .article-content img{<br /><br />opacity: 0.1;<br /><br />}<br /><br />#category-main .article:nth-child(n+2):hover .article-content img{<br /><br />opacity: 0.1;<br /><br />}<br /><br />.article:nth-child(n+2) .publish{<br /><br />z-index: 2;<br /><br />width: 260px;<br /><br />left: 15px;<br /><br />bottom: 60px;<br /><br />position: absolute;<br /><br />padding: 15px 0px 0px 0px;<br /><br />border-top: #aaa dotted 1px;<br /><br />background: #eaeaea;<br /><br />}<br /><br />/* —————————————————————————————————————————— 文章區塊 */<br /><br />#article-main #article-area{<br /><br />width: 910px;<br /><br />padding: 45px;<br /><br />}<br /><br />#article-main .article{<br /><br />width: 910px;<br /><br />float: none;<br /><br />margin: 0px;<br /><br />height: auto;<br /><br />padding: 0px;<br /><br />overflow: hidden;<br /><br />padding-bottom: 80px;<br /><br />border-bottom: none;<br /><br />}<br /><br />#article-main .article:hover{<br /><br />background: none;<br /><br />}<br /><br />#article-main .article-head{<br /><br />padding-bottom: 10px;<br /><br />}<br /><br />#article-main .article-content p{<br /><br />line-height: 200%;<br /><br />padding: 3px 0px;<br /><br />}<br /><br />#article-main .article .publish:before{<br /><br />content: “► “;<br /><br />font-size: 16px;<br /><br />}<br /><br />#article-main .article .publish{<br /><br />font-size: 18px;<br /><br />position: static;<br /><br />padding-bottom: 5px;<br /><br />}<br /><br />#article-main .bookmark{<br /><br />display: block;<br /><br />position: absolute;<br /><br />right: -15px;<br /><br />top: 0px;<br /><br />}<br /><br />#article-main .article-keyword{<br /><br />display: block;<br /><br />}<br /><br />#article-main .author{<br /><br />display: block;<br /><br />padding: 0px 0px 5px 15px;<br /><br />background: url(http://pic.pimg.tw/weilife/1367737100-513451795.png) left 2px no-repeat;<br /><br />}<br /><br />#article-main .article-footer{<br /><br />display: block;<br /><br />padding-top: 20px;<br /><br />border-top: dotted #aaa 1px;<br /><br />}<br /><br />#article-main .refer{<br /><br />display: block;<br /><br />}<br /><br />#article-main .refer li{<br /><br />height: 30px !important;<br /><br />padding: 0px 0px 2px 15px;<br /><br />background: url(http://pic.pimg.tw/weilife/1367737100-513451795.png) left 2px no-repeat;<br /><br />}<br /><br />#article-main .history{<br /><br />display: block;<br /><br />padding: 0px 0px 5px 15px;<br /><br />background: url(http://pic.pimg.tw/weilife/1367737100-513451795.png) left 2px no-repeat;<br /><br />}<br /><br />#article-main .back-to-top{<br /><br />display: block;<br /><br />padding: 0px 0px 5px 15px;<br /><br />background: url(http://pic.pimg.tw/weilife/1367737100-513451795.png) left 2px no-repeat;<br /><br />}<br /><br />#pixblogad{display:none;}<br /><br />/* —————————————————————————————————————————— 側欄 */<br /><br />#links a:hover{<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />position: relative;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄1 */<br /><br />#links-row-1{<br /><br />position: absolute;<br /><br />top: 40px;<br /><br />left: -250px;<br /><br />background: #ffffff;<br /><br />width: 280px;<br /><br />transition: left 0.5s ease-out;<br /><br />-webkit-transition: left 0.5s ease-out;<br /><br />-moz-transition: left 0.5s ease-out;<br /><br />-o-transition: left 0.5s ease-out;<br /><br />z-index: 11;<br /><br />box-shadow: 1px 1px 6px -2px rgba(20%,20%,40%,0.7);<br /><br />-webkit-border-bottom-right-radius: 10px;<br /><br />-moz-border-bottom-right-radius: 10px;<br /><br />border-bottom-right-radius: 10px;<br /><br />}<br /><br />#links-row-1:hover{<br /><br />left: 0px;<br /><br />}<br /><br />#links-row-1 a{<br /><br />color: #e9546b;<br /><br />}<br /><br />#links-row-1 .box{<br /><br />padding-bottom: 40px;<br /><br />padding-right: 30px;<br /><br />}<br /><br />#links-row-1 .box-title{<br /><br />padding: 10px 0px 10px 10px;<br /><br />font-weight: bold;<br /><br />border-left: 10px solid #e9546b;<br /><br />border-bottom: 1px solid #e9546b;<br /><br />}<br /><br />#links-row-1 .box-text{<br /><br />padding: 15px 0px 0px 15px;<br /><br />}<br /><br />#links-row-1 .box:first-child{<br /><br />background: url(http://pic.pimg.tw/weilife/1402317219-2254195646.png) top right no-repeat;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄2 */<br /><br />#links-row-2{<br /><br />left: 50%;<br /><br />top: 140px;<br /><br />position: absolute;<br /><br />margin-left: -455px;<br /><br />z-index: 5;<br /><br />width: 910px;<br /><br />}<br /><br />#links-row-2 a{<br /><br />color: #ffffff;<br /><br />}<br /><br />#links-row-2 .box{<br /><br />display: inline-block;<br /><br />}<br /><br />#links-row-2 .box .box-title{<br /><br />padding: 0px 20px 20px 0px;<br /><br />}<br /><br />#links-row-2 .box:hover .box-title{<br /><br />color: #e9546b;<br /><br />}<br /><br />#links-row-2 .box .box-title img{display: none;}<br /><br />#links-row-2 .box .box-text{<br /><br />display: none;<br /><br />padding: 20px;<br /><br />min-width: 200px;<br /><br />position: absolute;<br /><br />background: #f09199;<br /><br />border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />-webkit-border-radius: 5px;<br /><br />color: #e60033;<br /><br />}<br /><br />#links-row-2 .box:hover .box-text{<br /><br />display: block;<br /><br />}<br /><br />#links-row-2 .box li{<br /><br />padding: 3px;<br /><br />display: block;<br /><br />}<br /><br />/* —————————————————————————————————————————— 側欄元件定義 */<br /><br />/*–搜尋–*/<br /><br />#search li{<br /><br />background: none !important;<br /><br />padding: 5px !important;<br /><br />border: 0px !important;<br /><br />}<br /><br />#search-target{<br /><br />width: 100%;<br /><br />border: 0px;<br /><br />background: transparent;<br /><br />border: #e60033 1px solid;<br /><br />}<br /><br />#search-submit{<br /><br />width: 100%;<br /><br />text-align: center;<br /><br />border: 0px;<br /><br />background: transparent;<br /><br />color: #e60033;<br /><br />}<br /><br />/*-日曆-*/<br /><br />#calendar .box-title{}<br /><br />#calendar .box-text {}<br /><br />#calendar{}<br /><br />#calendar table{<br /><br />width:100%;<br /><br />}<br /><br />#calendar th,<br /><br />#calendar td{<br /><br />text-align:center;<br /><br />padding:1px;<br /><br />}<br /><br />#calendar td a{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background:#f09199;<br /><br />color: #ffffff;<br /><br />display:block;<br /><br />}<br /><br />/*–文章彙整–*/<br /><br />#archive {}<br /><br />#archive .box-title{}<br /><br />#archive .box-text{}<br /><br />#archive .box-text select{}<br /><br />#archive .box-more{<br /><br />padding: 10px 7px 7px 22px;<br /><br />background: url(http://pic.pimg.tw/weilife/1384069895-3008229311.png) left 10px no-repeat;<br /><br />}<br /><br />/*-個人資訊-*/<br /><br />#user-info .box-title{}<br /><br />#user-info .box-text {}<br /><br />#user-info{}<br /><br />#user-info dt{}<br /><br />#user-info dl dd {}<br /><br />#user-info .user-img {<br /><br />margin-bottom:5px;<br /><br />width: 95px;<br /><br />}<br /><br />#user-info .user-img img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />padding:0px;<br /><br />border:0px;<br /><br />margin-bottom:5px;<br /><br />}<br /><br />/*-訪客列表-*/<br /><br />#visitor{}<br /><br />#visitor .box-text{}<br /><br />#visitor .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#visitor .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />}<br /><br />#visitor .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />}<br /><br />/*-我去誰家-*/<br /><br />#crumb{}<br /><br />#crumb .box-text{}<br /><br />#crumb .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#crumb .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />}<br /><br />#crumb .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />}<br /><br />/*-好友列表-*/<br /><br />#friendbox{}<br /><br />#friendbox.box-text{}<br /><br />#friendbox .box-text ul:after {<br /><br />content: ” “;<br /><br />display: block;<br /><br />height: 0px;<br /><br />clear: both;<br /><br />overflow: hidden;<br /><br />}<br /><br />#friendbox .box-text li {<br /><br />float: left;<br /><br />padding:5px;<br /><br />background: none;<br /><br />}<br /><br />#friendbox .box-text img{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />width: 40px;<br /><br />height: 40px;<br /><br />border: 0px;<br /><br />}<br /><br />#friendbox .box-text a{<br /><br />border: 0px;<br /><br />}<br /><br />/*文章分類*/<br /><br />#category h6{<br /><br />padding: 6px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />#category li{<br /><br />padding: 5px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />/*近期文章*/<br /><br />#recent-article li{<br /><br />padding: 5px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />/*熱門文章*/<br /><br />#hot-article li{<br /><br />padding: 5px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />/*最新回響*/<br /><br />#latest-comment li{<br /><br />padding: 5px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />/*我的連結*/<br /><br />#mylink li{<br /><br />padding: 5px 0;<br /><br />border-bottom: 1px dotted #e9546b;<br /><br />}<br /><br />/* —————————————————————————————————————————— 分類/列表模式 */<br /><br />.article-area-title:before{<br /><br />content: “► “;<br /><br />font-size: 10px;<br /><br />}<br /><br />.article-area-title{<br /><br />margin: 10px 10px 0px 10px;<br /><br />padding: 0px 0px 10px 0px;<br /><br />border-bottom: #bbb dotted 1px;<br /><br />}<br /><br />#view-mode{<br /><br />top: -30px;<br /><br />right: 10px;<br /><br />position: relative;<br /><br />text-align: right;<br /><br />}<br /><br />#view-mode a{<br /><br />color: #e9546b;<br /><br />padding-right: 5px;<br /><br />}<br /><br />#view-mode a:hover{<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />position: relative;<br /><br />}<br /><br />#display:before{<br /><br />content: “► “;<br /><br />font-size: 10px;<br /><br />}<br /><br />/*–table————————————————-*/<br /><br />.main-list{<br /><br />margin: 10px;<br /><br />}<br /><br />.main-list table{<br /><br />width: 100%;<br /><br />line-height: 250%;<br /><br />}<br /><br />.main-list table tr{<br /><br />border-bottom: #bbb dotted 1px;<br /><br />transition: background 0.5s ease-out;<br /><br />-o-transition: background 0.5s ease-out;<br /><br />-moz-transition: background 0.5s ease-out;<br /><br />-webkit-transition: background 0.5s ease-out;<br /><br />}<br /><br />.main-list table tr:hover{<br /><br />background: #eee;<br /><br />}<br /><br />.main-list table .list-date{<br /><br />padding-left: 5px;<br /><br />width: 13%;<br /><br />}<br /><br />.main-list table .list-title{<br /><br />width: 73%;<br /><br />}<br /><br />.main-list table .list-visit{<br /><br />width: 7%;<br /><br />text-align: center;<br /><br />}<br /><br />.main-list table .list-comment{<br /><br />width: 7%;<br /><br />text-align: center;<br /><br />}<br /><br />/* —————————————————————————————————————————— 留言區塊 */<br /><br />/*–引用–*/<br /><br />#trackback-box{<br /><br />display: block;<br /><br />width: 1000px;<br /><br />height: 10px;<br /><br />position: relative;<br /><br />left: -45px;<br /><br />background: #000;<br /><br />}<br /><br />#trackback-box h3{display: none;}<br /><br />#trackback-url{display: none;}<br /><br />#trackback-text{display: none;}<br /><br />#comment-box{<br /><br />padding-top: 80px;<br /><br />}<br /><br />#comment-box h3:before{<br /><br />content: “”;<br /><br />}<br /><br />#comment-box h3{<br /><br />margin: 0px;<br /><br />padding: 10px 0px;<br /><br />}<br /><br />.post-comment{<br /><br />padding: 10px 0px;<br /><br />border-bottom: #bbb dotted 1px;<br /><br />}<br /><br />.post-comment a:before{<br /><br />content: “► “;<br /><br />font-size: 10px;<br /><br />}<br /><br />.post-comment:hover a{<br /><br />color: #e9546b;<br /><br />}<br /><br />/*–單一留言–*/<br /><br />/*–單一引用+單一回應–*/<br /><br />.single-post{<br /><br />padding: 20px;<br /><br />min-height: 55px;<br /><br />-webkit-transition: background 0.5s ease-out;<br /><br />-moz-transition: background 0.5s ease-out;<br /><br />-o-transition: background 0.5s ease-out;<br /><br />transition: background 0.5s ease-out;<br /><br />border-bottom: dotted #aaa 1px;<br /><br />position: relative;<br /><br />}<br /><br />.single-post:hover{<br /><br />background: #efefef;<br /><br />}<br /><br />.secret{<br /><br />min-height: 0px;<br /><br />}<br /><br />.secret li:before{<br /><br />content: “- “;<br /><br />padding-right: 5px;<br /><br />}<br /><br />.secret li:after{<br /><br />content: “- “;<br /><br />padding-left: 5px;<br /><br />}<br /><br />.secret li{<br /><br />padding: 0px;<br /><br />}<br /><br />.post-info{<br /><br />font-weight: bold;<br /><br />height: 20px;<br /><br />}<br /><br />.post-info a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />.post-info .floor{<br /><br />display: block;<br /><br />width: 50px;<br /><br />position: absolute;<br /><br />top: 65px;<br /><br />right: 10px;<br /><br />text-align: center;<br /><br />font-size: 14px;<br /><br />font-weight: normal;<br /><br />}<br /><br />.post-photo{<br /><br />text-align: right;<br /><br />position: absolute;<br /><br />top: 10px;<br /><br />right: 10px;<br /><br />}<br /><br />.post-photo img{<br /><br />width: 50px;<br /><br />height: 50px;<br /><br />border-radius: 50%;<br /><br />}<br /><br />.post-text{<br /><br />padding: 0px 80px 10px 0px;<br /><br />line-height: 150%;<br /><br />}<br /><br />.reply-text{<br /><br />color: #888;<br /><br />padding: 0px 80px 0px 10px;<br /><br />line-height: 150%;<br /><br />border-left: #888 solid 5px;<br /><br />}<br /><br />.reply-text p{<br /><br />padding-top: 10px;<br /><br />padding-bottom: 2px;<br /><br />}<br /><br />.reply-text a{<br /><br />color: #888;<br /><br />}<br /><br />.reply-text a:hover{<br /><br />position: relative;<br /><br />top: 1px;<br /><br />left: 1px;<br /><br />}<br /><br />/*——————–icon————–*/<br /><br />.post-info .user-name a{<br /><br />margin: 0 5px 0px 0px;<br /><br />}<br /><br />.post-info .user-name img{<br /><br />display: none;<br /><br />}<br /><br />.post-info .homepage{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat;<br /><br />}<br /><br />.post-info .homepage img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.post-info .hide-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat;<br /><br />}<br /><br />.post-info .hide-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.post-info .show-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat;<br /><br />}<br /><br />.post-info .show-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.post-info .delete-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat;<br /><br />}<br /><br />.post-info .delete-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.post-info .spam-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat;<br /><br />}<br /><br />.post-info .spam-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.post-info .reply-message{<br /><br />background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat;<br /><br />}<br /><br />.post-info .reply-message img{<br /><br />filter:alpha(opacity=0);<br /><br />-moz-opacity:0;<br /><br />opacity: 0;<br /><br />}<br /><br />.reply-text .comment-icon{<br /><br />display: none;<br /><br />}<br /><br />/* —————————————————————留言撰寫 —————————————————————*/<br /><br />#container #main #content #user-post #comment-box #comment-area {<br /><br />width: 910px;<br /><br />padding: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area-2 {<br /><br />width: 870px;<br /><br />background: #eaeaea;<br /><br />padding: 20px;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area iframe{<br /><br />position: absolute ;<br /><br />top:20px;<br /><br />right: 20px;<br /><br />float:right;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-identity{<br /><br />width: 870px;<br /><br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />padding-bottom: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .identity-login img.photo{<br /><br />border: 0px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-body{<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box input.comment-name{<br /><br />background: #F2F2F2;<br /><br />width: 860px;<br /><br />border: 0px;<br /><br />padding: 5px;<br /><br />margin: 0px;<br /><br />margin-bottom: 10px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-textarea{<br /><br />background: #f5f5f5;<br /><br />width: 870px;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />padding-bottom: 2px;<br /><br />margin: 0px;<br /><br />margin-bottom: 5px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-textarea textarea{<br /><br />background: #f5f5f5;<br /><br />width: 860px;<br /><br />padding: 5px;<br /><br />margin-bottom:5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha{<br /><br />background: #f5f5f5;<br /><br />width: 870px;<br /><br />border: 0px;<br /><br />padding: 0px;<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha div{<br /><br />position: absolute;<br /><br />top:5px;<br /><br />left: 210px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .captcha input{<br /><br />width: 510px;<br /><br />height: 25px;<br /><br />border: 0px;<br /><br />position: absolute;<br /><br />top:0px;<br /><br />left: 120px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box a.reload-captcha{<br /><br />position: absolute;<br /><br />top:22px;<br /><br />left:0px;<br /><br />background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box a.reload-captcha:hover{<br /><br />position: absolute;<br /><br />top:22px;<br /><br />left:0px;<br /><br />background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px;<br /><br />color: #000000<br /><br />}<br /><br />#container #main #content #user-post #comment-box .comment-extra{<br /><br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left;<br /><br />margin: 0px;<br /><br />margin-top: 10px;<br /><br />padding: 0px;<br /><br />padding-top: 10px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box #comment-area button{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background: #f5f5f5;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .extra{<br /><br />-webkit-border-radius: 5px;<br /><br />-moz-border-radius: 5px;<br /><br />border-radius: 5px;<br /><br />background: #f5f5f5;<br /><br />padding: 0px;<br /><br />padding-top: 5px;<br /><br />padding-bottom: 5px;<br /><br />margin: 0px;<br /><br />margin-top: 10px;<br /><br />border: 0px;<br /><br />}<br /><br />#container #main #content #user-post #comment-box .extra input {<br /><br />width: 400px;<br /><br />background: #f5f5f5;<br /><br />border: 0px;<br /><br />}<br /><br />/* —————————————————————————————————————————— 頁尾 */<br /><br />#footer{<br /><br />clear: both;<br /><br />margin: 0 auto;<br /><br />padding-top: 50px;<br /><br />text-align: center;<br /><br />}<br /><br />#footer p{<br /><br />text-align: center;<br /><br />padding: 5px 0px 5px 0px;<br /><br />}<br /><br />#footer #bottom:before{<br /><br />padding: 10px 0px;<br /><br />display: block;<br /><br />text-align: center;<br /><br />content: “Copyright © CSS designed by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog”;<br /><br />}<br /><br />#footer #bottom{<br /><br />text-align: center;<br /><br />padding-bottom: 50px;<br /><br />}<br /><br />

版面設定

1 – 關於側欄1的元件，放置在版面左方的隱藏式欄位裡

2 – 關於側欄2的元件，放置在文章上方的下拉式選單

3 – 可至後台 > 基本/進階設定 > 文章顯示相關設定 > 每頁顯示文章數，調成3的倍數加1

4 – 若文章內文圖片寬度超過900px，會自動將圖片縮放成寬度900px

5 – 撰寫完章時，請插入”繼續閱讀”，繼續閱讀前的最後一張照片為文章的代表圖示，建議繼續閱讀前放入一張照片即可

6 – 承5，該張照片長高最佳比例為3:2的照片，若為其他比例在首頁顯示時會被裁切。

Q&A

*   如果上述沒有你的問題，可參考另一篇 Q&A問答集

更新

2014/07/10  解決首頁會出現水平捲軸的問題

2014/07/21  解決痞客邦快捷功能BAR小改版導致版面錯位

2014/12/16  解決滑鼠移至圖會縮放的問題

2015/12/14  配合痞客新版後台，更改每篇文章代表圖示顯示方式、解決在手機上版面位移的問題