はてなブログ トップページをカードレイアウトにカスタマイズしよう!【PCのみ】

f:id:sera1098:20170930234617j:plain:w630
こんにちは、のっち(@notti_blog)です

今回は、ブログのトップページでアイキャッチ画像をいかす、カードレイアウトをシェアします!

レスポンシブデザインについて

CSSは,レスポンシブデザインを考慮していません
レスポンシブデザインの方は,スマホ表示がすごいくずれます
気をつけてください


完成イメージ

完成イメージがこちらです!

f:id:sera1098:20170930195723j:plain

わかりにくい方は、トップページへどうぞ!


極力シンプルに

はてなスター,記事の概要は消しました

アイキャッチと記事タイトルと、カテゴリだけです!


カテゴリはアイキャッチの左上

カテゴリは、みやすいようにアイキャッチの左上に配置しています


注意すること

このレイアウトは、アイキャッチがあることを前提にしています

アイキャッチ画像がない場合は、下の画像のように背景だけになります

f:id:sera1098:20170930195907j:plain


カードレイアウトのメリット

カードレイアウトは、とにかく見やすいです

カスタマイズ前の画像とくらべてみます

f:id:sera1098:20170930201042j:plain:w400

f:id:sera1098:20170930195723j:plain:w400

カスタマイズ前の記事一覧は、アイキャッチ画像が小さくて、概要やはてなスターがあり、ごちゃごちゃした印象です

でも、カードレイアウトではアイキャッチがまず目に入ってきます


ぼくの個人的な意見なんですが、記事を見るときに記事の概要ってあまり読まないんですよね

ほとんど、アイキャッチとタイトルだけで読むかどうかを決めています

だから、このカードレイアウトのほうが読者の方も見たい記事をみつけやすいんじゃないかと思っています


カスタマイズ方法


変更するところ

今回は、CSSだけを追加します

CSSを追加する場所は、

「管理画面」→「デザイン」→「カスタマイズ(スパナのマーク)」→「デザインCSS」

です

デザインの、

f:id:sera1098:20170905231202p:plain

カスタマイズの、

f:id:sera1098:20170905231300p:plain

ここです!

f:id:sera1098:20170905231322p:plain


CSS

注意!

このカスタマイズでは、はてなブログの記事一覧のCSSを編集します
すでに記事一覧のCSSをいじっている方は、CSSの要素が重なってレイアウトがくずれてしまうことがあります
要素が重ならないよう気をつけてください

.page-index .archive-entries{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
/*カード*/
.page-index .archive-entry{
  background :#f9f9f9; /*カードの背景*/
  width: 47%;          /*横幅(2カラム)*/
  padding-top:210px;   /*アイキャッチの分+10pxあける*/
  padding-left:7px;    /*左に間隔*/
  padding-right:7px;   /*右に間隔*/
  padding-bottom:10px; /*下に間隔*/
  position: relative;
}
/*記事タイトル*/
.page-index .entry-title{
  padding : 5px 0px 0px 5px;  /*タイトルの上下に間隔*/
}
/*記事の概要*/
.page-index .entry-description{
  display : none;
}
/*アイキャッチのサムネイル*/
.page-index .entry-thumb{
  display: none;
}
/*アイキャッチ*/
.page-index .entry-thumb-link{
  display: block;
  width: 100%;              /*アイキャッチの横幅*/
  height: 200px;            /*アイキャッチの縦幅*/
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
/*日付*/
.page-index .date{
  padding-top:10px;  /*上に間隔*/
  padding-left:10px; /*左に間隔*/
}
/*カテゴリ*/
.page-index .archive-entries .categories {
  position :absolute;
  top:0;      /*上に配置*/
  left:0;     /*左に配置*/
  z-index:1;  /*アイキャッチの上に配置*/
}
/*はてなスター*/
.star-container {
  display : none;
}


カスタマイズしたいときは


カード

背景の色や、カードのサイズを変えられます

padding-topは、アイキャッチ画像の height にあわせて変えます

width を小さくすれば3カラムに、大きくすれば1カラムにすることもできます


記事の概要

記事の概要は、消してあります

あったほうがいいときは、display : none;を消してください


アイキャッチ

カードで横幅を決める関係で、アイキャッチの横幅を固定しています

縦幅は自由に変更できます


日付

デザインをかえたいときは、日付 の下の要素に書いてください

いらないときは、display : none; と書いてください


カテゴリ

カテゴリは、配置を変えただけでデザインは変えていません

デザインを変えたいときは、カテゴリ の下の要素に書いてください

いらないないときは、display : none; を書いてください

いつもの場所にしたいときは、top:0; と left:0; を消してください

タイトルが長いときは、カテゴリが背景からはみ出すことがあります


はてなスター

今回は、はてなスターを消しています

あったほうがいい!という方は、display : none; を消してください


デザインについて

今回のCSSでは、日付やカテゴリ、タイトルのデザインは、こどみすさんのMinimalismのものをそのまま使っています

そのため、カードレイアウトにしても、いま使っている日付やカテゴリ、タイトルのデザインはそのまま引き継がれます


2カラムにならない人へ

ページの幅によっては,最初からは2カラムにならないことがあります

このページは,全体が 1400px,記事部分(サイドバーを除いた部分)は 860pxです

これより小さい方は,1カラムになるかもしれません

その場合は,ページを大きくするか,カードを小さくする必要があります


最後に

今回は、記事一覧をカードレイアウトにするカスタマイズを紹介しました

カードの大きさを変えたり、デザインを変えたりして、オリジナルのカードデザインをつくってみてください!


それではまた!

参考にしたページ一覧

ありがとうございました!


カードレイアウト
はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM

はてなスターの消し方
はてなブログの記事一覧でのはてなスターの表示を消すのでR | なるへそゴマのすけのなるへそな教室

カテゴリ部分のカスタマイズ
【はてなブログ】カテゴリ部分のカスタマイズ - simon's note