ネイビーブルーとホワイトをテーマとしたシンプルなデザイン構成です。どんな大きさの画面でも見やすく、レスポンシブデザインに対応しています。iPhone iPadの縦向きは1カラム、PC iPadの横向きは2カラムレイアウトになります。

テーマBorderのアーカイブページ(記事一覧ページ)を、カード型デザインに変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* アーカイブページ(記事一覧ページ)を、カード型デザインに変更する */

.page-archive .archive-entries {
    display: flex;
    flex-direction: column;
    gap: 1em 0
}
@media (min-width: 480px) {
    .page-archive .archive-entries {
        flex-flow: row wrap;
        gap: 1em
    }
}
.page-archive .archive-entry {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 5px 3px -5px hsl(0 0% 75% / .3);
    box-sizing: border-box;
    padding: .625em;
    display: flex;
    flex-direction: column
}
@media (min-width: 480px) {
    .page-archive .archive-entry {
        width: calc(50% - .5em)
    }
}
.page-archive .archive-entry .entry-thumb-link {
    order: 0;
    overflow: hidden
}
.page-archive .archive-entry .entry-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    float: none;
    height: auto;
    margin-right: 0;
    object-fit: cover;
    transition: .4s ease-in-out;	
    width: 100%
}
.page-archive .archive-entry .entry-thumb:hover {
    background-color: hsl(0 0% 0% / .08);
    opacity: .55;
    transform: scale(1.3)
}
.archive-entry .archive-entry-header {
    margin-top: .5em;
    order: 1;
    display: flex;
    flex-direction: column-reverse
}
.archive-entry .archive-entry-header .entry-title {
    font-size: 1rem;
    margin-bottom: .5em
}
.archive-entry .archive-entry-header .date {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .5em
}
.archive-entry .archive-entry-header .date a {
    color: #999
}
.archive-entry .archive-entry-header .date a:hover {
    color: #999
}
.page-archive .archive-entry .archive-entry-body {
    order: 2
}
.page-archive .archive-entry .categories {
    margin: 0 0 .5em;
    order: 3
}
.page-archive .archive-entry .categories a {
    font-size: .7rem
}
.archive-entry .archive-entry-body .entry-description {
    font-size: .8rem
}
.archive-entry .archive-entry-body .social-buttons {
    margin: .5em 0
}
.page-archive .archive-category-link:not(:first-child) {
    display: none
}
.page-archive .archive-entry-tags-wrapper {
    display: none
}
.page-archive .star-container {
    display: none
}

テーマBorderのカード型デザインに変更したアーカイブページ(記事一覧ページ)を、サムネイル画像とタイトルと日付のみにしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* 追加 サムネイル画像とタイトルと日付のみにする */

.page-archive .archive-entry .archive-entry-body {
    display: none
}
.page-archive .archive-category-link {
    display: none
}

テーマBorderのカード型デザインに変更したアーカイブページ(記事一覧ページ)のカード型デザインの枠線を消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* 追加 枠線を消す */

.page-archive .archive-entry {
    border: none;
    box-shadow: none
}

テーマBorderの見出しデザインをリセットしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* 見出しデザインをリセットする */

.entry-content h1::before,
.entry-content h1::after,
.entry-content h2::before,
.entry-content h2::after,
.entry-content h3::before,
.entry-content h3::after {
    content: none
}
.entry-content h4,
.entry-content h5, 
.entry-content h6 {	
    border-bottom: none
}

テーマBorderのサイドバーの注目記事のランキングカウンターを消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* ランキングカウンターを消す */

#box2 .hatena-module-entries-access-ranking .hatena-urllist li::before,
#box2 .hatena-module-entries-access-ranking .hatena-urllist li:nth-of-type(1)::before,
#box2 .hatena-module-entries-access-ranking .hatena-urllist li:nth-of-type(2)::before,
#box2 .hatena-module-entries-access-ranking .hatena-urllist li:nth-of-type(3)::before,
#box2 .hatena-module-entries-access-ranking .hatena-urllist li:nth-of-type(n+9)::before  {
    background-color: transparent;
    content: none
}
#box2 .hatena-module-entries-access-ranking .urllist-date-link,
#box2 .hatena-module-entries-access-ranking .urllist-title-link {
    margin-left: 0
}