【カスタマイズ】はてなブログのテーマ「Report」の見栄えを良くする｜魔法のカスタマイズCSS

f:id:oresamapedia:20150305231548p:plain

今日は俺俺ペディアをカスタマイズして、見栄えの良いものにしました。俺俺はReportというテーマを元に今回広告を消したり、タイトルを調整したり、コメントを読み易くしたりしました。（はてな利用規約６条3.gに該当する事が分かったので広告は表示する事となりました。）

背景やヘッダーははてなブログの設定から簡単に変えられるので説明は省略します。

今後同じようにカスタマイズしたい人のために、私の使っている「デザイン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(自分で使いたい画像ファイルのURL) no-repeat left top fixed}
.leave-comment-title:hover{border-color:#59b1eb;color:#59b1eb;text-decoration:none;background:#fff}
.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}