はてなブログの記事一覧をカスタマイズ（CSS解説付き）【Minimalism】

「記事一覧」のブログデザインをカスタマイズしました。

パソコンから見たデザインはアイキャッチが大きく表示されるカード型にしました。

しかし、スマホから見ると画像が大きすぎて見にくいので、ミニマリズムの元からの横長デザインのままになるようにしました。

ミニマリズムの記事一覧のデザイン

 パソコンからの記事一覧

パソコンから見た記事一覧

ぱっと見た時に情報が多すぎるように感じます。

パソコンから見たときは横長のデザインではなく、カード型にして表示される情報も減らしたい。

 スマホからの記事一覧

スマホから見た記事一覧

画像が左にあり、その右側に日付とタイトルというシンプルなデザインは気に入っています。

もう少し画像を大きくしたい。

それにしてもブログタグの主張が強すぎます。

パソコンからの記事一覧のCSSはのせてません

参考にさせてもらったフジブロさんの「はてなブログのトップページをカード型にする」の記事の最後に、

「コードを紹介する場合は引用や転載はせずにリンクを明記してください」

とあったのでのせていません。

一部CSSを改変したものであってもやめたほうがいいかなと思ったので、このブログでは私が変更した部分のCSSだけ説明します。

パソコンから見た記事一覧のカスタマイズ（カード型）備忘録

ミニマリズムのデザインの「横長型」か、それとも「カード型」か迷いましたが、カード型のほうが画像が大きくて見た目もいいのでカード型にすることにしました。

参考サイト

  はてなブログのトップページをカード型にする - フジブロっ！

参考サイトの2種類あるデザインのうち「オーソドックスなカード型デザイン」のCSSを参考にしました。

カスタマイズ前後の記事一覧（パソコンから見た時）

変更したところ

• スマホで見た時には元の横長のデザインになるようにする
• 日付をタイトルの下から上に移動
• カードの角を丸くする
• タイトルの文字サイズを少し小さく、短いタイトルでも縦幅が3行ぶんになるようにする
• カテゴリーを右下に移動
• カードをマウスオーバーしたときに画像が少し暗くなるコードは削除
• 日付の文字を少し小さくし、日付とカテゴリーの文字色を薄く、カテゴリーはマウスオーバーのときに色を薄くする。

パソコンではカード型、スマホでは横長になるようにする

参考サイトのコードではスマホでみるとカードが縦に1列に並ぶようになっています。

これだとスマホの狭い画面幅に対して画像が大きすぎると感じます。

それに、スマホから見た時のミニマリズムの元々のデザインがシンプルで気に入っているのでそれをいかしたい。

なので元のコードにメディアクエリを追加しました。

画面の横幅が641px以上のときに括弧内のコードが適用されるコード。

コード全体をメディアクエリで挟みます。

@media (min-width: 641px) {
ここに記事一覧をカード型にするコード
}

カードの角を丸くする

元のデザインでは角がとがっているように感じるので丸くしました。

土台のカードの上に画像がのっているので、

土台のカードの四つ角と、画像の上側の左右の角を丸くします。

変更するのは2か所。

• カードの四隅を丸くする：0→5pxに変更

.page-archive .archive-entries .archive-entry {
    border-radius: 0 → 5px; /*カードの四隅を丸くする*/
}

• アイキャッチの上の角（2か所）だけ丸くする：0→5px 5px 0 0に変更

.page-archive .entry-thumb {
    border-radius: 0 → 5px 5px 0 0; /*アイキャッチの上の角だけ丸くする*/
}

日付をタイトルの下から上に移動、
タイトルとカテゴリーの余白を広げる

「column-reverse」の部分を「column」に変更

これで「タイトル」と「日付」の表示の順番が変わります。

タイトルとカテゴリーの余白を少し広げる。

「padding: 10px 16px 0;」を「padding: 10px 16px 10px;」に変更。

.archive-entry-header {
    flex-direction: column-reverse → colum;
    padding: 10px 16px 0 → 10px;
}  

タイトル部分の高さを固定、
タイトルの文字サイズを少し小さく

元のCSSだとタイトルの長さによってカードの縦の長さも変わります。

私はカードをタイトルの長さに関わらず同じ大きさにしたかったので、タイトル部分の高さはタイトルが3行になったときの高さに固定されるように設定しました。

「.page-archive .archive-entries .entry-title {    }」に「height: 75px」を追加

「font-size」を「18px→16px」に変更

.page-archive .archive-entries .entry-title { 
      height: 75px; 
      font-size: 18px → 16px;
}

.page-archive .entry-title a {
      font-size: 18px → 16px;
}

カテゴリーをカードの右下に移動

かつてbloggerでデザインをカスタマイズしたことがあり、そのときのコードを真似しました。

カテゴリーが2行以上になるようなら元のデザインのままがいいと思います。

6、7文字のカテゴリーが2個くらいだと1行におさまって見栄えもよし。

「.page-archive .archive-entries .categories { 　}」に以下を追加

