分享 | 痞客邦PIXNET部落格版面樣式CSS – 相簿集日記

有別於一般部落格的版面，這個版面是以相片列表的方式來呈現文章。每篇文章取文章的第一張圖來表示，最新的文章圖示會大些，整體看起來很像一個相簿集，常用相片或圖文寫文章的部落格，快來套用吧！

版型-首頁

使用規定

幫本站兩個粉絲團按讚，Dribs & Drabs / Dribs & Drabs Designs。
禁止刪除或修改版型的版權宣告。
禁止複製部分語法，套用至非本站分享的版面。
本站分享的部落格樣式，可自行修改美化，勿再次發佈與替其他部落格修改。
套用發生問題請先看過版面設定和Q&A。
勿當伸手牌，版主沒有時間處理這類的問題。
此版型不再維護，若想要更專業的版型請參考半客製化服務內容。

CSS語法

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

/* CSS desinged by Wei @ Dribs & Drabs, https://dribs-drabs.com/blog 主要色碼: #777(灰) */ /* —————————————————————————————————————————— 清空 */ #comment-form table{ margin: 0 auto ; } #comment-form td , #comment-form th{ border: 0px solid #000 ; padding: 0px 0px; } #comment-form input#send-comment{ padding: 0px 0px ; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0; } pre{ font-size: 1em ; } .article-content{ _height: 1% ; overflow: hidden ; _overflow: none; } a{ color:#000000; text-decoration:none ; } a:hover{ text-decoration:none ; } textarea{ font-size: 12px; } /* —————————————————————————————————————————— 部落格前置設定 */ body{ font-size: 12px ; font-family:”Arial” ; background: url(http://pic.pimg.tw/weilife/1368966867-2967161040.png); overflow-x: hidden; min-width: 900px; } #container{ width: 900px; padding-right: 300px; margin: 0 auto; } #container2{} /* —————————————————————————————————————————— 快捷功能BAR */ .topbar{} /* —————————————————————————————————————————— 部落格資訊 */ #header{ width: 810px; margin: 0 auto; margin-top: 20px; position: relative; padding: 15px 0px 5px 70px; border-bottom: 1px dotted #aaa; background: url(http://pic.pimg.tw/weilife/1370652017-4233738588.png) top left no-repeat; } #banner{} #banner h1{ font-size: 20px; font-weight: bold; padding-bottom: 5px; } #banner h1 a:hover{ position: relative; top: 1px; left: 1px; } #banner h2{ color: #777; line-height: 200%; } #banner .skiplink{display: none;} #blog-category{display: none;} /* —————————————————————————————————————————— 連結區塊 */ #navigation{ width: 250px; position: absolute; right: 0px; top: 10px; padding: 5px 5px 5px 15px; } /*–其他服務連結區塊內的所有連結–*/ #navigation a:before{ content: “● “; padding-left: 6px; padding-right: 2px; } #navigation a{ float: right; color: #777; display: block; padding: 2px 10px 2px 0px; } #navigation a:hover{ color: #000; } /* —————————————————————————————————————————— 主要內文 */ #main{clear: both;} #content{ margin: 0 auto; width: 900px; } /*–公告注目區–*/ #spotlight{ margin: 0 10px; padding: 10px 0px; line-height: 180%; overflow : hidden; border-bottom: 1px #aaa dotted; } #spotlight h5{ float: left; width: 28px; color: #777; letter-spacing: 2px; padding: 5px 10px; background: #aaa; text-align: center; color: #ffffff; margin: 0px 7px; } #spotlight-text{ color: #777; float: left; padding: 5px 8px; } /* —————————————————————————————————————————— 首頁模式 */ #article-area{ padding-top: 20px; margin: 0 auto; overflow : hidden; clear: both; } .article{ margin: 10px; float: left; width: 240px; background: #ffffff; overflow: hidden; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.7); color: #777; } .article:hover{ position: relative; top: 1px; left: 1px; } .article-head{ color: #555; padding-bottom: 5px; border-bottom: 1px dotted #aaa; position: relative; margin-bottom: 10px; } .article-head .publish{ width: 30px; text-align: center; padding-right: 5px; border-right: #aaa 1px dotted; line-height: 150%; } .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{ position: absolute; top: 0px; right: 0px; width: 195px; line-height: 150%; } .article-head .title a{ color: #555; } .article-content{ height: 160px; overflow: hidden; position: relative; line-height: 180%; } .article-content p{ padding: 5px 0px; } .author{display: none;} .article-footer{display: none;} .article-content .more a{ width: 240px; height: 160px; position: absolute; top: 0px; left: 0px; font-size: 0px; display: block; } /*–第一篇–*/ .article:first-child{ width: 540px; } .article:first-child .article-head .publish{ width: 50px; font-size: 18px; line-height: 130%; } .article:first-child .article-head .title{ width: 470px; font-size: 18px; line-height: 130%; } .article:first-child .article-content{ height: 433px; } .article:first-child .article-content img{ max-width: 800px; } .article:first-child .article-content p:first-child img{ width: auto; height: 433px; } .article:first-child .article-content .more a{ width: 540px; height: 433px; } /*–頁數–*/ .page{ clear: both; padding: 30px 0px; text-align: center; } .page a{ padding: 0px 5px 0px 5px; } .page span{ padding: 0px 5px 0px 5px; color: #777; } .page a:hover{ position: relative; top: 1px; left: 1px; } #blog-main .article-content img{ position: absolute; width: 100%; top: 0px; left: 0px; } #blog-main .article:nth-child(1) .article-content img{ width: auto; height: 100%; } #blog-main .article-keyword{display: none;} #category-main .article-content img{ position: absolute; width: 100%; top: 0px; left: 0px; } #category-main .article-keyword{display: none;} /* —————————————————————————————————————————— 文章模式 */ #article-main .article{ padding: 40px; width: 800px; float: none; } #article-main .article:hover{ top: 0px; left: 0px; } #article-main .publish{ width: 130px; } #article-main .publish .month:after{ content: ‘-‘; padding: 0px 2px 0px 2px; } #article-main .publish .date:after{ content: ‘-‘; padding: 0px 2px 0px 2px; } #article-main .title{ width: 650px; line-height: 110%; } #article-main .article-content{ height: auto; } #article-main .article-content img{ height: auto; } .bookmark{ padding: 10px 0px; } #article-main .author{ display: block; padding-top: 20px; border-top: #aaa 1px dotted; } #article-main .article-footer{ display: block; line-height: 200%; } .back-to-top{ text-align: right; } #pixblogad{display:none;} /* —————————————————————————————————————————— 分類、列表模式 */ .article-area-title:before{ display: inline-block; width: 48px; height: 15px; margin: 0px 15px 0px 5px; content: “>>>>>>>”; } .article-area-title{ color: #777; margin: -10px 10px 0 10px; padding: 10px 0px 5px 0px; } #view-mode #display:before{ display: inline-block; width: 48px; height: 15px; margin: 0px 15px 0px 5px; content: “>>>>>>>”; } #view-mode #display{ margin: 0px 10px 10px 10px; padding: 5px 10px 15px 0px; color: #777; border-bottom: 1px #aaa dotted; } #view-mode a{ color: #777; } #view-mode a:hover{ position: relative; top: 1px; left: 1px; } .main-list{ padding: 0px 10px; } .main-list table{ width: 100%; } .main-list table tr{ border-bottom: #aaa 1px dotted; } .main-list table tr:hover{ background: #ddd; } .main-list table th,td{ padding: 7px; } /* —————————————————————————————————————————— 側欄 */ /*–側邊欄位區–*/ #links{ clear: both; width: 265px; position: absolute; padding: 0px 0px 7px 5px; top: 40px; right: 0px; border: 1px dotted #aaa; border-right: 0px; border-top: 0px; border-bottom-left-radius: 10px; } #links-row-1{ width: 240px; padding: 10px 10px 0px 15px; display: inline-block; margin: -2px 0px; background: url(http://pic.pimg.tw/weilife/1370441324-265053190.png) right top repeat-y; } #links-row-2{ width: 240px; padding: 0px 10px 10px 15px; display: inline-block; margin: -2px 0px; border-bottom-left-radius: 7px; position: relative; background: url(http://pic.pimg.tw/weilife/1370441324-265053190.png) right top repeat-y; } /*-Box————————–*/ .box{ width: 240px; padding: 0px; color: #F1F1F1; background:url(http://pic.pimg.tw/weilife/1367737100-513451795.png) left top no-repeat; margin-bottom: 20px; } .box-title{ background:url(http://pic.pimg.tw/weilife/1370441325-389723633.png) left bottom repeat-x; color: #000; padding-left: 15px; padding-bottom: 4px; margin-bottom: 5px; } .box-text { padding: 0px 0px 10px 0px; color:#eeeeee; } .box-text a{ color:#eeeeee; } .box-text a:hover{ color:#ffffff; position: relative; top: 0px; left: 0px; } .box-more{ margin:5px; text-align:center; } .box-more a{ font-size:11px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 2px 10px; } .box-more a:hover{} /*-category-*/ #category{ } #category .box-title{ } #category .box-text { } #category li{ padding-left:30px; background:url(http://pic.pimg.tw/weilife/1370441325-2966214461.png) no-repeat top left; height: 25px; padding-top: 3px; } #category h6{ background:url(http://pic.pimg.tw/weilife/1370441325-2756193581.png) no-repeat top left; height: 25px; padding-top: 5px; padding-left: 15px; } #category h6:hover{ color:#ffffff; } #category .box-text h6 img{ display: none; } #category .box-more{ display:none; } /*-recent-article-*/ #recent-article{ } #recent-article .box-title{} #recent-article .box-text {} #recent-article .box-text a{ display: block; width: 215px; background:url(http://pic.pimg.tw/weilife/1370441800-973092565.png) no-repeat top left; padding-left:15px; line-height:1.5; } #recent-article li{ background:url(http://pic.pimg.tw/weilife/1370441325-389723633.png) repeat-x bottom left; padding-top:4px; padding-bottom:4px; } /*-hot-article-*/ #hot-article{} #hot-article .box-title{} #hot-article .box-text {} #hot-article .box-text a{ display: block; width: 215px; background:url(http://pic.pimg.tw/weilife/1370441800-973092565.png) no-repeat top left; padding-left:15px; line-height:1.5; } #hot-article li{ background:url(http://pic.pimg.tw/weilife/1370441325-389723633.png) repeat-x bottom left; padding-top:4px; padding-bottom:4px; } /*-mylink-*/ #mylink{} #mylink .box-title{} #mylink .box-text {} #mylink .box-text a{ display: block; width: 215px; background:url(http://pic.pimg.tw/weilife/1370441800-973092565.png) no-repeat top left; padding-left:15px; line-height:1.5; } #mylink li{ background:url(http://pic.pimg.tw/weilife/1370441325-389723633.png) repeat-x bottom left; padding-top:4px; padding-bottom:4px; } /*-counter-*/ #counter{} #counter .box-title{} #counter .box-text {} #counter li{ background:url(http://pic.pimg.tw/weilife/1370441325-2756193581.png) no-repeat top left; padding-top:5px; padding-bottom:7px; padding-left:15px; } /*-latest-comment-*/ #latest-comment{} #latest-comment .box-title{} #latest-comment .box-text {} #latest-comment li{ background:url(http://pic.pimg.tw/weilife/1370441325-2756193581.png) no-repeat top left; padding-top:5px; padding-bottom:7px; padding-left:15px; } /*-latest-trackback-*/ #latest-trackback{} #latest-trackback .box-title{} #latest-trackback .box-text {} #latest-trackback li{ background:url(http://pic.pimg.tw/weilife/1370441325-2756193581.png) no-repeat top left; padding-top:5px; padding-bottom:7px; padding-left:15px; } /*-friendbox-*/ #friendbox{} #friendbox.box-text{} #friendbox .box-text ul:after { content: ” “; display: block; height: 0px; clear: both; overflow: hidden; } #friendbox .box-text li { float: left; padding-right:8px; padding-bottom:7px; } #friendbox .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px; } #friendbox .box-text img:hover{ position: relative; top: 1px; left: 1px; } /*-visitor-*/ #visitor{} #visitor .box-text{} #visitor .box-text ul:after { content: ” “; display: block; height: 0px; clear: both; overflow: hidden; } #visitor .box-text li { float: left; padding-right:8px; padding-bottom:7px; } #visitor .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px; } #visitor .box-text img:hover{ position: relative; top: 1px; left: 1px; } /*-crumb-*/ #crumb{} #crumb .box-text{} #crumb .box-text ul:after { content: ” “; display: block; height: 0px; clear: both; overflow: hidden; } #crumb .box-text li { float: left; padding-right:8px; padding-bottom:7px; } #crumb .box-text img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 49px; height: 49px; } #crumb .box-text img:hover{ position: relative; top: 1px; left: 1px; } /*-search-*/ #search-target{ margin: 10px 0px; padding: 2px 0px; width: 100%; border: 0px; color: #ffffff; background: #777; } #search-submit{ width:100%; border: 0px; color: #000; background: transparent; } /*-archive -*/ #archive select{ width:230px; border: 0px; color: #ffffff; } /*-calendar-*/ #calendar .box-title{} #calendar .box-text {} #calendar{} #calendar table{ width:100%; } #calendar th, #calendar td{ text-align:center; padding:1px; } #calendar td a{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#fff; color:#999; display:block; } #calendar td a:hover{ position: relative; top: 1px; left: 1px; } /*-user-info-*/ #user-info .box-title{} #user-info .box-text {} #user-info{} #user-info dt{} #user-info dl dd { margin:0 0 0px; } #user-info .user-img { margin-bottom:5px; width: 95px; } #user-info .user-img img{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:#ccc; padding:0px; border:0px solid #666; margin-bottom:5px; } /* —————————————————————————————————————————— 留言區塊 */ #user-post{ width:800px; background: #ffffff; margin: 30px 10px 0px 10px; padding: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.5); } /* —————————————————————————————————————————— 留言區塊 */ /*–引用–*/ #trackback-box{} #trackback-box h3{display: none;} #trackback-url{display: none;} #trackback-text{display: none;} #comment-box{} #comment-box h3:before{ content: “”; } #comment-box h3{ margin: 0px; padding: 10px 0px; } .post-comment{ padding: 10px 0px; border-bottom: #bbb dotted 1px; } .post-comment a:before{ content: “► “; font-size: 10px; } .post-comment:hover a{ color: #777; } /*–單一留言–*/ /*–單一引用+單一回應–*/ .single-post{ padding: 20px; min-height: 55px; -webkit-transition: background 0.5s ease-out; -moz-transition: background 0.5s ease-out; -o-transition: background 0.5s ease-out; transition: background 0.5s ease-out; border-bottom: dotted #aaa 1px; position: relative; } .single-post:hover{ background: #efefef; } .secret{ min-height: 0px; } .secret li:before{ content: “- “; padding-right: 5px; } .secret li:after{ content: “- “; padding-left: 5px; } .secret li{ padding: 0px; } .post-info{ font-weight: bold; height: 20px; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-info .floor{ display: block; width: 50px; position: absolute; top: 65px; right: 10px; text-align: center; font-size: 14px; font-weight: normal; } .post-photo{ text-align: right; position: absolute; top: 10px; right: 10px; } .post-photo img{ width: 50px; height: 50px; border-radius: 50%; } .post-text{ padding: 0px 80px 10px 0px; line-height: 150%; } .reply-text{ color: #888; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #888 solid 5px; } .reply-text p{ padding-top: 10px; padding-bottom: 2px; } .reply-text a{ color: #888; } .reply-text a:hover{ position: relative; top: 1px; left: 1px; } /*——————–icon————–*/ .post-info .user-name a{ margin: 0 5px 0px 0px; } .post-info .user-name img{ display: none; } .post-info .homepage{ background: url(http://pic.pimg.tw/weilife/1381045870-1646743796.png) center center no-repeat; } .post-info .homepage img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .hide-message{ background: url(http://pic.pimg.tw/weilife/1381045870-893869105.png) center center no-repeat; } .post-info .hide-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .show-message{ background: url(http://pic.pimg.tw/weilife/1381045870-1392687776.png) center center no-repeat; } .post-info .show-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .delete-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3234832763.png) center center no-repeat; } .post-info .delete-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .spam-message{ background: url(http://pic.pimg.tw/weilife/1381045869-3826508189.png) center center no-repeat; } .post-info .spam-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .post-info .reply-message{ background: url(http://pic.pimg.tw/weilife/1381045870-4208701959.png) center center no-repeat; } .post-info .reply-message img{ filter:alpha(opacity=0); -moz-opacity:0; opacity: 0; } .reply-text .comment-icon{ display: none; } /* —————————————————————留言撰寫 —————————————————————*/ #container #main #content #user-post #comment-box #comment-area { width: 800px; padding: 0px; } #container #main #content #user-post #comment-box #comment-area-2 { width: 760px; background: #eaeaea; padding: 20px; border: 0px; } #container #main #content #user-post #comment-box #comment-area iframe{ position: absolute ; top:20px; right: 20px; float:right; } #container #main #content #user-post #comment-box .comment-identity{ width: 100%; background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x bottom left; border: 0px; padding: 0px; padding-bottom: 5px; } #container #main #content #user-post #comment-box .identity-login img.photo{ border: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-body{ border: 0px; padding: 0px; } #container #main #content #user-post #comment-box input.comment-name{ background: #F2F2F2; width: 100%; border: 0px; padding: 5px; margin: 0px; margin-bottom: 10px; } #container #main #content #user-post #comment-box .comment-textarea{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; padding-bottom: 2px; margin: 0px; margin-bottom: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .comment-textarea textarea{ background: #f5f5f5; width: 98%; padding: 5px; margin-bottom:5px; } #container #main #content #user-post #comment-box .captcha{ background: #f5f5f5; width: 100%; border: 0px; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container #main #content #user-post #comment-box .captcha div{ position: absolute; top:5px; left: 210px; } #container #main #content #user-post #comment-box .captcha input{ width: 100%; height: 25px; border: 0px; position: absolute; top:0px; left: 120px; } #container #main #content #user-post #comment-box a.reload-captcha{ position: absolute; top:22px; left:0px; background: url(http://pic.pimg.tw/weilife/1368619771-4138190912.png) no-repeat right 4px; } #container #main #content #user-post #comment-box a.reload-captcha:hover{ position: absolute; top:22px; left:0px; background:url(http://pic.pimg.tw/weilife/1368619770-3632605094.png) no-repeat right 4px; color: #000000 } #container #main #content #user-post #comment-box .comment-extra{ background:url(http://pic.pimg.tw/weilife/1368612429-2456652207.png) repeat-x top left; margin: 0px; margin-top: 10px; padding: 0px; padding-top: 10px; } #container #main #content #user-post #comment-box #comment-area button{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; border: 0px; } #container #main #content #user-post #comment-box .extra{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; padding: 0px; padding-top: 5px; padding-bottom: 5px; margin: 0px; margin-top: 10px; border: 0px; } #container #main #content #user-post #comment-box .extra input { width: 45%; background: #f5f5f5; border: 0px; } /* —————————————————————————————————————————— 頁尾 */ #footer{ width: 900px; padding-right: 240px; padding-top: 10px; line-height: 200%; } #footer a:hover{ position: relative; top: 1px; left: 1px; } #footer #bottom:before{ padding: 10px 0px; display: block; text-align: center; content: “Copyright © CSS designed by Wei @ Dribs & Drabs, https://dribs-drabs.com/blog”; } #footer #bottom{ padding: 10px 0px; text-align: center; } /* —————————————————————————————————————————— 上下文章連結 */ #pix_article_switch{ width: 1020px !important; margin-left: -660px !important; } /* —————————————————————————————————————————— 畫面縮小 */ @media screen and (max-width: 1250px) { #container{ padding-right: 50px; } #links{ right: -250px; -webkit-transition: right 0.5s ease-out; -moz-transition: right 0.5s ease-out; -o-transition: right 0.5s ease-out; transition: right 0.5s ease-out; z-index: 1000; } #links:hover{ right: 0px; } #pix_article_switch{ width: 1000px !important; margin-left: -525px !important; } } @media screen and (max-width: 600px) { #links{ left: 930px; } }

版面設定

1 – 至後台”基本/進階設定”，”每頁顯示文章數”改成3的倍數

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

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

4 – 承3，該張照片長高最佳比例為3:2的橫式照片，若為直式或方形照片在首頁顯示時會被裁切。

Q&A

1 – 請問如何刪除痞客邦在側欄的廣告?

加入以下CSS語法

#links-row-1{display: none;}

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

更新

2014/08/09 解決痞客邦新增快捷功能BAR造成破壞版面的問題

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

2015/05/24 解決小螢幕主畫面被側欄遮蔽的問題

2015/12/14 配合痞客新版後台，更改每篇文章代表圖示顯示方式

“https://dribs-drabs.com/blog/post/466646060-blog-template-life-1″ target=”_blank” rel=”noopener”>
痞客邦部落格電腦版型客製化服務-佈景Life雜誌型

分享 | 痞客邦PIXNET部落格版面樣式CSS – 相簿集日記

追蹤我

贊助資訊