❤️灰鴿❤️

本樣式特點為 : 首頁摘要文章以 馬賽克磚牆模式顯示，讓瀏覽者觀看部落格一目了然。

 版頭head (橫幅 banner) 沒有設定高度，可由你書寫的內文撐高，醬就可以不用去修改CSS。

套用本樣式，你可能需要重新編排摘要 與設定首頁文章顯示方式。

喜歡的格友，快來套用吧!!

CSS語法

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

/*-- Flex ~ 右側欄 樣式 ---*/ * { 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: 13px; } /*-------------------- 部落格資訊 -------*/ #header{ position: relative; margin-left: 10px ; border-bottom: 1px dotted #aaa; /*--- 背景圖片、第一張 vvvv 位置大小固定不變。*/ background: url(https://pic.pimg.tw/hoyu0528/1564384514-1983535964.png) top left 5px no-repeat; max-height:600px; /* ＜＜＜最大高度 -- 高度沒設定 只能撐到600像素 ++*/ } #banner{margin: 20px 120px;} #banner h1{ font-size: 20px; font-weight: bold; padding-bottom: 5px; } #banner h1 a:hover{ position: relative; top: 1px; left: 1px; text-shadow: 1px 2px 8px rgba(30, 30, 30, 0.8); } #banner h2{ color: #777; line-height: 160%; } #banner .skiplink, #blog-category{ display: none;} /*--------------------- 連結區塊 -------*/ #navigation{ width: 350px; position: absolute; right: 290px; bottom: 5px; padding: 5px 5px 5px 15px; } /*--其他服務連結區塊內的所有連結--*/ #navigation a:before{ content: "● "; color:#aef; padding-left: 6px; padding-right: 2px; } #navigation a{ float: right; color: #777; display: block; padding: 2px 10px 2px 0px; } #navigation a:hover{ color: #000; text-shadow: 1px 2px 8px rgba(30, 30, 30, 0.8); } /*---------------------- 主框架 -----*/ body{ font-size: 16px ; font-family: "Arial", "Century Gothic", 微軟正黑體; background: #f0faff; overflow-x: hidden; } #container{ min-width: 850px; position: relative;} @media all and (max-width: 800px) { #container, #main { min-width: 750px !important;} } #main{ min-width: 850px;} #content{ margin-right: 270px; min-width: 490px;} /*------ 側邊欄位 --*/ #links{ overflow : hidden; position: absolute; padding: 0px 0px 7px 5px; top: -20px; right: 0px; border-right: 2px ridge #eee; box-shadow: 1px 2px 6px 2px rgba(30, 30, 30, 0.2); background:#ddd url(https://pic.pimg.tw/hoyu0528/1564555942-1632294042.jpg) ; /*＜＜ 背景 --*/ width: 265px; /* ＜＜ 寬度 --*/ } #links A:hover{color:#f3a; } /* ＜＜ 超連結 --*/ #links-row-1, #links-row-2{ width: 255px; padding: 10px 10px 0px 15px; display: inline-block; margin: -2px 0px; } #links-row-1 div:first-child {width:0px; height:0px; margin-left: -2000px; display:none !important;} /* ＜＜ 廣告區塊 --*/ /*-------- Box -------------------*/ :root { --box-line: #777; /* ＜＜＜　側欄的虛線顏色 － */ } .box{ width: 240px; padding: 0px; margin-bottom: 20px; } .box-title{ border-bottom: 2px groove #e0e0e0; color: #000; padding-left: 15px; padding-bottom: 4px; margin-bottom: 5px; } .box-text { padding: 0px 0px 10px 0px; color: #33e; /* ＜＜＜　側欄、文字顏色 －－ */ } .box-text a{ color: #850; /* ＜＜＜　側欄、文字顏色 －－ */ } .box-text a:hover{ 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{} /*--公告區--*/ #spotlight{ margin: 0 20px; padding: 10px 0px; line-height: 180%; overflow : hidden; border-bottom: 1px #aaa dotted; display:none; /*---- 隱藏~公告區塊 ++ 只有在首頁才會出現，若不要這功能，將此行移除 --- */ } #spotlight h5{ position: absolute; width: 28px; color: #777; letter-spacing: 2px; padding: 5px 10px; background: #aaa; text-align: center; color: #ffffff; margin: 0px 7px; } #spotlight-text{ color: #777; padding: 5px 60px; } #blog-main #spotlight{display:block;} /*-- 在首頁會顯示公告區 --*/ /* ------------ 首頁模式 ----*/ #article-area{ padding: 15px; margin: 0 auto; overflow : hidden; clear: both; } #blog-main #article-box{ display:flex; flex-flow: row wrap;} .article{ margin: 8px; flex: 1 0 260px; background: #ffffff; overflow: hidden; padding: 12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.7), 0px 3px 8px 2px rgba(50,50,60,0.4); color: #777; } .article, .article A{ -webkit-transition:.6s; -moz-transition:.6s; -o-transition:.6s; transition:.6s; } .article a:hover { padding:5px; color:#f03060; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2), 0px 2px 13px rgba(0, 0, 0, 0.3); } #blog-main .article:hover{ position: relative; color:#f9d; top: 1px; left: 1px; } .article-head{ padding-bottom: 5px; margin-bottom: 5px; } .article-head .publish{ font-weight: bold; color:black; text-align: center; padding-right: 5px; line-height: 150%; } .article-head .publish .day{display: none;} .article-head .publish .time{display: none;} .article-head .title{ border-bottom: #555 1px dotted; line-height: 150%; } .article-head .title a{ color: #777; } #blog-main .article-content img { top:0; left:0; margin-right: 10px !important; width:120px; height:120px; display:block; position: absolute; border:2px solid #999; } #blog-main .article-content:before { content: " "; width: 130px; line-height: 120px; height: 120px; float: left; } #blog-main .article-keyword{display: none;} .article-content { position: relative; line-height: 160%; min-height:135px; padding: 5px 0px; } .author, .article-footer{display: none;} .article-content .more a{ width: 100%; height: 100%; position: absolute; top: 0px; z-index:100; font-size: 0px; display: block; } /*--頁數 --*/ .page { padding: 30px 0px 10px; text-align:center; clear:both; } .page a,.page SPAN { padding:1px 7px; line-height:120%; margin:1px 3px; border:1px solid #888; color:#999; font-size:18px; background:url(https://pic.pimg.tw/pixnetvisual/4bf6015b4a652.jpg) left top no-repeat; } .page SPAN { background:#fde; } .page A:hover { background:#ffb; border-color:red; } /*---------------- 文章模式 ------------*/ #article-main .article{ padding: 20px 25px 10px; float: none; } #article-main .article:hover{ top: 0px; left: 0px; } #article-main .publish{ width: 150px; } #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{ line-height: 110%; } #article-main .article-content{ height: auto; } #article-main .article-content img{ height: auto; max-width:100%; border:0; } .bookmark{ padding: 10px 0px; } #article-main .author{ display: block; padding-top: 20px; border-top: #aaa 1px dotted; } #article-main .article-footer{ font-size: 15px ; display: block; line-height: 200%; } .back-to-top{ text-align: right; } #pixblogad{display:none;} /*------------------- 分類、列表模式 -----------*/ #category-main .article-content img{ float:left; position: absolute; width: 120px; height:120px; top: 0px; left: 0px; } #category-main .article-keyword{display: none;} #category-main .article-content {max-height:200px; min-height:130px; padding-left:130px; flex:1 0 400px;} #category-main .more a{left:-1px;} #category-main #article-box{ display:flex; flex-flow: row wrap;} #category-main .article{ flex:1 0 380px;} .article-area-title:before{ display: inline-block; width: 48px; height: 15px; margin: 0px 15px 0px 5px; content: ">>>>"; } .article-area-title{ color: #777; width:100%; margin: -10px 10px 0 10px; padding: 10px 0px 5px 0px; } #view-mode{width:100%;} #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; } /*--- 類別 ----*/ #category{ } #category .box-title{ } #category .box-text { } #category li{ padding-left:30px; border-bottom: 1px dashed var(--box-line); height: 28px; padding-top: 3px; background:url(https://pic.pimg.tw/hoyu0528/1564405793-121647000.png) no-repeat top 5px left 10px; } #category h6{ 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 .box-title{} #recent-article .box-text {} #recent-article .box-text a{ display: block; width: 215px; background:url(https://pic.pimg.tw/hoyu0528/1564406063-4105488869.png) no-repeat top left; padding-left:15px; line-height:1.5; } #recent-article li{ border-bottom: 1px dashed var(--box-line); padding-top:4px; padding-bottom:4px; } /*-- 熱門文章 --*/ #hot-article{} #hot-article .box-title{} #hot-article .box-text {} #hot-article .box-text a{ display: block; width: 215px; background:url(https://pic.pimg.tw/hoyu0528/1564405792-549985242.png) no-repeat top 5px left; padding-left:15px; line-height:1.5; } #hot-article li{ border-bottom: 1px dashed var(--box-line); paddinurlg-top:4px; padding-bottom:4px; } /*-- 我的鏈接 --*/ #mylink{} #mylink .box-title{} #mylink .box-text {} #mylink .box-text a{ display: block; width: 215px; background:url(https://pic.pimg.tw/hoyu0528/1564405792-1764932715.png) no-repeat top left; padding-left:15px; line-height:1.5; } #mylink li{ border-bottom: 1px dashed var(--box-line); padding-top:4px; padding-bottom:4px; } /*-- 參觀人氣 --*/ #counter{} #counter .box-title{} #counter .box-text {} #counter li{ border-bottom: 1px dashed var(--box-line); padding-top:5px; padding-bottom:7px; padding-left:15px; } /*-- 最新註釋 --*/ #latest-comment{} #latest-comment .box-title{} #latest-comment .box-text {} #latest-comment li{ border-bottom: 1px dashed var(--box-line); padding-top:5px; padding-bottom:7px; padding-left:15px; } /*--- 好友 ---*/ #friendbox ul.friendlist{height: auto !important;} #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 .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-target{ margin: 10px 0px; padding: 2px 0px; width: 100%; border: 0px; color: #ffffff; background: var(--box-line); } #search-submit{ width:100%; border: 0px; color: #000; background: transparent; } /*-- archive --*/ #archive select{ width:230px; border: 0px; color: #ffffff; } /*-- 日曆 --*/ #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:#ddd; color:#906; 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 {} #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{ 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); } #comment-box{width:100%;} #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; } /*-- 單一 留言+回應 --*/ .post-info{ font-weight: bold; height: 20px; } .post-info a:hover{ position: relative; top: 1px; left: 1px; } .post-info .floor{ color:red; font-size: 16px; } .post-photo{ text-align: right; position: absolute; top: 10px; right: 10px; } .post-photo img{ width: 80px; height: 80px; border-radius: 50%; -moz-transition:.6s; -o-transition:.6s; transition:.6s; } .post-photo img:hover {border-radius: 0%;} .post-text{ padding: 0px 80px 10px 0px; line-height: 150%; border-bottom: 2px groove #eee; } .reply-text{ color: #888; padding: 0px 80px 0px 10px; line-height: 150%; border-left: #8fe solid 4px; } .reply-text p{ padding-top: 10px; padding-bottom: 2px; } .reply-text a{ color: #888; } .reply-text a:hover{ position: relative; top: 1px; left: 1px; } .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 .user-name a{ margin: 0 5px 0px 0px; } .post-info .user-name img, .reply-text .comment-icon{ display: none; } /* -------------留言撰寫 --------------------*/ #comment-area *{ font-size:15px !important;} #comment-area { width:92% !important } #comment-area-2 { width:100% !important; -moz-box-shadow:1px 2px 8px rgba(50,50,50,0.6); -webkit-box-shadow:1px 2px 8px rgba(50,50,50,0.6); box-shadow:1px 2px 8px rgba(50,50,50,0.6); } .comment-textarea { width: calc(99% + 7px) !important; background:rgba(180,210,240,0.2) !important; border:1px solid #ccc !important; } #comment_text { margin:3px !important; color: #2040F0 !important; background:rgba(250,250,250,0.1) !important; width:calc(99% - 8px) !important; min-height:230px ; transition: box-shadow 0.3s linear 0.1s; } #comment_text:focus{color: #333 !important; background:#fff !important; box-shadow:0px 0px 15px rgba(250,50,50,0.5);} /*--------------------- 頁尾 */ #footer{ width: 95%; padding: 30px; line-height: 200%; } #footer a:hover{ position: relative; top: 1px; left: 1px; } #footer #bottom{ padding: 10px 0px; text-align: center; } /*-------------------------------- 上下文章連結 */ #pix_article_switch{ width: 95% !important; margin-left: -660px !important; } /*-- 隱藏 ~ 不需要的元件 --*/ .tag-container-parent, .history, .forward, #article-main .showMore{display:none;} #ad-full-page, #pixblogad,#idle-pop,.author-profile, * [id*="sas_"]{display:none !important;} .article-body > div:last-child {width:0px; height:0px; margin-left: -2000px; } #bottom, .article-inread-ad, #comment-text > div {display:none} #pix-mib-unfold-ad, #sticky-sidebar-ad { display:none;}

版面設定 <<< 必看

1 - 首頁文章顯示、最好不要設定、由系統決定顯示幾行摘要。 >>>

2 - 撰寫完文章時，請插入"繼續閱讀"，建議在繼續閱讀前放入一張照片即可。

3 - 側邊欄位，兩邊都可以隨便放，不用硬放在一邊。

4 - 側邊欄位的第一個版位已被移除，所以不要去移動 側欄廣告。