「記事一覧」のブログデザインをカスタマイズしました。
パソコンから見たデザインはアイキャッチが大きく表示されるカード型にしました。
しかし、スマホから見ると画像が大きすぎて見にくいので、元の横長のデザインのままにして画像の大きさを調整しました。
私ははてなブログproではないのでトップページを一覧表示にはできませんが、ブログにアクセスした人がブログ内をまわるときには役に立つのではないかと思います。
- ミニマリズムのデフォルトの記事一覧のデザイン
- はてなブログタグを消す（スマホ、パソコン共通）
- スマホから見る記事一覧のカスタマイズ（横長）
- パソコンから見る記事一覧のカスタマイズ（カード型）
- パソコンから見る記事一覧のカスタマイズ（横長型）＊途中まで
- 私がカスタマイズした記事一覧のCSS
- 終わりに
ミニマリズムのデフォルトの記事一覧のデザイン
スマホからの記事一覧
画像が左にあり、その右側に日付とタイトルというシンプルなデザインは気に入っています。
しかし、もう少し画像を大きくしたい。
そして、ブログタグの主張が強すぎます。
パソコンからの記事一覧
ぱっと見た時、情報が多すぎるように感じます。
画像を大きくして、その他はもっとそぎ落としてシンプルにしたい。
はてなブログタグを消す（スマホ、パソコン共通）
記事一覧にのせなくてもいいかなと思うので消しました。
特にスマホから見る記事一覧ではブログタグの主張が強すぎます。
/* 記事一覧のはてなブログタグを消す*/
.archive-entry-tags-wrapper {
display: none;
}スマホから見る記事一覧のカスタマイズ（横長）
スマホからみる記事一覧のデザインは元のミニマリズムのデザインをいかしながら、自分の好みに少しカスタマイズしました。
「@media screen and (max-width: 640px)」←このコードのことを一度ちゃんと調べたいなと思っていたので、この機会に調べてみました。
メディアクエリ
メディアクエリとは
ブレイクポイントを指定するために書くCSSのコード
今回でいうと「@media screen and (max-width: 640px)」のこと
ブレイクポイントとは
デザインの表示を切り替えるポイント
ブレイクポイントは元の設定のままにしています。
画面の幅が640px以下になると括弧内の記述が適用されます。
@media screen and (max-width: 640px) {
ここにコードを書く
}アイキャッチを大きくする
文字よりも画像のほうが目をひくと思うので画像を大きくしました。
アイキャッチは横3：縦2の比率になるようにしました。
/*アイキャッチ*/
.page-archive .entry-thumb {
background-size: cover;
background-position: center;
width: 135px; /*画像の横幅*/
height: 90px; /*画像の縦幅*/
}タイトルの横幅を調整
画像を大きくしたらタイトルがおさまらなくなってしまったので調整しました。
/*ブログタイトル*/
.archive-entry-header {
width: calc(100% - 155px); /*左側にアイキャッチ分の間をあける*/
}
カスタマイズした結果、このようなデザインになりました。
アイキャッチが大きくなり見やすくなりました。
やっぱり字よりも画像のほうが目をひきます👀
パソコンから見る記事一覧のカスタマイズ（カード型）
ミニマリズムのデザインの「横長型」か、それとも「カード型」か迷いましたが、カード型のほうが画像が大きくて見た目もいいのでカード型を選びました。
2種類あるデザインのうち「オーソドックスなカード型デザイン」のCSSを参考にしました。
変更したところ
- スマホで見た時には元の横長のデザインになるようにする
- カードの角を丸くする
- 日付をタイトルの下から上に移動
- カテゴリーを右下に移動
- 日付とカテゴリーの文字を少し小さくし、色を薄くする
- タイトルの文字を少し小さくし、タイトル部分の縦の幅が3行ぶんになるように固定する
- カードをマウスオーバーしたときに画像が少々暗くなるコードは削除
こちらの参考サイトからのCSSの引用・転載はできないので、部分的に変更したコードを紹介しようと思います。
変更したコード、追加したコードはわかりやすいように赤くしました。
スマホで見た時には元の横長のデザインになるようにする
参考サイトのコードではスマホでみるとカードが縦に1列に並ぶようになっています。
これだとスマホの狭い画面幅に対して画像が大きすぎると感じます。
それに、スマホから見た時のミニマリズムの元々のデザインがシンプルで気に入っているのでそれをいかしたい。
なので、元のコードにメディアクエリを追加しました。
画面の横幅が641px以上のときに括弧内のコードが適用されるコード。
コード全体をメディアクエリで挟みます。
元のCSSにはコードのなかにメディアクエリが入っていますがその部分は削除。
@media (min-width: 641px) {
記事一覧をカード型にするコード
}カードの角を丸くする
元のデザインでは角がとがっているように感じるので、丸くしました。
変更するのは2か所。
- カードの四隅を丸くする：0→5pxに変更
.page-archive .archive-entries .archive-entry {
border-radius: 5px; /*カードの四隅を丸くする*/
}- アイキャッチの上の角（2か所）だけ丸くする：0→5px 5px 0 0に変更
.page-archive .entry-thumb {
border-radius: 5px 5px 0 0; /*アイキャッチの上の角だけ丸くする*/
}日付をタイトルの下から上に移動
「column-reverse」の部分を「column」に変更
これで「タイトル」と「日付」の表示の順番が変わります。
.archive-entry-header {
flex-direction: column;
}カテゴリーをカードの右下に移動
かつてbloggerでデザインをカスタマイズしたことがあり、そのときのコードを真似しました。
.page-archive .archive-entries .categories { }に以下を追加
display: flex; flex-wrap: wrap; justify-content: flex-end;
カテゴリーの数が多かったり、長い文字だと2行になりますが、それはちょっと見栄えが悪いかも。
6、7文字のカテゴリーが2個くらいだと1行におさまって見栄えもよし。
日付とカテゴリーの文字を少し小さくし、色を薄くする
タイトルに目がいくように日付とカテゴリーの文字を少し小さくし、文字の色を少し薄くしました。
アイコンの色も文字と同じになるようにしました。
カテゴリーをクリックできることがわかるように、マウスオーバーで文字の色が変わるようにしました。
.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: #a0a0a0;/*マウスオーバーしたときの色*/ }
タイトルの文字を小さくし、タイトルの高さを調整
文字の大きさ
元のデザインは私がイメージしていたよりもカードの文字部分の割合が大きかったので、少しでも画像が目立つようにタイトルの文字を少し小さくしました。
font-sizeを18px→16pxに変更
タイトルの高さ
元のCSSだとタイトルの長さによってカードの縦の長さも変わります。
私はカードをタイトルの長さに関わらず同じ大きさにしたかったので、タイトル部分の高さはタイトルが3行になったときの高さに固定しました。
.page-archive .archive-entries .entry-title { }内にheight: 75pxを追加
.page-archive .archive-entries .entry-title {
height: 75px;
font-size: 16px;
}
.page-archive .entry-title a {
font-size: 16px;
}
カードをマウスオーバーしたときに画像が少々暗くなるコードを削除
「.page-archive .entry-thumb::before { }」この部分をカッコ内も含めて削除
パソコンから見る記事一覧のカスタマイズ（横長型）＊途中まで
当初はパソコンから見た時も横長型のデザインにしようと思いカスタマイズしていました。
しかし、途中でパソコンで見た時にはやはりカード型のほうがいいかなと考え、カスタマイズを中断しました。
スマホで見たときのデザインに似せようと思ってつくりました。
遠目で見たら、スマホから見たのと同じです。
元のデザインから引き算し、スマホで見た時のようなデザインになるようにしました。
/*記事一覧の本文を消す*/
.entry-description {
display: none;
}
/*記事一覧のカテゴリーを消す*/
.page-archive .categories a {
display: none;
}
/*タイトルをアイキャッチの右側にする*/
.archive-entry-header {
width: calc(100% - 220px);
float: right;
}
/*アイキャッチの大きさ*/
.page-archive .entry-thumb {
width: 180px;
height: 120px;
}カテゴリーは一度消しましたが、パソコンから見たときにはあるほうがいいかなと思いました。
カテゴリーをタイトルの下に移動するにはどうすればいいか考えているときに、やっぱりカード型にしようと思ったので、横長のカスタマイズはココまでとなりました。
私がカスタマイズした記事一覧のCSS
スマホから見たデザインのCSS
/*記事一覧（スマホ）*/
@media screen and (max-width: 640px) {
.page-archive .entry-thumb {
background-size: cover;
background-position: center;
width: 135px;
height: 90px;
}
.archive-entry-header {
width: calc(100% - 155px);
}
}
/* 記事一覧のはてなブログタグを消す（スマホ、PC共通）*/
.archive-entry-tags-wrapper {
display: none;
}パソコンから見たデザインのCSS
カード型のCSSは前述のとおり、ここにのせることはできません。
ちょっと残念。
終わりに
カード型のデザインはシンプルなものに落ち着きました。
もうちょっとカスタマイズしたい気もしています。
以前見かけたブログのカード型のデザインがかわいかったので、参考にしようと思ったんですがどのブログかわからなくなってしまいました。
いいなと思うデザインがあったらチェックしておこうと思います。
私ははてなブログproではないのでトップページを記事一覧形式にできないので残念です。
トップページ以外では記事一覧のページを見る機会はあまりないかもしれません。
それでも、アクセスしてくれた人がカテゴリー別だったり、新しい順で記事一覧を見た時に見やすいデザインであればブログ内を回遊しやすく、ブログの滞在時間も長くなるのではと期待しています。
まだ記事は4つしかないので、そうなるためにはもっと頑張って記事を書かないと！
