極めてシンプルがテーマのシンプルなデザイン構成です。どんな大きさの画面でも見やすく、レスポンシブデザインに対応しています。
テーマSehrのアーカイブページ(記事一覧ページ)を、カード型デザインに変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* アーカイブページ(記事一覧ページ)を、カード型デザインに変更する */ .archive-entries { display: flex; flex-direction: column; justify-content: space-between } @media (min-width: 480px) { .archive-entries { flex-direction: row; flex-wrap: wrap } } .page-archive .archive-entry { background-color: #fff; border: 1px solid #d5d5d5; box-shadow: 0 5px 3px -5px hsla(0,0%,75%,.3); margin-bottom: 30px; padding: 10px; position: relative; overflow-wrap: break-word; display: flex; flex-direction: column; justify-content: space-between } @media (min-width: 480px) { .page-archive .archive-entry { width: 49% } } @media (min-width: 1200px) { .page-archive .archive-entry { width: 49.5% } } .page-archive .archive-entry .entry-thumb-link { overflow: hidden; padding-top: 56.25%; position: relative; order: 0 } .page-archive .archive-entry .entry-thumb { background-position: center; background-repeat: no-repeat; border-radius: 5px; float: none; height: 100%; margin-right: 0; position: absolute; top: 0; left: 0; transition: .4s ease-in-out; width: 100% } .page-archive .archive-entry .entry-thumb:hover { background-color: hsla(0,0%,0%,.08); opacity: .55; transform: scale(1.3) } .archive-entry .archive-entry-header { height: 100%; margin-top: .5em; display: flex; flex-direction: column-reverse; order: 1 } .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 }