はてなブログ公式テーマ"Report"を見栄えよくする｜俺流CSSカスタマイズ

f:id:oresamapedia:20150313103150j:plain

どうも、俺俺です。またちょっとテーマのCSSをカスタマイズして、見栄えをちょっとだけ変えてみました。

他の人が使っているテーマとちょっと違うものを、手間をかけずに簡単に短時間で作り上げられたら良いなと思ってシェアします。

圧縮済みCSS

少しでも読み込み速度をアップさせたい人はこちらをカスタムCSSに貼付けてください。

@import"/css/theme/report/report.css";@import"http://fonts.googleapis.com/earlyaccess/notosansjapanese.css";.entry-content{font-family:"Noto Sans Japanese",serif} .entry-see-more{font-size:30px} .leave-comment-title{font-size:30px;margin-bottom:20px;padding:10px;position:relative;z-index:2;color:#fff;line-height:50px;display:block !important;width:40%;border:2px solid #357acf;background:#357acf;} body{background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/o/oresamapedia/20150305/20150305182422.jpg) no-repeat left top fixed;} a.leave-comment-title{color:white;} a.leave-comment-title:visited{color:gray;} .leave-comment-title:hover{border-color:#59b1eb;color:#59b1eb;text-decoration:none;background:#fff} .leave-comment-title{-webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;text-align: center;} .leave-comment-title::before,.leave-comment-title::after{top:0;width:50%;height:100%;background:#333;} .leave-comment-title::before{right:0} .leave-comment-title::after{left:0} .leave-comment-title:hover::before,.leave-comment-title:hover::after{width:0;background:#59b1eb} .comment-box{margin:10px 0 0} .comment{margin:20px 0 0} #title{font-size:50px;float:none} #blog-description{font-size:16px;margin:5px 0 0 20px} a.entry-see-more{color: white;background: red; display: block; width: 50%; height:100%; padding:10px 0 10px 0; text-align: center; font: white; font-weight: bold; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .entry-see-more:visited{color:white;} a.entry-see-more:hover::before, a.entry-see-more::hover::before{background:white;}

整列済み標準CSS（上記CSSと同じ内容です）

@import "/css/theme/report/report.css";
@import "http://fonts.googleapis.com/earlyaccess/notosansjapanese.css";

.entry-content
{
font-family:"Noto Sans Japanese",serif;
}

.entry-see-more
{
font-size:30px;
}

.leave-comment-title
{
font-size:30px;
margin-bottom:20px;
position:relative;
z-index:2;
color:#fff;
line-height:50px;
display:block !important;
width:40%;
border:2px solid #357acf;
background:#357acf;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
text-align:center;
padding:10px;
}

body
{
background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/o/oresamapedia/20150305/20150305182422.jpg) no-repeat left top fixed;
}

a.leave-comment-title:visited
{
color:gray;
}

.leave-comment-title:hover
{
color:#59b1eb;
text-decoration:none;
background:#fff;
border-color:#59b1eb;
}

.leave-comment-title::before,.leave-comment-title::after
{
top:0;
width:50%;
height:100%;
background:#333;
}

.leave-comment-title::before
{
right:0;
}

.leave-comment-title::after
{
left:0;
}

.leave-comment-title:hover::before,.leave-comment-title:hover::after
{
width:0;
background:#59b1eb;
}

.comment-box
{
margin:10px 0 0;
}

.comment
{
margin:20px 0 0;
}

#title
{
font-size:50px;
float:none;
}

#blog-description
{
font-size:16px;
margin:5px 0 0 20px;
}

a.entry-see-more
{
color:#FFF;
background:red;
display:block;
width:50%;
height:100%;
text-align:center;
font:#FFF;
font-weight:700;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
padding:10px 0;
}

a.entry-see-more:hover::before,a.entry-see-more::hover::before
{
background:#FFF;
}

a.leave-comment-title,.entry-see-more:visited
{
color:#FFF;
}