痞客邦PIXNET部落格佈景版面樣式CSS – 格子

為慶祝粉絲團人數破千，分享一款新的樣式。首頁部落格採三欄式，一、二欄為文章內容，第三欄為側欄元件，採用格子狀來呈現，很喜歡這樣的設計風格，簡單耐看！不限定圖文集部落格使用，純文字部落格也可以使用。另一個側欄採用下拉式選單，可節省版面空間並簡化版面，可搭下拉式文章分類做使用。另此版面提供另一款特別款，在部落格標題背景處置入橫幅，可自行更換照片。

‌

首頁

文章內頁

‌

使用規訂

‌

CSS語法

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

這個版本另外有個特別版，特別版的部落格標題的背景有橫幅，可自行替換照片，如下↓

/*<br />CSS desinged by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog<br />*/<br />/* —————————————————————————————————————————— 清空 */<br />#comment-form table{<br />margin: 0 auto ;<br />}<br />#comment-form td , #comment-form th{<br />border: 0px solid #000 ;<br />padding: 0px 0px;<br />}<br />#comment-form input#send-comment{<br />padding: 0px 0px ;<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 />margin:0;<br />padding:0;<br />}<br />table {<br />border-collapse:collapse;<br />border-spacing:0;<br />}<br />fieldset,img {<br />border:0;<br />}<br />address,caption,cite,code,dfn,em,th,var {<br />font-style:normal;<br />font-weight:normal;<br />}<br />ol,ul {<br />list-style:none;<br />}<br />caption,th {<br />text-align:left;<br />}<br />h1,h2,h3,h4,h5,h6 {<br />font-size:100%;<br />font-weight:normal;<br />}<br />q:before,q:after {<br />content:”;<br />}<br />abbr,acronym {<br />border:0;<br />}<br />pre{<br />font-size: 1em ;<br />}<br />.article-content{<br />_height: 1% ;<br />overflow: hidden ;<br />_overflow: none;<br />}<br />a{<br />color:#000000;<br />text-decoration:none ;<br />}<br />a:hover{<br />text-decoration:none ;<br />}<br />textarea{<br />font-size: 12px;<br />}<br />.main-container{padding-top: 0px !important;}<br />.navbar{display:none !important;}<br />.pix-related-post{display:none !important;}<br />/* —————————————————————————————————————————— 部落格前置設定 */<br />body{<br />font-size: 11pt ;<br />font-family:”Times New Roman”, “新細明體” ;<br />min-width: 1050px;<br />}<br />#container{<br />width: 1000px;<br />margin: 0px auto;<br />position: relative;<br />}<br />#container2{}<br />/* —————————————————————————————————————————— header */<br />#header{<br />text-align: center;<br />margin: 80px 0px 150px 0px;<br />}<br />#header h1 a{<br />font-size: 40pt;<br />font-weight: bold;<br />letter-spacing: 1px;<br />}<br />#header h2{<br />letter-spacing: 1px;<br />}<br />.skiplink{display: none;}<br />#blog-category{display: none;}<br />#navigation{display: none;}<br />/* —————————————————————————————————————————— 下拉選單 */<br />#links-row-2{<br />position: absolute;<br />top: 130px;<br />left: 0px;<br />width: 100%;<br />text-align: center;<br />border-top: 1px #000 solid;<br />border-bottom: 1px #000 solid;<br />}<br />#links-row-2 .box{<br />display: inline-block;<br />vertical-align: top;<br />}<br />#links-row-2 .box-title{<br />letter-spacing: 1px;<br />padding: 15px 15px;<br />border-left: 1px #ffffff solid;<br />}<br />#links-row-2 .box:hover .box-title{<br />border-left: 1px #000 solid;<br />}<br />#links-row-2 .box-title img{display: none;}<br />#links-row-2 .box-text{display: none;}<br />#links-row-2 .box:hover .box-text{<br />display: block;<br />position: absolute;<br />background: #ffffff;<br />padding: 15px;<br />border-top: 1px #000 solid;<br />border-left: 1px #000 solid;<br />text-align: left;<br />line-height: 200%;<br />}<br />/* —————————————————————————————————————————— 文章區塊 */<br />#content{<br />width: 700px;<br />float: left;<br />}<br />.article-head .time{display: none;}<br />.article-head .day{display: none;}<br />/* —————————————————————————————————————————— spotlight */<br />#spotlight{<br />line-height: 200%;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#spotlight h5{<br />font-weight: bold;<br />}<br />#spotlight-text{<br />color: #999;<br />border-bottom: 1px #000 solid;<br />}<br />/* —————————————————————————————————————————— blog-main */<br />#blog-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#blog-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) top left repeat-y;<br />}<br />#blog-main #article-box{<br />border-bottom: 1px #000 solid;<br />}<br />#blog-main .article{<br />position: relative;<br />display: inline-block;<br />vertical-align: top;<br />width: 310px;<br />margin: -2px;<br />padding: 25px 27px 25px 0px;<br />}<br />#blog-main .article:nth-child(2n){<br />padding: 25px 26px 25px 27px;<br />}<br />#blog-main .article:nth-child(n+3){<br />border-top: 1px #000 solid;<br />}<br />#blog-main .article-head{<br />text-align: center;<br />line-height: 150%;<br />padding-bottom: 10px;<br />}<br />#blog-main .article-head .publish{<br />color: #aaa;<br />letter-spacing: 1px;<br />}<br />#blog-main .article-head .title a{<br />font-weight: bold;<br />}<br />#blog-main .article-content{<br />max-height: 350px;<br />overflow: hidden;<br />line-height: 150%;<br />color: #999;<br />}<br />#blog-main .author{display: none;}<br />#blog-main .more a{<br />position: absolute;<br />display: block;<br />top: 0px;<br />left: 0px;<br />width: 100%;<br />height: 100%;<br />font-size: 0px;<br />}<br />#blog-main .article-content img{<br />width: 100%;<br />padding-bottom: 10px;<br />}<br />#blog-main .article-footer{display: none;}<br />.page{<br />padding: 50px 0px 50px 0px;<br />text-align: center;<br />}<br />.page a{<br />display: inline-block;<br />padding: 2px 5px;<br />color: #999;<br />}<br />.page a:hover{<br />color: #000;<br />}<br />.page span{<br />display: inline-block;<br />padding: 2px 5px;<br />border: 1px #000 solid;<br />}<br />/* —————————————————————————————————————————— category-main */<br />#category-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#category-main #article-area{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) top left repeat-y;<br />}<br />.article-area-title{<br />text-align: center;<br />padding: 20px 0px;<br />font-weight: bold;<br />font-size: 15pt;<br />width: 699px;<br />background: #ffffff;<br />border-bottom: 1px #000 solid;<br />}<br />#view-mode{display: none;}<br />#category-main #article-box{<br />border-bottom: 1px #000 solid;<br />}<br />#category-main .article{<br />position: relative;<br />display: inline-block;<br />vertical-align: top;<br />width: 310px;<br />margin: -2px;<br />padding: 25px 27px 25px 0px;<br />}<br />#category-main .article:nth-child(2n){<br />padding: 25px 26px 25px 27px;<br />}<br />#category-main .article:nth-child(n+5){<br />border-top: 1px #000 solid;<br />}<br />#category-main .article-head{<br />text-align: center;<br />line-height: 150%;<br />padding-bottom: 10px;<br />}<br />#category-main .article-head .publish{<br />color: #aaa;<br />letter-spacing: 1px;<br />}<br />#category-main .article-head .title a{<br />font-weight: bold;<br />}<br />#category-main .article-content{<br />max-height: 350px;<br />overflow: hidden;<br />line-height: 150%;<br />color: #999;<br />}<br />#category-main .author{display: none;}<br />#category-main .more a{<br />position: absolute;<br />display: block;<br />top: 0px;<br />left: 0px;<br />width: 100%;<br />height: 100%;<br />font-size: 0px;<br />}<br />#category-main .article-content img{<br />width: 100%;<br />padding-bottom: 10px;<br />}<br />#category-main .article-footer{display: none;}<br />.main-list{<br />line-height: 200%;<br />width: 680px;<br />background: #ffffff;<br />}<br />.main-list table{<br />width: 100%;<br />}<br />.main-list table tr{<br />border-bottom: 1px #ddd solid;<br />}<br />.main-list table tr:hover{<br />background: #f4f4f4;<br />}<br />.main-list table td{<br />padding: 5px;<br />}<br />.main-list table th{<br />padding: 5px;<br />}<br />/* —————————————————————————————————————————— article-main */<br />#article-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#article-main .article{<br />padding: 0px 25px 20px 0px;<br />line-height: 200%;<br />border-bottom: 1px #000 solid;<br />}<br />#article-main .article-head{<br />text-align: center;<br />}<br />#article-main .article-head .publish{<br />color: #999;<br />}<br />#article-main .article-head .title a{<br />font-size: 15pt;<br />font-weight: bold;<br />}<br />#article-main .article-content img{<br />max-width: 100%;<br />}<br />.bookmark{<br />padding: 10px 0px 20px 0px;<br />text-align: center;<br />}<br />#article-main .article-footer{<br />color: #999;<br />line-height: 170%;<br />}<br />#article-main .article-footer a{<br />color: #999;<br />}<br />#article-main .article-footer a:hover{<br />color: #000;<br />}<br />/* —————————————————————————————————————————— links*/<br />#links{<br />float: right;<br />width: 300px;<br />}<br />#links-row-1 .box{<br />border-bottom: 1px #000 solid;<br />padding: 20px 0px 20px 25px;<br />}<br />#links-row-1 .box-title{<br />font-weight: bold;<br />text-align: center;<br />padding-bottom: 10px;<br />}<br />#links .box-text{<br />color: #999;<br />line-height: 170%;<br />}<br />#links .box-text a{<br />color: #999;<br />}<br />#links .box-text a:hover{<br />color: #000;<br />}<br />#links .box-text li{<br />position: relative;<br />padding-left: 15px;<br />}<br />#links .box-text li:before{<br />content: “•”;<br />position: absolute;<br />top: 3px;<br />left: 0px;<br />}<br />#links-row-1:after{<br />display: block;<br />line-height: 200%;<br />letter-spacing: 1px;<br />padding: 20px 0px 0px 25px;<br />color: #999;<br />content: “© Blog designed by Dribs & Drabs, https://www.dribs-drabs.com/blog.”;<br />}<br />#links:after{<br />display: block;<br />line-height: 200%;<br />letter-spacing: 1px;<br />padding: 0px 0px 20px 25px;<br />border-bottom: 1px #000 solid;<br />color: #999;<br />content: “© Support by courtesy of Pixnet.”;<br />}<br />/*crumb 我去誰家————————–*/<br />#crumb li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#crumb li:before{<br />content: “” !important;<br />}<br />/*visitor————————–*/<br />#visitor li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#visitor li:before{<br />content: “” !important;<br />}<br />/*friendbox————————–*/<br />#friendbox li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#friendbox li:before{<br />content: “” !important;<br />}<br />/*category————————–*/<br />#category .inner-box h6{<br />color: #000;<br />border-bottom: 1px #ddd solid;<br />}<br />#category .inner-box ul{<br />padding-bottom: 10px;<br />}<br />/*search————————–*/<br />#search li{<br />display: inline-block;<br />}<br />#search li:before{<br />content: “” !important;<br />}<br />#search-submit{<br />background: transparent;<br />border: 0px;<br />}<br />/* —————————————————————————————————————————— footer */<br />#footer{<br />clear: both;<br />letter-spacing: 1px;<br />text-align: center;<br />margin-bottom: 50px;<br />padding: 15px 0px;<br />}<br />#footer #bottom{display: none;}<br />/* —————————————————————————————————————————— 留言撰寫 */<br />/*–引用–*/<br />#trackback-box{}<br />#trackback-box h3{display: none;}<br />#trackback-url{display: none;}<br />#trackback-text{display: none;}<br />#comment-box{<br />width: 699px;<br />padding: 10px 0px 0px 0px;<br />}<br />#comment-box h3{<br />text-align: center;<br />margin: 0px;<br />padding: 10px 0px;<br />}<br />.post-comment{<br />text-align: center;<br />padding: 10px 0px 10px 0px;<br />border-bottom: 1px solid #000;<br />}<br />.post-comment a{<br />color: #999;<br />}<br />/*–單一留言–*/<br />/*–單一引用+單一回應–*/<br />.single-post{<br />padding: 20px;<br />min-height: 55px;<br />-webkit-transition: background 0.5s ease-out;<br />-moz-transition: background 0.5s ease-out;<br />-o-transition: background 0.5s ease-out;<br />transition: background 0.5s ease-out;<br />border-bottom: 1px solid #000;<br />position: relative;<br />}<br />.single-post:hover{<br />background: #f4f4f4;<br />}<br />.secret{<br />min-height: 0px;<br />}<br />.secret li:before{<br />content: “- “;<br />padding-right: 5px;<br />}<br />.secret li:after{<br />content: “- “;<br />padding-left: 5px;<br />}<br />.secret li{<br />padding: 0px;<br />}<br />.post-info{<br />font-weight: bold;<br />height: 25px;<br />opacity: 0.5;<br />}<br />.post-info a:hover{<br />position: relative;<br />top: 1px;<br />left: 1px;<br />}<br />.post-info .floor{<br />display: block;<br />width: 70px;<br />position: absolute;<br />top: 95px;<br />right: 20px;<br />text-align: center;<br />font-size: 14px;<br />font-weight: normal;<br />}<br />.post-photo{<br />text-align: right;<br />position: absolute;<br />top: 20px;<br />right: 20px;<br />}<br />.post-photo img{<br />width: 70px;<br />height: 70px;<br />border-radius: 50%;<br />}<br />.post-text{<br />color: #999;<br />padding: 0px 100px 10px 0px;<br />line-height: 170%;<br />}<br />.reply-text{<br />color: #aaa;<br />padding: 0px 90px 0px 10px;<br />line-height: 170%;<br />border-left: #aaa solid 5px;<br />}<br />.reply-text p{<br />padding-top: 10px;<br />padding-bottom: 2px;<br />}<br />.reply-text a{<br />color: #888;<br />}<br />.reply-text a:hover{<br />position: relative;<br />top: 1px;<br />left: 1px;<br />}<br />/*——————–icon————–*/<br />.post-info .user-name a{<br />margin: 0 5px 0px 0px;<br />}<br />.post-info .user-name img{<br />display: none;<br />}<br />.post-info .homepage{<br />background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat;<br />}<br />.post-info .homepage img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .hide-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat;<br />}<br />.post-info .hide-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .show-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat;<br />}<br />.post-info .show-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .delete-message{<br />background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat;<br />}<br />.post-info .delete-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .spam-message{<br />background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat;<br />}<br />.post-info .spam-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .reply-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat;<br />}<br />.post-info .reply-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.reply-text .comment-icon{<br />display: none;<br />}<br />/* —————————————————————留言撰寫 —————————————————————*/<br />#container #main #content #user-post #comment-box #comment-area {<br />width: 700px;<br />padding: 0px;<br />border-radius: 0px !important;<br />border-bottom: 1px solid #000;<br />}<br />#container #main #content #user-post #comment-box #comment-area-2 {<br />width: 660px;<br />background: transparent;<br />padding: 20px;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box #comment-area iframe{<br />position: absolute ;<br />top: 20px;<br />right: 20px;<br />float:right;<br />width: 82px;<br />height: 28px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-identity{<br />width: 100%;<br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left;<br />border: 0px;<br />padding: 0px;<br />padding-bottom: 5px;<br />}<br />#container #main #content #user-post #comment-box .identity-login img.photo{<br />border: 0px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-body{<br />border: 0px;<br />padding: 0px;<br />}<br />#container #main #content #user-post #comment-box input.comment-name{<br />background: #F2F2F2;<br />width: 100%;<br />border: 0px;<br />padding: 5px;<br />margin: 0px;<br />margin-bottom: 10px;<br />}<br />#container #main #content #user-post #comment-box .comment-textarea{<br />background: #f5f5f5;<br />width: 100%;<br />border: 0px;<br />padding: 0px;<br />padding-bottom: 2px;<br />margin: 0px;<br />margin-bottom: 5px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-textarea textarea{<br />background: #f5f5f5;<br />width: 98%;<br />padding: 5px;<br />margin-bottom:5px;<br />}<br />#container #main #content #user-post #comment-box .captcha{<br />background: #f5f5f5;<br />width: 100%;<br />border: 0px;<br />padding: 0px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .captcha div{<br />position: absolute;<br />top:5px;<br />left: 210px;<br />}<br />#container #main #content #user-post #comment-box .captcha input{<br />width: 100%;<br />height: 25px;<br />border: 0px;<br />position: absolute;<br />top:0px;<br />left: 120px;<br />}<br />#container #main #content #user-post #comment-box a.reload-captcha{<br />position: absolute;<br />top:22px;<br />left:0px;<br />background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px;<br />}<br />#container #main #content #user-post #comment-box a.reload-captcha:hover{<br />position: absolute;<br />top:22px;<br />left:0px;<br />background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px;<br />color: #000000<br />}<br />#container #main #content #user-post #comment-box .comment-extra{<br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left;<br />margin: 0px;<br />margin-top: 10px;<br />padding: 0px;<br />padding-top: 10px;<br />}<br />#container #main #content #user-post #comment-box #comment-area button{<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />background: #f5f5f5;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box .extra{<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />background: #f5f5f5;<br />padding: 0px;<br />padding-top: 5px;<br />padding-bottom: 5px;<br />margin: 0px;<br />margin-top: 10px;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box .extra input {<br />width: 45%;<br />background: #f5f5f5;<br />border: 0px;<br />}<br />#listall-main #article-box{<br />width: 700px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) right top repeat-y;<br />}<br />/*———————————————————————-*/<br />@media screen and (min-width: 1350px){<br />#container{<br />width: 1200px;<br />}<br />#blog-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#content{<br />width: 832px;<br />}<br />#blog-main .article{<br />width: 376px;<br />}<br />#blog-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) 66px 0px repeat-y;<br />}<br />#links{<br />width: 368px;<br />}<br />.article-area-title{<br />width: 831px;<br />}<br />#category-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#category-main .article{<br />width: 376px;<br />}<br />#category-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) 66px 0px repeat-y;<br />}<br />#article-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#comment-box{<br />width: 831px;<br />}<br />#container #main #content #user-post #comment-box #comment-area{<br />width: 832px;<br />}<br />#listall-main #article-box{<br />width: 832px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) right top repeat-y;<br />}<br />.main-list{<br />width: 810px<br />}<br />}

