はてなブログ公式テーマ"Report"を見栄えよくする|俺流CSSカスタマイズ
どうも、俺俺です。またちょっとテーマの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メタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
Sass&Compass 徹底入門 CSSのベストプラクティスを効率よく実現するために
- 作者: Wynn Netherland,Nathan Weizenbaum,Chris Eppstein,Brandon Mathis
- 出版社/メーカー: 翔泳社
- 発売日: 2014/03/25
- メディア: Kindle版
- この商品を含むブログを見る