俺俺ペディア

マレーシアに旅行、移住、留学する前に読んでおくと便利なブログ。言語を学んでいる人や、外国語をステップアップさせたい人へのアドバイスも絶賛提供中です。

はてなブログ公式テーマ"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;
}

 

テーマReportを適応してから、カスタムCSSに貼付けるだけで、私のブログのような感じになるはず。

誰かのお役に立てることができれば光栄です。 

 

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

 

 

Sass&Compass 徹底入門 CSSのベストプラクティスを効率よく実現するために

Sass&Compass 徹底入門 CSSのベストプラクティスを効率よく実現するために

 

 

広告を非表示にする