ワンポイントの色彩をテーマとしたシンプルなデザイン構成です。どんな大きさの画面でも見やすく、レスポンシブデザインに対応しています。iPhone iPadの縦向きは1カラム、PC iPadの横向きは2カラムレイアウトになります。
テーマRosaのアーカイブページ(記事一覧ページ)のアイキャッチ画像を3:2に変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。デフォルト設定は16:9です。
/* アーカイブページ(記事一覧ページ)のアイキャッチ画像を3:2にする */ .page-archive .archive-entry .entry-thumb { aspect-ratio: 3 / 2 }
テーマTangoのアーカイブページ(記事一覧ページ)のアイキャッチ画像を4:3に変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。デフォルト設定は16:9です。
/* アーカイブページ(記事一覧ページ)のアイキャッチ画像を4:3にする */ .page-archive .archive-entry .entry-thumb { aspect-ratio: 4 / 3 }
テーマRosaのサイドバーのタイトル部分を水平にしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* サイドバーのタイトル部分をを水平にする */ .hatena-module-title { margin: 0 0 20px; transform: rotate(0) skew(0) }
テーマRosaのサイドバーのタイトル部分のリボンをはずしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* サイドバーのタイトル部分のリボンをはずす */ .hatena-module-title::before, .hatena-module-title::after { border: none }
テーマRosaのアーカイブページ(記事一覧ページ)のカード型デザインの枠線を消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。
/* 追加 枠線を消す */ .page-archive .archive-entry { border: none }
テーマRosaの見出しデザインをリセットしたい場合は、デザイン→カスタマイズ→デザイン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 }
テーマRosaのサイドバーの注目記事のランキングカウンターを消したい場合は、デザイン→カスタマイズ→デザイン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 }