【はてなブログ】TOPページを自由自在にカスタマイズする方法。

このTOPページですが...

https://quietplace.hatenablog.com/

f:id:quietplace_1:20200218133611p:plain

 これをどうやってるかです。

仕組み

これは実は1つの記事です。
タイトルや日付や記事上、記事下を消している感じです。

でもどうやってTOPに表示しているかというと...

f:id:quietplace_1:20200218134616p:plain

こんな感じにしていますw

こうすると今後記事を投稿しても未来の時間に投稿していることになるので一番上にこの記事が表示されるようになります。

あと購読中のブログからもこの記事は表示されません。

9999-12-31 23:59に購読中のブログに表示されますw

あとTOPに表示される記事を1つにしないと駄目ですね..

f:id:quietplace_1:20200218134840p:plain

他にはアーカイブページや最新記事の一番上に出てきてしまうので消します。

/* 月間アーカイブから9999年を消す */
.archive-module-year[data-year="9999"] {
display: none;
}
/* アーカイブページから特定の記事を消す */
.archive-entry[data-uuid="26006613505316646"] {
display: none;
}
/* 最新記事の一番目の要素を消す */
.recent-entries-item:first-child {
display: none;
}

 UUIDはChromeの場合F12などで確認してください。

f:id:quietplace_1:20200218140523p:plain

確かここ↓

f:id:quietplace_1:20200218140030p:plain

 で肝心の記事のHTMLなんですが...

あと「display: none;」使いすぎるとSEO的に悪いので考えたほうがよさそうです。