あいすのブログ

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

f:id:sera1098:20170930234617j:plain:w700

こんにちは,あいすです.

アイキャッチ画像って頑張って作っても,小さく表示されるのであまり目立たないですよね...

そこで今回は,アイキャッチ画像を最大限活かせるカード型レイアウトのカスタマイズ方法をシェアします!

このページで紹介するカスタマイズはレスポンシブではありません. レスポンシブに設定している方はスマホでの表示がくずれますのでご注意ください

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

まずは,カード型レイアウトにすると見やすさがこんなに違うよ!ということをお話しします.

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

カスタマイズ前の画像とくらべてみましょう.

f:id:sera1098:20170930201042j:plain:w700

f:id:sera1098:20170930195723j:plain:w700

カスタマイズ前の記事一覧は,アイキャッチ画像が小さくて概要やはてなスターがごちゃごちゃしていますが,カード型レイアウトでは無駄なモノがなくアイキャッチが一番最初に目に入ります!

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

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

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

今回紹介するカスタマイズ

今回紹介するカード型レイアウトは「アイキャッチが主役」です.

完成イメージがこちら!

f:id:sera1098:20170930195723j:plain:w700

カスタマイズを作成した当初 (2017年10月) 使っていたテーマと現在使っているテーマが違うので,デモページはありません.ご了承ください.

ちなみに,カスタマイズを作成した当初に使っていたテーマは「Minimalism」,現在使っているテーマは「UnderShift」です.

アイキャッチを主役にするために工夫したことをいくつか紹介します!

1. 極力シンプルに

アイキャッチが主役なので,はてなスターや記事の概要は消しました.

その結果,記事一覧に表示されているのは「アイキャッチ」「日付」「カテゴリ」だけ!

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

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

カテゴリ名が長いと背景からはみ出すことがあります.ご注意ください.

カスタマイズ方法

それではカスタマイズ方法に移りましょう!

変更する場所

今回はCSSだけを変更します.

CSSを追加する場所は,「管理画面」→「デザイン」→「カスタマイズ(スパナのマーク)」→「デザインCSS」です

1つずつ見ていきますね.

デザインの,

f:id:sera1098:20170905231202p:plain


カスタマイズの,

f:id:sera1098:20170905231300p:plain


ここです!

f:id:sera1098:20170905231322p:plain

追加するCSS

先ほど説明した場所に次のCSSを追加してください.追加する場所はどこでも構いません.

あとから自分好みにカスタマイズしたいなら,編集しやすい1番上がおすすめです.

すでに記事一覧の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%;
  padding-top:210px;
  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;
}

自分好みにカスタマイズしよう!

このカスタマイズでは元のテーマのデザインをそのまま受け継ぐので,日付やカテゴリ,記事の概要などのデザインは人によって変わります.
ぼくは,こどみすさんのMinimalismのデザインが引き継がれています.
テーマによっては,このカスタマイズと相性が悪く,上手くいかないかもしれません.ご了承ください.

カードの大きさを変えたい

背景の色やアイキャッチのサイズを変えられます.

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

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

記事の概要を表示したい

今回のカスタマイズでは記事の概要は消してありますが,display : none;を消せばもう一度表示させることができます.

アイキャッチの横幅を変えたい

残念ながら,カード自体の大きさを固定しているので,アイキャッチの横幅は変更できません.

縦幅は自由に変更できます.heightの値を変えてみてください.

日付を消したい

.page-index .date{
    display : none;
}

とすると日付が消えます.

日付のデザインを変えたい

.page-index .date{  }

デザインをかえたいときは、上に示したカッコの中にカスタマイズを書いてください.

カテゴリを消したい

.page-index .archive-entries .categories {
    display : none;
}

とするとカテゴリが消えます.

カテゴリのデザインを変えたい

.page-index .archive-entries .categories {  }

デザインをかえたいときは、上に示したカッコの中にカスタマイズを書いてください.

カテゴリはいつもの位置がいい

カテゴリをいつもの場所に戻したいときは,top:0; と left:0; を消してください.

はてなスターはやっぱり欲しい!

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

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

2カラムにならないときは

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

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

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

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

アイキャッチはなくてもいいの?

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

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

f:id:sera1098:20170930195907j:plain

最後に

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

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


それではまた!


参考にしたページ一覧

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


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

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

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