ブログテーマのリニューアルに向けて（2017年6月その1）

2017年6月6日

当ページのリンクには広告が含まれています。

このブログを始めてまだ5ヶ月と少し。このテーマもまだそれ以下しか使ってません。でもちょっと飽きてきました。なのでブログテーマのリニューアルをしようかと思っています。

本当は、今のテーマでなぜ不満なのか、そういうことを考えて整理して、それを解決するためのデザインにするのがいいのだと思います。でも今はそれはぼんやりと考えているだけで、とりあえずこういうの作ってみたいという気持ちで適当にいろいろやっています。
適当に作って、実際には適用しないだろう物もありますので、ここで消す前に1つ2つ残しておこうと思います。

INDEX

記事一覧表示トップページのカスタマイズ

f:id:c-miya:20170606213504j:plain
最近のはてなブログのアップデートで、トップページに記事一覧表示を選べるようになりました。ただ、一覧表示と言っても普通にアーカイブページのようなリストにしても面白くないと思いましたので、少しいじってみました。

サムネイルを大きく
本文部分を色を付けて1つ1つの記事を横向きカードらしく
サムネイルの位置を左右交互に

こんなイメージです。まぁ自分では使わないだろうなぁ、と思いつつお遊びでやったものです。一応cssを置いておきますね。Brooklynテーマで作成していますが、ほかのテーマでもまぁそう変わらないと思います。

css

.page-index .archive-entry{
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
height:264px;overflow:hidden;
background:#333333;
}
.page-index .archive-entry:nth-of-type(even){
background:#3f51b5;
}
.page-index .archive-entry:nth-of-type(odd){
padding:16px 16px 0px 296px;
}
.page-index .archive-entry:nth-of-type(even){
padding:16px 296px 0px 16px;
}
.page-index .entry-thumb-link{
-webkit-order: -1;
order: -1;
}
.page-index .entry-thumb {
width: 280px;
height: 280px;
background-position: center center;
background-size: cover;
background-repeat: none;
margin:0 0 0 0;padding:0 0 0 0;
}
.page-index .archive-entry:nth-of-type(odd) .entry-thumb{
position:absolute;top:0;left:0;
}
.page-index .archive-entry:nth-of-type(even) .entry-thumb{
position:absolute;top:0;right:0;
}
.page-index .archive-entry-body{
color:#fff;
}
.page-index  .archive-entry .categories{
position: absolute;
top: 0;
z-index: 10;
}
.page-index  .archive-entry .categories a.archive-category-link{
border-radius:0;
}
.page-index  .archive-entry .categories a.archive-category-link:last-of-type{
margin-right:0;
}
.page-index  .archive-entry:nth-of-type(odd) .categories{
left: 0;
}
.page-index  .archive-entry:nth-of-type(even) .categories{
right: 0;
}
.page-index .entry-title{
padding: 0.5em 0 0 0;
}
.page-index .entry-title a{
color:#fff;
}