/*<br />CSS desinged by Wei @ Dribs & Drabs, https://www.dribs-drabs.com/blog<br />*/<br />/* —————————————————————————————————————————— 清空 */<br />#comment-form table{<br />margin: 0 auto ;<br />}<br />#comment-form td , #comment-form th{<br />border: 0px solid #000 ;<br />padding: 0px 0px;<br />}<br />#comment-form input#send-comment{<br />padding: 0px 0px ;<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 />margin:0;<br />padding:0;<br />}<br />table {<br />border-collapse:collapse;<br />border-spacing:0;<br />}<br />fieldset,img {<br />border:0;<br />}<br />address,caption,cite,code,dfn,em,th,var {<br />font-style:normal;<br />font-weight:normal;<br />}<br />ol,ul {<br />list-style:none;<br />}<br />caption,th {<br />text-align:left;<br />}<br />h1,h2,h3,h4,h5,h6 {<br />font-size:100%;<br />font-weight:normal;<br />}<br />q:before,q:after {<br />content:”;<br />}<br />abbr,acronym {<br />border:0;<br />}<br />pre{<br />font-size: 1em ;<br />}<br />.article-content{<br />_height: 1% ;<br />overflow: hidden ;<br />_overflow: none;<br />}<br />a{<br />color:#000000;<br />text-decoration:none ;<br />}<br />a:hover{<br />text-decoration:none ;<br />}<br />textarea{<br />font-size: 12px;<br />}<br />.main-container{padding-top: 0px !important;}<br />.navbar{display:none !important;}<br />.pix-related-post{display:none !important;}<br />/* —————————————————————————————————————————— 部落格前置設定 */<br />body{<br />font-size: 11pt ;<br />font-family:”Times New Roman”, “新細明體” ;<br />min-width: 1050px;<br />}<br />#container{<br />width: 1000px;<br />margin: 0px auto;<br />position: relative;<br />}<br />#container2{}<br />/* —————————————————————————————————————————— header */<br />#header{<br />text-align: center;<br />margin: 40px 0px 150px 0px;<br />padding: 130px 0px;<br />background: url(https://pic.pimg.tw/weilife/1533221496-1704886971.webp) center center;<br />}<br />#header h1 a{<br />font-size: 40pt;<br />font-weight: bold;<br />letter-spacing: 1px;<br />color: #ffffff;<br />text-shadow: 1px 1px #000;<br />}<br />#header h2{<br />color: #ffffff;<br />letter-spacing: 1px;<br />text-shadow: 1px 1px #000;<br />}<br />.skiplink{display: none;}<br />#blog-category{display: none;}<br />#navigation{display: none;}<br />/* —————————————————————————————————————————— 下拉選單 */<br />#links-row-2{<br />position: absolute;<br />top: 370px;<br />left: 0px;<br />width: 100%;<br />text-align: center;<br />border-top: 1px #000 solid;<br />border-bottom: 1px #000 solid;<br />}<br />#links-row-2 .box{<br />display: inline-block;<br />vertical-align: top;<br />}<br />#links-row-2 .box-title{<br />letter-spacing: 1px;<br />padding: 15px 15px;<br />border-left: 1px #ffffff solid;<br />}<br />#links-row-2 .box:hover .box-title{<br />border-left: 1px #000 solid;<br />}<br />#links-row-2 .box-title img{display: none;}<br />#links-row-2 .box-text{display: none;}<br />#links-row-2 .box:hover .box-text{<br />display: block;<br />position: absolute;<br />background: #ffffff;<br />padding: 15px;<br />border-top: 1px #000 solid;<br />border-left: 1px #000 solid;<br />text-align: left;<br />line-height: 200%;<br />}<br />/* —————————————————————————————————————————— 文章區塊 */<br />#content{<br />width: 700px;<br />float: left;<br />}<br />.article-head .time{display: none;}<br />.article-head .day{display: none;}<br />/* —————————————————————————————————————————— spotlight */<br />#spotlight{<br />line-height: 200%;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#spotlight h5{<br />font-weight: bold;<br />}<br />#spotlight-text{<br />color: #999;<br />border-bottom: 1px #000 solid;<br />}<br />/* —————————————————————————————————————————— blog-main */<br />#blog-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#blog-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) top left repeat-y;<br />}<br />#blog-main #article-box{<br />border-bottom: 1px #000 solid;<br />}<br />#blog-main .article{<br />position: relative;<br />display: inline-block;<br />vertical-align: top;<br />width: 310px;<br />margin: -2px;<br />padding: 25px 27px 25px 0px;<br />}<br />#blog-main .article:nth-child(2n){<br />padding: 25px 26px 25px 27px;<br />}<br />#blog-main .article:nth-child(n+3){<br />border-top: 1px #000 solid;<br />}<br />#blog-main .article-head{<br />text-align: center;<br />line-height: 150%;<br />padding-bottom: 10px;<br />}<br />#blog-main .article-head .publish{<br />color: #aaa;<br />letter-spacing: 1px;<br />}<br />#blog-main .article-head .title a{<br />font-weight: bold;<br />}<br />#blog-main .article-content{<br />max-height: 350px;<br />overflow: hidden;<br />line-height: 150%;<br />color: #999;<br />}<br />#blog-main .author{display: none;}<br />#blog-main .more a{<br />position: absolute;<br />display: block;<br />top: 0px;<br />left: 0px;<br />width: 100%;<br />height: 100%;<br />font-size: 0px;<br />}<br />#blog-main .article-content img{<br />width: 100%;<br />padding-bottom: 10px;<br />}<br />#blog-main .article-footer{display: none;}<br />.page{<br />padding: 50px 0px 50px 0px;<br />text-align: center;<br />}<br />.page a{<br />display: inline-block;<br />padding: 2px 5px;<br />color: #999;<br />}<br />.page a:hover{<br />color: #000;<br />}<br />.page span{<br />display: inline-block;<br />padding: 2px 5px;<br />border: 1px #000 solid;<br />}<br />/* —————————————————————————————————————————— category-main */<br />#category-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#category-main #article-area{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) top left repeat-y;<br />}<br />.article-area-title{<br />text-align: center;<br />padding: 20px 0px;<br />font-weight: bold;<br />font-size: 15pt;<br />width: 699px;<br />background: #ffffff;<br />border-bottom: 1px #000 solid;<br />}<br />#view-mode{display: none;}<br />#category-main #article-box{<br />border-bottom: 1px #000 solid;<br />}<br />#category-main .article{<br />position: relative;<br />display: inline-block;<br />vertical-align: top;<br />width: 310px;<br />margin: -2px;<br />padding: 25px 27px 25px 0px;<br />}<br />#category-main .article:nth-child(2n){<br />padding: 25px 26px 25px 27px;<br />}<br />#category-main .article:nth-child(n+5){<br />border-top: 1px #000 solid;<br />}<br />#category-main .article-head{<br />text-align: center;<br />line-height: 150%;<br />padding-bottom: 10px;<br />}<br />#category-main .article-head .publish{<br />color: #aaa;<br />letter-spacing: 1px;<br />}<br />#category-main .article-head .title a{<br />font-weight: bold;<br />}<br />#category-main .article-content{<br />max-height: 350px;<br />overflow: hidden;<br />line-height: 150%;<br />color: #999;<br />}<br />#category-main .author{display: none;}<br />#category-main .more a{<br />position: absolute;<br />display: block;<br />top: 0px;<br />left: 0px;<br />width: 100%;<br />height: 100%;<br />font-size: 0px;<br />}<br />#category-main .article-content img{<br />width: 100%;<br />padding-bottom: 10px;<br />}<br />#category-main .article-footer{display: none;}<br />.main-list{<br />line-height: 200%;<br />width: 680px;<br />background: #ffffff;<br />}<br />.main-list table{<br />width: 100%;<br />}<br />.main-list table tr{<br />border-bottom: 1px #ddd solid;<br />}<br />.main-list table tr:hover{<br />background: #f4f4f4;<br />}<br />.main-list table td{<br />padding: 5px;<br />}<br />.main-list table th{<br />padding: 5px;<br />}<br />/* —————————————————————————————————————————— article-main */<br />#article-main #main{<br />_width : 100%;<br />overflow : auto;<br />padding-bottom: 20px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) top left repeat-y;<br />}<br />#article-main .article{<br />padding: 0px 25px 20px 0px;<br />line-height: 200%;<br />border-bottom: 1px #000 solid;<br />}<br />#article-main .article-head{<br />text-align: center;<br />}<br />#article-main .article-head .publish{<br />color: #999;<br />}<br />#article-main .article-head .title a{<br />font-size: 15pt;<br />font-weight: bold;<br />}<br />#article-main .article-content img{<br />max-width: 100%;<br />}<br />.bookmark{<br />padding: 10px 0px 20px 0px;<br />text-align: center;<br />}<br />#article-main .article-footer{<br />color: #999;<br />line-height: 170%;<br />}<br />#article-main .article-footer a{<br />color: #999;<br />}<br />#article-main .article-footer a:hover{<br />color: #000;<br />}<br />/* —————————————————————————————————————————— links*/<br />#links{<br />float: right;<br />width: 300px;<br />}<br />#links-row-1 .box{<br />border-bottom: 1px #000 solid;<br />padding: 20px 0px 20px 25px;<br />}<br />#links-row-1 .box-title{<br />font-weight: bold;<br />text-align: center;<br />padding-bottom: 10px;<br />}<br />#links .box-text{<br />color: #999;<br />line-height: 170%;<br />}<br />#links .box-text a{<br />color: #999;<br />}<br />#links .box-text a:hover{<br />color: #000;<br />}<br />#links .box-text li{<br />position: relative;<br />padding-left: 15px;<br />}<br />#links .box-text li:before{<br />content: “•”;<br />position: absolute;<br />top: 3px;<br />left: 0px;<br />}<br />#links-row-1:after{<br />display: block;<br />line-height: 200%;<br />letter-spacing: 1px;<br />padding: 20px 0px 0px 25px;<br />color: #999;<br />content: “© Blog designed by Dribs & Drabs, https://www.dribs-drabs.com/blog.”;<br />}<br />#links:after{<br />display: block;<br />line-height: 200%;<br />letter-spacing: 1px;<br />padding: 0px 0px 20px 25px;<br />border-bottom: 1px #000 solid;<br />color: #999;<br />content: “© Support by courtesy of Pixnet.”;<br />}<br />/*crumb 我去誰家————————–*/<br />#crumb li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#crumb li:before{<br />content: “” !important;<br />}<br />/*visitor————————–*/<br />#visitor li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#visitor li:before{<br />content: “” !important;<br />}<br />/*friendbox————————–*/<br />#friendbox li{<br />padding: 5px !important;<br />display: inline-block;<br />}<br />#friendbox li:before{<br />content: “” !important;<br />}<br />/*category————————–*/<br />#category .inner-box h6{<br />color: #000;<br />border-bottom: 1px #ddd solid;<br />}<br />#category .inner-box ul{<br />padding-bottom: 10px;<br />}<br />/*search————————–*/<br />#search li{<br />display: inline-block;<br />}<br />#search li:before{<br />content: “” !important;<br />}<br />#search-submit{<br />background: transparent;<br />border: 0px;<br />}<br />/* —————————————————————————————————————————— footer */<br />#footer{<br />clear: both;<br />letter-spacing: 1px;<br />text-align: center;<br />margin-bottom: 50px;<br />padding: 15px 0px;<br />}<br />#footer #bottom{display: none;}<br />/* —————————————————————————————————————————— 留言撰寫 */<br />/*–引用–*/<br />#trackback-box{}<br />#trackback-box h3{display: none;}<br />#trackback-url{display: none;}<br />#trackback-text{display: none;}<br />#comment-box{<br />width: 699px;<br />padding: 10px 0px 0px 0px;<br />}<br />#comment-box h3{<br />text-align: center;<br />margin: 0px;<br />padding: 10px 0px;<br />}<br />.post-comment{<br />text-align: center;<br />padding: 10px 0px 10px 0px;<br />border-bottom: 1px solid #000;<br />}<br />.post-comment a{<br />color: #999;<br />}<br />/*–單一留言–*/<br />/*–單一引用+單一回應–*/<br />.single-post{<br />padding: 20px;<br />min-height: 55px;<br />-webkit-transition: background 0.5s ease-out;<br />-moz-transition: background 0.5s ease-out;<br />-o-transition: background 0.5s ease-out;<br />transition: background 0.5s ease-out;<br />border-bottom: 1px solid #000;<br />position: relative;<br />}<br />.single-post:hover{<br />background: #f4f4f4;<br />}<br />.secret{<br />min-height: 0px;<br />}<br />.secret li:before{<br />content: “- “;<br />padding-right: 5px;<br />}<br />.secret li:after{<br />content: “- “;<br />padding-left: 5px;<br />}<br />.secret li{<br />padding: 0px;<br />}<br />.post-info{<br />font-weight: bold;<br />height: 25px;<br />opacity: 0.5;<br />}<br />.post-info a:hover{<br />position: relative;<br />top: 1px;<br />left: 1px;<br />}<br />.post-info .floor{<br />display: block;<br />width: 70px;<br />position: absolute;<br />top: 95px;<br />right: 20px;<br />text-align: center;<br />font-size: 14px;<br />font-weight: normal;<br />}<br />.post-photo{<br />text-align: right;<br />position: absolute;<br />top: 20px;<br />right: 20px;<br />}<br />.post-photo img{<br />width: 70px;<br />height: 70px;<br />border-radius: 50%;<br />}<br />.post-text{<br />color: #999;<br />padding: 0px 100px 10px 0px;<br />line-height: 170%;<br />}<br />.reply-text{<br />color: #aaa;<br />padding: 0px 90px 0px 10px;<br />line-height: 170%;<br />border-left: #aaa solid 5px;<br />}<br />.reply-text p{<br />padding-top: 10px;<br />padding-bottom: 2px;<br />}<br />.reply-text a{<br />color: #888;<br />}<br />.reply-text a:hover{<br />position: relative;<br />top: 1px;<br />left: 1px;<br />}<br />/*——————–icon————–*/<br />.post-info .user-name a{<br />margin: 0 5px 0px 0px;<br />}<br />.post-info .user-name img{<br />display: none;<br />}<br />.post-info .homepage{<br />background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat;<br />}<br />.post-info .homepage img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .hide-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat;<br />}<br />.post-info .hide-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .show-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat;<br />}<br />.post-info .show-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .delete-message{<br />background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat;<br />}<br />.post-info .delete-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .spam-message{<br />background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat;<br />}<br />.post-info .spam-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.post-info .reply-message{<br />background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat;<br />}<br />.post-info .reply-message img{<br />filter:alpha(opacity=0);<br />-moz-opacity:0;<br />opacity: 0;<br />}<br />.reply-text .comment-icon{<br />display: none;<br />}<br />/* —————————————————————留言撰寫 —————————————————————*/<br />#container #main #content #user-post #comment-box #comment-area {<br />width: 700px;<br />padding: 0px;<br />border-radius: 0px !important;<br />border-bottom: 1px solid #000;<br />}<br />#container #main #content #user-post #comment-box #comment-area-2 {<br />width: 660px;<br />background: transparent;<br />padding: 20px;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box #comment-area iframe{<br />position: absolute ;<br />top: 20px;<br />right: 20px;<br />float:right;<br />width: 82px;<br />height: 28px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-identity{<br />width: 100%;<br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left;<br />border: 0px;<br />padding: 0px;<br />padding-bottom: 5px;<br />}<br />#container #main #content #user-post #comment-box .identity-login img.photo{<br />border: 0px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-body{<br />border: 0px;<br />padding: 0px;<br />}<br />#container #main #content #user-post #comment-box input.comment-name{<br />background: #F2F2F2;<br />width: 100%;<br />border: 0px;<br />padding: 5px;<br />margin: 0px;<br />margin-bottom: 10px;<br />}<br />#container #main #content #user-post #comment-box .comment-textarea{<br />background: #f5f5f5;<br />width: 100%;<br />border: 0px;<br />padding: 0px;<br />padding-bottom: 2px;<br />margin: 0px;<br />margin-bottom: 5px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .comment-textarea textarea{<br />background: #f5f5f5;<br />width: 98%;<br />padding: 5px;<br />margin-bottom:5px;<br />}<br />#container #main #content #user-post #comment-box .captcha{<br />background: #f5f5f5;<br />width: 100%;<br />border: 0px;<br />padding: 0px;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />#container #main #content #user-post #comment-box .captcha div{<br />position: absolute;<br />top:5px;<br />left: 210px;<br />}<br />#container #main #content #user-post #comment-box .captcha input{<br />width: 100%;<br />height: 25px;<br />border: 0px;<br />position: absolute;<br />top:0px;<br />left: 120px;<br />}<br />#container #main #content #user-post #comment-box a.reload-captcha{<br />position: absolute;<br />top:22px;<br />left:0px;<br />background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px;<br />}<br />#container #main #content #user-post #comment-box a.reload-captcha:hover{<br />position: absolute;<br />top:22px;<br />left:0px;<br />background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px;<br />color: #000000<br />}<br />#container #main #content #user-post #comment-box .comment-extra{<br />background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left;<br />margin: 0px;<br />margin-top: 10px;<br />padding: 0px;<br />padding-top: 10px;<br />}<br />#container #main #content #user-post #comment-box #comment-area button{<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />background: #f5f5f5;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box .extra{<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />background: #f5f5f5;<br />padding: 0px;<br />padding-top: 5px;<br />padding-bottom: 5px;<br />margin: 0px;<br />margin-top: 10px;<br />border: 0px;<br />}<br />#container #main #content #user-post #comment-box .extra input {<br />width: 45%;<br />background: #f5f5f5;<br />border: 0px;<br />}<br />#listall-main #article-box{<br />width: 700px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) right top repeat-y;<br />}<br />/*———————————————————————-*/<br />@media screen and (min-width: 1350px){<br />#container{<br />width: 1200px;<br />}<br />#blog-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#content{<br />width: 832px;<br />}<br />#blog-main .article{<br />width: 376px;<br />}<br />#blog-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) 66px 0px repeat-y;<br />}<br />#links{<br />width: 368px;<br />}<br />.article-area-title{<br />width: 831px;<br />}<br />#category-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#category-main .article{<br />width: 376px;<br />}<br />#category-main #article-box{<br />background: url(https://pic.pimg.tw/weilife/1445166118-1410676451.png) 66px 0px repeat-y;<br />}<br />#article-main #main{<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) 131px 0px repeat-y;<br />}<br />#comment-box{<br />width: 831px;<br />}<br />#container #main #content #user-post #comment-box #comment-area{<br />width: 832px;<br />}<br />#listall-main #article-box{<br />width: 832px;<br />background: url(https://pic.pimg.tw/weilife/1445166118-3956549216.png) right top repeat-y;<br />}<br />.main-list{<br />width: 810px<br />}<br />}

‌

版面設定

1 – 側欄1的元件會放置在部落格的右側，側欄2的元件會放置在部落格標題下方的下拉選單裡。

2 – 純文字部落格也可以套用。

3 – 每頁顯示文章數量請改成偶數，後台>基本/進階設定>文章顯示相關設定>每頁顯示文章數。

4 – 建議關閉公告版位

5 – 文章內圖片最佳寬度為800px，可滿版

‌

Q&A

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

‌

更新

2018/08/02 刪除上方快捷功能bar、替換橫幅照片、加入自適應功能讓版面依照瀏覽器視窗大小縮放

‌

‌