痞客邦|網頁版型物件|免費CSS樣式語法，直接複製貼上－倉鼠日常

Yellow and Turquoise Vivid Professional Static Quote General News Instagram Post

痞客邦的後台其實有開放讓管理者修改CSS樣式，可以客製化喜歡的樣式，在電腦版頁面可以看到更豐富多元的呈現，但是後台看到的CSS碼其實有幾個問題: 因為有經壓縮過，所以不像一般編輯模式有排版，反而所有的語法都縮成一體沒有分段，看起來像一堆密碼符咒...，對有CSS語法概念的朋友來說，要找到相應的樣式也需要花一些時間，何況對沒有CSS語法概念的朋友來說，更需要一段時間上手。所以今天倉鼠想要公開分享「倉鼠日常」使用到的版型物件CSS樣式語法，如果這個樣式你也喜歡，歡迎直接複製貼到你的後台唷~!

(目前這個頁面主要是提供首頁的樣式，內頁的樣式會在之後陸續提供)

CSS樣式項目

預覽文章排列(第2,3、5,6、8,9則文章並排)
文章分類標籤
繼續閱讀按鈕(變色按鈕)
側欄標題的框線與背景
隱藏作者、留言數、人氣數、文章標籤(只有在首頁)
頁碼

使用說明

看到喜歡的樣式，選取並複製相關的CSS語法
到「我的部落格後台」->「樣式管理」->「部落格CSS原始碼」
在最下面語法的最後貼上剛剛複製的CSS語法

小提示

如果你想要確保所有的樣式套用都可以相同(取得最大的相容性)，你可以在「樣式管理」選擇「七月預設主題水淺聰」

1. 預覽文章排列(第2,3、5,6、8,9則文章並排)

/*首頁文章顯示*/
#main .article{width:100%;float:none;}#main .article:nth-child(2),#main .article:nth-child(3),#main .article:nth-child(5),#main .article:nth-child(6),#main .article:nth-child(8),#main .article:nth-child(9){width:calc(50% - 20px);float:left;padding:0 10px;}

2.文章分類標籤

/*文章分類標籤*/
.box-title.entry-title{border: 0px solid;border-image-slice: 1;border-top-width: 3px;border-image-source: linear-gradient(to left, #58b2dc, #523ad5);background-color: rgba(102, 102, 102, 0.05);}#links #sidebar__inner{background-color: rgba(102, 102, 102, 0.05);}

3.繼續閱讀按鈕(變色按鈕)

/*首頁繼續閱讀按鈕*/
.more a{background-image: linear-gradient(to right, #861a54, #054f7d, #00a7cf, #efe348, #861a54);background-size: 600%;background-position: 0 0;box-shadow: inset 0 0 5em rgba(0,0,0,.5);animation-duration: 20s;animation-iteration-count: infinite;animation-name: gradients;}

@keyframes gradients {
0% {background-position: 0 0;}
25% {background-position: 50% 0;}
50% {background-position: 90% 0;}
60% {background-position: 60%;}
75% {background-position: 40%;}
100% {background-position: 0 0;}
}

4.側欄標題的框線與背景

/*側欄位設定*/
#archives-main.refer li a,#blog-main .refer li a,#category-main .refer li a{border-right:0px solid #fff;border-top:0px solid #fff;border-bottom:0px solid #fff;border: 0px solid;border-image-slice: 1;border-left-width: 9px;border-image-source: linear-gradient(to bottom, #58b2dc, #523ad5);background-color: rgba(102, 102, 102, 0.05);color:#006ac6;background:#ebedf0}

5. 文章預覽的地方隱藏作者、留言數、人氣數、圖片、文章標籤(只有在首頁)

隱藏作者

/*首頁文章預覽中隱藏作者*/
body#blog-main #main .author{display:none;}

隱藏留言人氣數

/*首頁文章預覽中隱藏留言人氣數*/
body#blog-main #main .author > a, body#blog-main #main .author-views{display:none;}

隱藏圖片

/*首頁文章預覽中隱藏圖片*/
body#blog-main #main .article img{display:none;}

隱藏文章標籤

/*首頁文章預覽中隱藏文章標籤*/
#main .article .article-keyword.article-list-tags{display:none;}

6. 頁碼

/*頁碼*/
.page { text-align: center; float: none; display: table; width: 100%; height: 30px; } .page span { background: #5678d9; padding: 9px 20px; color: #e8e8e8; font-size: 22px; font-weight: 900; border-radius: 100%; } .page a { background: 0 0; padding: 9px 22px; margin: 0 3px; font-size: 22px; font-weight: 900; transition: background .3s; }

CSS相關文章