Zebra

Grid Layoutでデザインしたモバイルファーストに最適化したユーザーフレンドリーな美しいグレースケールでミニマル構成のバランスの良いシンプルなデザイン構成です。
どんな大きさの画面でも見やすく、ヘッダー画像もレスポンシブデザインに対応しています。
iPhone iPadの縦向きは1カラム、PC iPadの横向きはは2カラムレイアウトになります。

記事一覧アーカイブページカテゴリーページ最新記事ページ有料会員用トップページはPCとiPadは3列のカード型、iPhoneの横向きは2列のカード型になります。

質問などはこちらのコメント欄にお願いします。
質問などお問い合わせ
 今すぐ直接書く場合はこちら

はてなブログ用CSSエントリー記事一覧
はてなブログ用CSS

CSS用変換ツールエントリー記事一覧
CSS用変換ツール

テキスト⇒画像コンバーターエントリー記事
テキスト⇒画像コンバーター

テーマZebraのアーカイブページ(記事一覧ページ)の記事部分のレイアウトを2行2列表示にしたい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* アーカイブページ(記事一覧ページ)の記事部分のレイアウトを2行2列表示にする */

@media (min-width: 768px) {
    .page-archive .archive-entry {
        width: calc(50% - .5em);
    }
}
.page-archive .archive-entry .entry-thumb {
	aspect-ratio: 16 / 9;
}

テーマZebraのアーカイブページ(記事一覧ページ)のアイキャッチ画像を3:2に変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。デフォルト設定は正方形です。

/* アーカイブページ(記事一覧ページ)のアイキャッチ画像を3:2にする */

.page-archive .archive-entry .entry-thumb {
    aspect-ratio: 3 / 2;
}

テーマZebraのアーカイブページ(記事一覧ページ)のアイキャッチ画像を4:3に変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。デフォルト設定は正方形です。

/* アーカイブページ(記事一覧ページ)のアイキャッチ画像を4:3にする */

.page-archive .archive-entry .entry-thumb {
    aspect-ratio: 4 / 3;
}

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

/* 追加 枠線を消す */

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

テーマZebraのサイドバーのタイトルの背景色を消したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてinherit;の部分を好きな色に変更してください。

/* サイドバーのタイトルの背景色を消す */

.hatena-module-title {
    background-color: #fff;
    color: inherit;
}

.hatena-module-title a,
.hatena-module-title a:hover {
    color: inherit;
}

テーマZebraのサイドバーのタイトルの背景色を変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペして#f99の部分を好きな色に変更してください。

.hatena-module-title {
    background-color: #f99;
}

テーマZebraのサイドバーのタイトルの文字色を変更したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペして#333の部分を好きな色に変更してください。

/* サイドバーのタイトルの文字色を変更する */

.hatena-module-title,
.hatena-module-title a,
.hatena-module-title a:hover {
    color: #666;
}

テーマZebraのサイドバーのタイトルを中央に配置したい場合は、デザイン→カスタマイズ→デザインCSSに以下のコードをコピペしてください。

/* サイドバーのタイトルを中央に配置する */

.hatena-module-title {
    text-align: center;
}

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

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

.entries-access-ranking li::before {
    content: none;
}
.entries-access-ranking li:nth-of-type(-n + 10)::before {
    background-color: transparent;
}
.entries-access-ranking .urllist-date-link,
.entries-access-ranking .urllist-title-link {
    margin-left: 0;
}