カスタマイズ例

Plainのカスタマイズ例をご紹介します。
デザインCSSを用意しているので、参考にご利用ください。（デザインCSSの貼り方）

kamulogのテーマ

id:kamusoft さんのブログ kamulogの例です。
許可をいただきデザインCSSを掲載しています。参考にご利用ください。
（まるごとのコピーはご遠慮ください）

見本

実際のブログです。
kamusoft.hatenablog.jp

デザインCSS

※長いのでスクロールしてください

#main{
    border: none !important;
    padding: 0 !important;
    width: 790px;
} 
#box2{
    width: calc(300px + 2rem);
}

/* ---------- タブレットサイズから１カラムにする ----------*/
/* Media Queries - tablet */
@media (max-width: 1175px) {
    #content-inner
    {-webkit-flex-direction:column;
     -moz-flex-direction:column;
     -ms-flex-direction:column;
     -o-flex-direction:column;
     flex-direction:column;}
    #content-inner > *
    {margin:0 auto;}
    #blog-title
    {margin:0 auto;width:80vw;}
    #container
    {padding-top:37px;} /*上の隙間をなくす（はてなグローバルヘッダ非表示の場合は0px）*/

    /*パンくずリストの調整*/
    #top-box{margin:-2em auto auto 2em;}

    /*#mainのwidth調整*/
    #main
    {width:80vw;}

    /*サイドバー調整*/
    #box2
    {width:100vw;padding-top:4em;}
    #box2-inner
    {display:flex;justify-content:center;flex-direction:row;align-items:flex-start;
     -webkit-flex-wrap:wrap;
     -moz-flex-wrap:wrap;
     -ms-flex-wrap:wrap;
     -o-flex-wrap:wrap;
     flex-wrap:wrap;}
    .hatena-module
    {width:360px;box-sizing:content-box;margin:0.5em;background:none;border:solid 1px #aaa;}
}
@media (max-width:816px) {
    .hatena-module{width:336px;}
}
@media (max-width: 802px) {
    #main{width:90vw;}
}
@media (max-width: 767px) {
    #top-box{margin:-3.4em auto auto 0;}
    #main{width:100vw;}
    .hatena-module
    {width:100%;margin:0;border:none;}
    #box2
    {padding-top:0;}
    #container
    {margin-bottom:0;}
}
/* ----------/ タブレットサイズから１カラムにする----------*/

/* Media Queries - mobile */
@media (max-width: 767px) {
    #box2
    {width:100%;
     margin-left:0;
     margin-top:2em;}
    #blog-title, #main
    {width:100vw;padding-left: 10px;}
    #top-box, #blog-title
    {margin-left:0;}
    #top-box
    {padding-left:1em;
     margin-top:-2em;}

    #container
    {padding-top:37px;}
    #main
    {margin-top:0em;}

    .page-index #main
    {padding-top:0;}
    .page-index .archive-entry
    {margin-bottom:-1px;}

    .page-archive #main
    {padding:0;
     border:none;}
    .page-archive .archive-header-category, .page-archive .search-result
    {padding:0.5em 0 0.5em 1.5em;}
    .page-archive .archive-entries .archive-entry
    {margin:0;
     border-bottom:none;
     border-top: solid 1px #eee;}
    .hatena-module
    {margin-bottom:0;}
}

/*サイドバーを下げる*/
#box2
{margin-top:2rem;}



/*----------カスタマイズ部分----------*/
/*----全体----*/
#title{
    font-family: 'Ubuntu', sans-serif !important;
}
#title a{
	color: #444444;
}
body{
    background-color:#fffffb;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif　!important;
}
#content{
    background-color:#fffffb;
}
#blog-title{
	background-color: transparent;
	color:#444444;
	height: 140px !important;
}

#blog-title-inner{
	padding: 32px 0 32px 0 !important;
}

/*----記事ページ----*/
.entry-inner{
    border:none !important;
	padding: 0 !important;
}

.entry-date{
    margin-left:8px;
}

.entry-title{
  background-color: #f8f8f8;
  border-top: 1px dotted #afc5ca;
  border-bottom: 1px dotted #afc5ca;
  padding:12px 8px 12px 8px;
  font-size:22px;
}
.entry-title a{
	color:#555555 !important;
}

.entry-header{
	border:none !important;
}

.entry-content{
	border: none !important;
	line-height: 1.8 !important;
}

.entry-content h3{
  border-left: 3px solid #afc5ca;
  border-bottom: 1px dotted #afc5ca;
  padding:3px 8px 5px 12px;
  margin-top: 24px;
  margin-bottom: 16px;
  font-size:18px;
  color: #555555;
}
.entry-content h4{
    font-size:17px;
    padding-left:8px;
    color:#555555;
}