.page-archive .archive-entries .categories {
        display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

カードをマウスオーバーしたときに画像が少々暗くなるコードを削除

以下の部分を削除

「.page-archive .entry-thumb::before {   }」

日付とカテゴリーの文字を少し小さくし、色を薄くする

タイトルに目がいくように日付の文字を少し小さく（15px→13px）し、文字の色を少し薄くしました。

アイコンの色も文字と同じになるようにしました。

カテゴリーをクリックできることがわかるように、マウスオーバーで文字の色が変わるようにしました。

.archive-date a {
    font-size: 13px;
    color: #707070;
}
.archive-date::before {
    color: #707070; /*日付の前のカレンダーのアイコンの色*/
}
.page-archive .archive-entries .categories a{
    color: #707070; 
}
.page-archive .archive-entries .categories a::before{
    color: #707070; /*カテゴリーの前のタグのアイコンの色*/
}
.page-archive .archive-entries .categories a:hover{
    color: #cccccc; /*マウスオーバーしたときの色*/
}

スマホから見た記事一覧のCSS

カスタマイズ前後の記事一覧（スマホから見た時）

元のデザインからの変更点

• 画像を大きく
• タイトルの文字を大きく
• ブログタグを非表示
• スマホで見る時には横長のデザインのままになるように設定を付けたす

/*記事一覧（スマホ）*/
@media screen and (max-width: 640px) {
.page-archive .entry-thumb {
    background-size: cover;
    background-position: center;
    width: 160px;
    height: 90px;
}
.archive-entry-header {
    width: calc(100% - 180px);
}
.page-archive .archive-entries .entry-title {
    font-size: 16px;
}
.archive-entry-tags-wrapper { /*はてなブログタグを消す*/
    display: none;
}
}

スマホから見た記事一覧のカスタマイズ（横長）備忘録

スマホから見る記事一覧のデザインはミニマリズムの元の横長デザインのままになるようにしました。

アイキャッチを大きくしたり、ブログタグを消したり、いくつかデザインを調整しました。

スマホから見る時は横長

画面が狭くなると横長タイプの記事一覧に切り替わるようにします。

画面の幅が640px以下になると括弧内の記述が適用されます。

@media screen and (max-width: 640px) { 
ここにコードを書く
}

 メディアクエリとは

ブレイクポイントを指定するために書くCSSのコード

今回でいうと「@media screen and (max-width: 640px)」のこと

 ブレイクポイントとは

デザインの表示を切り替えるポイント

ブレイクポイント（640px）はミニマリズムの元の設定のままにしています。

ブレイクポイント

• パソコンのブレイクポイント：960～1280px
• タブレットのブレイクポイント：768～1280px
• スマホのブレイクポイント：767px以下

参考サイト

  【2024年】デバイス別レスポンシブデザインのブレイクポイントまとめ｜Webサイト制作・CMS開発｜LeadGrid

アイキャッチを大きくする

画像が小さく感じたので大きくしました。

画像は横16：縦9の比率になるようにしました。

/*アイキャッチ*/
.page-archive .entry-thumb {
    background-size: cover;
    background-position: center;
    width: 160px; /*画像の横幅*/
    height: 90px; /*画像の縦幅*/
}

タイトルの横幅を調整

画像を大きくしたら横並びにおさまらなくなってしまったので、画像の横にタイトルが収まるように調整しました。

/*ブログタイトル*/
.archive-entry-header {
    width: calc(100% - 180px); /*左側にアイキャッチ分の間をあける*/
}

はてなブログタグを消す

記事一覧にはブログタグは必要ないと思ったので非表示にしました。

/* 記事一覧のはてなブログタグを消す*/
.archive-entry-tags-wrapper {
    display: none;
}

パソコンから見た記事一覧のカスタマイズ（横長型）

当初はパソコンから見た時も横長型のデザインにしようと思いカスタマイズしていました。

パソコンから見た記事一覧（横長型）【Minimalism】

元のデザインから引き算し、スマホで見た時のようなデザインになるようにしました。

/*アイキャッチの大きさ*/
.page-archive .entry-thumb { 
    width: 180px; 
    height: 120px;
}
/*タイトルをアイキャッチの右側にする*/
.archive-entry-header {
    width: calc(100% - 220px);
    float: right;
}
/*記事一覧の本文を消す*/
.entry-description {
    display: none;
}
/*記事一覧のカテゴリーを消す*/
.page-archive .categories a {
    display: none;
}

終わりに

私ははてなブログproではないのでトップページを記事一覧形式にできないので残念です。

トップページ以外では記事一覧のページを見る機会はあまりないかもしれません。

それでも、アクセスしてくれた人がカテゴリー別だったり、新しい順で記事一覧を見た時に見やすいデザインであればブログ内を回遊しやすく、ブログの滞在時間も長くなるのではと期待しています。

※このブログはCSSのことを何も知らなかった私がネットで情報をかき集めて書いています。

説明が間違っていることもあるかもしれませんのでご容赦ください。

記事完成後に文字の大きさや色など微調整している部分もあり、ブログにのせたCSSと私のブログの現状のデザインが異なる部分もあります。

• カスタマイズの記事

はてなブログの見出しデザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】

はてなブログの目次デザインをカスタマイズ（CSSコピペで簡単！）【Minimalism】

はてなブログのグローバルメニューをカスタマイズ（CSSコピペで簡単！）【Minimalism】