はてなブログのデザインテーマを変更してカード型にしました

デザインテーマを変更して、トップページをカード型にしました。

備忘録として残します。

デザインテーマを変更する前にやること

デザインcssのバックアップを取ろう。

テーマを変更すると、デザインcssは消えてしまいます。

デザインcssをメモにコピーしておきました。

デザインcssはここにある

ダッシュボードの「デザイン」

↓

スパナマーク（カスタマイズ）

↓

デザインｃｓｓ

とりあえず全部コピーしておきました。

パソコンであればキーボードのＣＴＲＬ＋Ａで全選択できますので、

ＣＴＲＬ＋Ｃでコピーです。

貼り付けはＣＴＲＬ＋Ｖです。

デザインテーマを選ぼう

ダッシュボードの「デザイン」

↓

パレットマーク（デザインテーマ）

↓

テーマストアでテーマを探す

↓

テーマストア

このテーマストアで好きなテーマを選びます。

今回は、「Ｉｎｎｏｃｅｎｔ」というテーマを使用させていただきました。

その理由は、つなろっくさんのブログを見てリスペクトしたいなって思ったからです。笑

つなろっくさんのブログ 

はてなブログ「innocent」にCSSでトップページをカード型一覧形式にしてみました。 - つなろっく

つなろっくさんはすごく分かりやすく書いてあるのでよく参考にします。

今回も参考にさせてもらいました。

デザインテーマ「Ｉｎｎｏｃｅｎｔ」をカード型にしましょう

最初から作るのは、大変なのでつなろっくさんの先ほどの記事にｃｓｓが貼ってあるのでコピーさせていただいてデザインｃｓｓに貼りつけます。

わたしがカスタマイズした内容を説明します

①カテゴリのフォントサイズを変更する

②カードに外枠点線を付ける

③はてなスターを消す

④日付の色と背景を変更し傾きを付ける

⑤スマホの時は、カードの外枠を消す

以上の変更をしました。

ｃｓｓの詳細を説明します。

①カテゴリのフォントサイズを変更する

カテゴリのフォントサイズを１０ピクセルから１２ピクセルに変更しました。

下のｃｓｓの４行目の数字を変更すれば変えることができます。

    
.page-index .categories {
　background:#e0ffff;
　order: 2;
　font-size: 12px;
　font-weight: bold;
}

ちなみに、２行目で背景色の変更、５行目で太字です。

boldのところをnormalにすれば、通常の太さ。

bolderにすれば、太字よりも太字、極太ですね。

lighterにすれば、細字よりも細字、極細に変わります。

②カードに外枠点線を付ける 

カードの外枠を点線にしました。

下記のｃｓｓを追加しました。 

.page-index .archive-entry {
  border: dotted #ccc;
  border-radius: 8px
}

２行目で点線と色を指定しています。

３行目は角の丸みです。

ちなみに８pxの所を５０％にすると円になります。

今回は５０％にしない方がいいと思いますが。

③はてなスターを消す

はてなスターの表示を非表示にしました。

下記のｃｓｓを追加しました。

.page-index .archive-entry-body,
.social-buttons{
 display:none;
 order: 4
} 

④日付の色と背景を変更し傾きを付ける

下記ｃｓｓを追加しました。 

.page-index .date {
 position: absolute;
 top: 13px;
 left: 4px;
 z-index: 10;
 color: #0000ff;
 background:#ffff00;
 padding: 0px 5px;
 transform: rotate(-21deg);
}

６行目で日付の色を変えます。

７行目で背景を追加しました。

３、４行目は位置決めです。

８行目は文字と背景の周囲の空間設定です。

９行目で傾きを設定しています。

⑤スマホの時は、カードの外枠を消す

②で外枠の点線を追加しましたが、スマホの時は非表示にしました。

下記ｃｓｓをスマホの設定の方に追加しました。

.page-index .archive-entry {
border: none;
}

以上で今のデザインとなりました。

仕上がったトップページ