.entry-content > p{
    padding:0 8px 0 8px;
}

.entry-content  a{
	text-decoration-style:dotted;
}
.entry-content > p a:not(.keyword){
  text-decoration:none;
  color:#00A0B0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.entry-content > p a:not(.keyword):hover{
    color:#555;
    background:rgba(0,210,255,0.7);
    text-decoration:none;
}

.entry-content .entry-see-more{
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid #b4b4b5;
  display: block;
  height: 30px;
  width: auto;
  line-height: 30px;
  text-align: center;
  padding: 0 16px 0 16px;
  color: #595757 !important;
  background-color: #f8f8f8;
  margin:0 8px 0 8px;
  text-decoration: none;
}

/*----サイドバー----*/
.hatena-module{
    background-color: transparent !important;
}
.hatena-module-title,.hatena-module-title a{
	color:#555555 !important;
}

/*----検索ボックス----*/
form.search-form .search-module-button{
	background: transparent url(http://blog.hatena.ne.jp/images/theme/search.png) no-repeat right center !important;
	background-position: center !important;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	color: transparent;
}
form.search-form .search-module-button:hover{
	color: transparent;
}

/*----カテゴリー----*/
.categories{
    margin-top:10px;
    margin-bottom:10px;
}
.categories a{
    border:0px solid #000000 !important;
    margin:0 4px 0 4px !important;
    padding:0 4px 0 4px !important;
    float:right;
    color:#888888;
    background-color:rgba(215,238,243,0.9);
    font-size:75%;
}
.categories a:hover{
     background-color: rgba(0,210,255,0.7);
}

/*----ページャー----*/
.pager-prev a,.pager-next a {
	text-decoration:none;
	color:#00A0B0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.pager-prev a:hover,.pager-next a:hover {
	color:#555;
    background:rgba(0,210,255,0.7);
    text-decoration:none;
}

/*----はてなフッター---*/
#footer{
	text-align: center;
}

/*----PRE----*/
.entry-content pre.code {
    background-color: #fafafa;
    color: #555555;
    border:1px solid silver;
}


/*----目次----*/
.table-of-contents::before
{content:"目次";
 margin-bottom:0.6em;
 display:block;}

.table-of-contents
{background:#fff;
 border-left:dotted 1px #afc5ca;
 margin:0 0.5em;
 padding:0 1em;}

.table-of-contents a
{text-decoration:none;
 color:#7d9ab7;}

.table-of-contents li
{display:block;}

.table-of-contents ul
{padding-left:1.5rem;}

.table-of-contents > li
{margin-top:0.4em;}

.table-of-contents > li > a
{border-left: 2px solid #afc5ca;
 padding: 3px 8px 5px 12px;}

.table-of-contents ul li
{font-size:90%;}

.table-of-contents ul ul li
{font-size:80%;}

@media (min-width: 768px) {
    .table-of-contents > li
    {margin-left:1em;}
}
@media (max-width: 767px) {
    .table-of-contents > li
    {margin-left:0;}
}

Block Memo風

はてな公式テーマのBlock Memo風です。

/*サイドバーを下げる*/
#box2
{margin-top:2rem;}

 /*#blog-titleを幅いっぱいに*/
#blog-title, .ontitle-menu
 {margin:0;width:100vw;}
#container
 {padding-top:37px;} /*上の隙間をなくす（はてなグローバルヘッダ非表示の場合は0px）*/

body{
font-size: 87.5%;
font-family: YuGothic,游ゴシック,Meiryo,メイリオ,Hiragino Kaku Gothic Pro,ヒラギノ角ゴシック,sans-serif;
color: #646464;
background: #f5f5f5;
margin: 0;
}

#main, article{
    background:#fff;
}

#blog-title{
background:none;
text-align:center;
}

#blog-title-inner{
text-align:center;
vertical-align:middle;
}

a, a:visited,.entry-title a,.entry-title a:visited{
color:#00aa8c;
}

.categories{
    text-align:left;
}

.categories a, .categories a:visited{
background:none;
color: #8c8c8c;
padding:0;
margin:8px 6px 0 0;
}

.categories a::before{
content:"#";
}

.date a{
font-size:87.5%;

}

#footer-inner{
text-align:center;
    padding-bottom:1em;
}

#footer p{
    margin:0;
}

.hatena-module{
background:none;
}

.entry-date{
    margin-top:-1em;
    border-left:solid 3px #00aa8c;
    padding-top:80px;
    padding-left:.5em;
}