はてなブログテーマ「Color Book」を2カラムのカード型にする方法。

当はてなブログテーマ「Color Book」のトップページを2カラム（列）のカード型にする方法を書いていきます。

ご要望がありましたので、CSSを考えてみました。

完成形

まず、2カラム（列）のカード型とはどんなものかをお見せします。

パソコン画面↓

スマホ画面↓

ワードプレステーマ「JIN」を意識して作りました。

もちろん「Color Book」の良さも残してあり、このように背景画像や背景色を付けられます↓

背景画像や背景色を付ける場合は、「デザイン」→「カスタマイズ（スパナのアイコン）」→「背景画像」または「背景色」から設定してください↓

CSS

それでは「Color Book」のトップページを2カラムのカード型にする方法を書いていきます。

下記のCSSを「デザイン」→「カスタマイズ（スパナのマーク）」→「デザインCSS」に貼り付けてください↓

/*------------------------2列カード型に---------------------------*/
.page-archive .archive-entry{
  flex-direction:column;
  height:auto;
  width:48%;
  margin-left:0;
  margin-right:0;
}
.archive-entries{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}


.archive-entry-header{
  padding:8px;
}

/*サムネイル*/
.page-archive .entry-thumb {
  width:100%;
  height:115px;
  border-radius:5px;
}

/*カテゴリー*/
.archive-entry .categories{
  margin:0;
  position:absolute;
  bottom:auto;
  right:auto;
  top:5px;
  left:5px;
}

.categories a{
  padding:5px 5px 3px;
  font-size:9px;
}

/*記事タイトル*/
.page-archive .entry-title{
  margin-bottom:25px;
}


/*日付*/
.archive-entry .date{
  position:absolute;
  bottom:-3px;
  right:10px;
}

.date a{
  font-size:11px;
}




/*------------タブレット画面-------------*/
@media(min-width: 480px){

/*サムネイル*/
.page-archive .entry-thumb {
  height:155px;
}

/*記事タイトル*/
.page-archive .entry-title{
  margin-bottom:50px;
  margin-top:15px;
}

/*日付*/
.date{
  bottom:0px;
}

.date a{
  font-size:13px;
}


}



/*------------パソコン画面-------------*/
@media(min-width: 991px){

/*サムネイル*/
.page-archive .entry-thumb {
  height:185px;
}

/*記事タイトル*/
.entry-title{
  font-size:18px;
}

/*カテゴリー複数表示になるので上下くっつかないように*/
.categories a{
  margin-bottom:5px;
  font-size:10px;
}


}
/*------------------------カード型ここまで---------------------------*/

以上です。