極めてシンプルがテーマのシンプルなデザイン構成です。どんな大きさの画面でも見やすく、レスポンシブデザインに対応しています。iPhone iPadの縦向きは1カラム、PC iPadの横向きは2カラムレイアウトになります。
テーマSehrのアーカイブページ(記事一覧ページ)を、カード型デザインに変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* アーカイブページ(記事一覧ページ)を、カード型デザインに変更する */ .page-archive .archive-entries { display: flex; flex-direction: column; justify-content: space-between; row-gap: 1em } @media (min-width: 480px) { .page-archive .archive-entries { flex-direction: row; flex-wrap: wrap } } .page-archive .archive-entry { background-color: #fff; border: 1px solid #ddd; box-shadow: 0 5px 3px -5px hsla(0,0%,75%,.3); 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: hsla(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 }
テーマSehrのカード型デザインに変更したアーカイブページ(記事一覧ページ)を、サムネイル画像とタイトルと日付のみにしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* 追加 サムネイル画像とタイトルと日付のみにする */ .page-archive .archive-entry .archive-entry-body { display: none }