トップページを丸いタイルデザインに改造する

目的

muragonのカスタマイズ。
以下のコードを変更する。

  • 要素の配置をfloatでなくflexを用い簡単に配置する。
  • タイル全体を記事へのリンクとする。
  • タグの表示数が限られる為、非表示とする。
  • 記事を読まずコメントする事はない為、コメントを書くボタンを非表示とする。
  • Javascriptで同一変数にvarの2重定義を止める。また、不要とした。
はてなブログと異なり、ブログトップか否か識別するclassがない。この為、HTMLを修正し、ブログトップを識別する.top-contentsを設ける。

CSS

.top-contents {
display : flex;
flex-wrap : wrap;
justify-content : space-between;
}

/* カード */
.unit-contents {
overflow : hidden;
position : relative;
width : 310px;
height : 310px;
margin-top : 0!important;
margin-bottom : 6px;
border : none;
border-radius : 50%;
background : rgba(0, 0, 0, 0.2);
text-align : center;
}

.unit-contents:after {
content : "";
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #c0c0c0;
transition : all .5s ease-in-out;
}

.unit-contents:hover:after {
height : 0;
}

.unit-contents:last-of-type {
margin-bottom : 2em;
}

/* ヘッダ */
.unit-contents .entry-header {
z-index : 1;
position : absolute;
height : 100%;
width : 100%;
display : flex;
justify-content : center;
align-items : center;
}

/* 記事 */
.unit-contents .entry-excerpt {
display : none;
}

/* 日付 */
.unit-contents .entry-publication-date {
color : #fff;
}

/* タイトル */
.unit-contents .entry-title {
margin : 10px 30px 0 30px;
}

.unit-contents .entry-title a {
overflow : hidden;
display : block;
max-height : 4.5em;
line-height : 1.5em;
font-size : 16px;
color : #fff!important;
}

.unit-contents .entry-title a:before {
content : "";
display : block;
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
}

.unit-contents .entry-body-inner {
margin : 0;
}

/* サムネイル */
.unit-contents .entry-thumbnail {
width : 310px;
height : 310px;
margin : 0;
border : 0;
}

.unit-contents .entry-footer {
display : none;
}

Javascript

ブログトップのサムネイルの画像サイズは192×192px。
文字があり視認性を考えると、背景画像が鮮明である必要はない。
この為、本Javascriptは不要とした。

  • 元画像のサイズの幅、高さ共310pxを超える場合、何れの小さい方で310pxに縮小し、310pxで中央トリミングされる。
  • サイズの幅、高さが310pxに満たない場合、310pxで中央トリミングされる。
    この場合、object-fit:coverで拡大される為、解像度が落ちる。
$(function() {
$(".entry-thumbnail img").each(function() {
var replace = $(this).attr('src').replace(/192x192/,'310x310');
$(this).attr('src',replace);
});
});

HTML

<!--{if:isIndexPage}-->
<div class="top-contents">

</div>
<!--{/if:isIndexPage}-->