はてなブログの公式テーマSmoothのアーカイブページをCSS Gridでカード型にしてみた。

レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」の記事一覧ページをGrid レイアウトでカード型にしてみました。

はてなブログPROのユーザーは表示形式を一覧形式に変更すればトップページがカード型になります。

全てのブラウザがCSS Gridに対応したので、はてなブログのデフォルトの公式テーマ「Smooth」用のカード型デザインをCSS Gridで追加コードを作ってみた。

実行結果です笑

iPhoneの縦向きは1列 iPad iPhoneの横向きは2列 PCは3列表示になります

↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓

/* Smoothのアーカイブページ(記事一覧ページ)をカード型デザインに変更する */
/* Grid レイアウト */

.page-archive .archive-entries {
    display: grid;
    gap: .5em 0; /* 余白 行のみ */
    grid-template-columns: 1fr;
    grid-template-rows: auto /* 縦スクロールバー対策 */
}

/* 画面幅576pxから2列 ブレイクポイント */

@media(min-width: 576px) {
    .page-archive .archive-entries {
        gap: .75% 2%; /* 余白 列と行 */
        grid-template-columns: repeat(auto-fit, minmax(48%, 1fr))
    }
}

/* 画面幅992pxから3列 ブレイクポイント */

@media(min-width: 992px) {
    .page-archive .archive-entries {
        grid-template-columns: repeat(auto-fit, minmax(32%, 1fr))
    }
}

/* カード型記事ページの外枠 */

.page-archive .archive-entry {
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 87%);
    box-shadow: 6px 6px 6px 0 hsl(0 0% 0% / .45);
    box-sizing: border-box;
    line-height: 1.3;
    padding: 0 0 2rem;
    position: relative;
    word-break: break-all;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: .5em
}

.page-archive .archive-entry a {
    text-decoration: none
}

/* サムネイル画像の外枠 */

.page-archive .entry-thumb-link {
    order: -2; /* 1番目に配置 */
    display: block;
    overflow: hidden
}

/* サムネイル画像 */

.page-archive .entry-thumb {
    aspect-ratio: 16 / 9; /* アスペクト比 */
    border: 1px solid hsl(0 0% 87%);
    float: none;
    height: auto;
    margin: 0;
    width: 100%
}

/* カテゴリータグ全体の外枠 */

.page-archive .categories {
    margin: 0;
    padding: 0 .75em;
    order: -1; /* 2番目に配置 */
    line-height: 1
}

/* カテゴリータグ */

.page-archive .archive-category-link {
    font-size: .75rem
}

/* 最初のカテゴリータグ以外非表示 */

.page-archive .archive-category-link:not(:first-child) {
    display: none
}

/* 日付 */

.page-archive .archive-date {
    font-size: .75rem;
    margin-bottom: 0;
    position: absolute; /* 1番下に配置 */
    left: 12px;
    bottom: 5px
}

.page-archive .archive-date a {
    color: hsl(0 0% 49%)
}

.page-archive .archive-entry-header {
    padding: 0 .75em
}

/* 記事タイトルの外枠 */

.page-archive .entry-title {
    order: 1; /* 3番目に配置 */
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0
}

/* 記事タイトル */

.page-archive .entry-title .entry-title-link {
    color: hsl(0 0% 0%)
}

.page-archive .archive-entry-body {
    padding: 0 .75em;
    order: 2 /* 4番目に配置 */
}

.page-archive .entry-description {
    color: hsl(0 0% 27%);
    font-size: .75rem;
    margin: 0;
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

/* タグ非表示 */

.page-archive .archive-entry-tags-wrapper {
    display: none
}

/* ソーシャルボタン */

.page-archive .social-buttons {
    display: block;
    text-align: right;
    width: 100%
}

/* ブックマーク数 */

.page-archive .bookmark-widget-counter {
    text-align: right
}

/* はてなスター非表示 */

.page-archive .star-container {
    display: none
}

/* Grid レイアウト */
/* End Smoothのアーカイブページ(記事一覧ページ)をカード型デザインに変更する */

サムネイル画像とタイトルと日付のみにしたい場合は追加でどうぞ

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

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

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

こちらはFlexboxでカード型

↑公式テーマLifeのアーカイブページ(記事一覧ページ)をカード型にした画像だよ↑

サムネイル画像とタイトルと日付とカテゴリータグの表示レイアウトです

レスポンシブデザインに対応しているはてなブログの公式テーマで使えます

iPhoneの縦向きは1列 iPad iPhoneの横向き PCは2列表示になります

/* 公式テーマのアーカイブページ(記事一覧ページ)をカード型デザインに変更する */
/* Flexbox */

.page-archive .archive-entries {
    display: flex;
    flex-direction: column;
    gap: 1em 0
}

@media (min-width: 576px) {
    .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: 576px) {
    .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;
    text-align: left;
    display: flex;
    flex-direction: column-reverse
}

.archive-entry .archive-entry-header .entry-title {
    font-size: 1rem;
    margin-right: 0;
    margin-bottom: .5em;
    margin-left: 0
}

.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;
    text-align: left;
}

.page-archive .archive-entry .categories a {
    font-size: .7rem
}

.archive-entry .archive-entry-body .entry-description {
    color: #555;
    font-size: .8rem;
    margin: 0;
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.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
}

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

/* Flexbox */
/* End 公式テーマのアーカイブページ(記事一覧ページ)をカード型デザインに変更する */

記事説明文を表示したい場合は追加でどうぞ

/* 記事説明文を表示 */

.page-archive .archive-entry .archive-entry-body {
    display: block
}

公式テーマ「Smooth」

blog.hatena.ne.jp

iPhoneで見ると横揺れするはてなブログの公式テーマSmoothをCSSで直してみた。

⬆️画像だよ　クリックで拡大⬆️
レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」を使ったブログの表示がiPhoneで見ると横揺れがするのでCSSを見てみたら、犯人がちゃんといるじゃあ、ありませんか笑。

entry-footer-adというclassの左右のマージンがネイティブマージンになっていたのだ。
⬇️画像だよ　横揺れの根本的な原因はこれ⬇️

なんでネイティブマージンでデザインをととのえたのか理由はわからないけど、とりあえずCSSを修正。

(max-width: 767px) {
    .entry-footer-ad {
        margin-left: 0;
        margin-right: 0
    }
}

iPadとiPhoneの横向き表示(2カラムレイアウト)では横揺れがしなかったのでメディアクエリを使用して、iPadからはデフォルトのCSSでの表示だよ。

これで横揺れの根本的な原因が無事、解決しました。

横揺れがするのがいやなSmoothを使っているはてなユーザーは、デザイン→カスタマイズ→デザインCSSにコピペでどうぞ。

なぜネイティブマージンが横揺れの原因なのか？

↓それはこちらのブログに詳しく書いてあります。↓

ネガティブマージンには、注意点がひとつありまして、それは、画面幅が縮んだ時に、要素が画面外にはみ出してしまうことです。

引用元：ネガティブマージン をつかって親要素からはみ出す | もち備忘ログ

Smoothはメインカラムとサイドカラムのバランスが絶妙で記事が読みやすいよねー。

参考にさせていただきました。Special Thanks

urakatahero.hateblo.jp

keratoconu.hatenablog.com

公式テーマ「Smooth」

blog.hatena.ne.jp

はてなブログの公式テーマSmoothのサイドバーのアイキャッチ画像を右側にしてみた

↑こんな感じになります↑

レスポンシブデザインに対応しているはてなブログのデフォルトの公式テーマ「Smooth」のサイドバーのアイキャッチ画像を右側に表示してみました。

システム側のblog.cssでアイキャッチ画像をfloat:left;で、左側に寄せているので、float: right;に書き換えて、marginを調整するだけです。

floatを使ってますがシステム側のblog.cssで回り込みの解除(clear fix)はやってくれるので、CSSの記述はこれで良しとします。

自分用の備忘録としてCSSのソースコードを残しておく。

使う方はお好きなのをデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ

最新記事のアイキャッチ画像を右側に表示する

/* 最新記事のアイキャッチ画像を右側に表示するCSSコード */

#box2 .recent-entries li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

人気記事のアイキャッチ画像を右側に表示する

/* 人気記事のアイキャッチ画像を右側に表示するCSSコード */

#box2 .entries-access-ranking li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

最新記事と人気記事のアイキャッチ画像を両方とも右側に表示する

/* 最新記事と人気記事のアイキャッチ画像を両方とも右側に表示するCSSコード */

#box2 .urllist-with-thumbnails li .urllist-image {
    float: right;
    margin: 0 0 .7em .7em
}

公式テーマ「Smooth」

blog.hatena.ne.jp

はてなブログの公式テーマEpicをレスポンシブデザインにしてみた

↑上の画像が表示結果だよ↑

ベーシックなデザインで最も利用者の多いオフィシャルテーマ「Epic」。

レスポンシブデザインに対応してないのでレスポンシブデザインにするCSSの追加コードを作りました。

公式テーマ「Epic」専用のCSSになります。

他のレスポンシブデザインに対応してない公式テーマでは使えません。

自分用の備忘録としてCSSのソースコードを残しておく。

↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓

/* EpicをレスポンシブデザインにするCSSコード */
/* Add Responsive design CSS for Theme Epic Responsive: yes */

*,
*::before,
*::after {
    box-sizing: border-box
}
@media (max-width: 959px) {
    #container {
        max-width: 96%
    }
    #content-inner {
        display: flex;
        justify-content: space-between;
        width: 100%
    }
    #wrapper {
        float: none;
        width: 72%
    }
    #box2 {
        float: none;
        width: 24%
    }
    #top-box {
        margin: 20px 30px
    }
    #main {
        float: none;
        width: 100%;
        padding: 0
    }
    #box1,
    .entry-header-menu a {
        display: none!important
    }
    .entry img {
        height: auto;
        max-width: 100%
    }
    .date { 
        display: inline;
        position: initial
    }
    .date a { 
        display: inline-block;
        margin-right: .5rem
    }
    .date-last-updated {
        font-size: 1rem
    }
    .date-last-updated .blogicon {
        vertical-align: -10%
    }
    .breadcrumb-gt:nth-last-of-type(2),
    .breadcrumb-child:last-of-type {
        display: none
    }
}
@media (max-width: 767px) {
    #container {
        max-width: 100%
    }
    #content-inner {
        flex-direction: column
    }
    #wrapper,                                                    
    #box2 {
        width: 100%
    }
    #blog-description {
        display: none
    }
    .archive-entry {
        overflow-wrap: anywhere
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    #box2 #box2-inner {
        display: grid;
        gap: 30px;
        grid-template-columns: 1fr 1fr
    }
}

/* End EpicをレスポンシブデザインにするCSSコード */
/* End Add Responsive design CSS for Theme Epic Responsive: yes */

公式テーマ「Epic」

blog.hatena.ne.jp

はてなブログの公式テーマEpicのエントリー記事の幅を100px広げてみた

↑上の画像が実行結果だよ↑

ベーシックなデザインがとても美しいオフィシャルテーマ「Epic」の日付部分をタイトルの上に表示してコンテナの幅を広げずにエントリー記事の部分を100px広げてみた。

更にシンプルになってこれはこれでかっちょえー笑

自分用の備忘録としてCSSのソースコードを残しておく。

↓使う方はデザイン→カスタマイズ→デザインCSSに以下のコードをコピペでどうぞ↓

/* Epicのコンテナの幅を広げずにエントリー記事の幅を100px広げる */

.date {             
    display: inline;
    position: initial
}
.date a {
    display: inline-block;
    margin-right: .5rem
}
.date-last-updated {
    font-size: 1rem
}
.date-last-updated .blogicon {
    vertical-align: -10%
}
#box1 {
    display: none
}
#top-box {
    margin: 20px 30px
}
#main {
    float: none;
    padding: 0;
    width: 660px
}

/* End Epicのコンテナの幅を広げずにエントリー記事の幅を100px広げる */

公式テーマ「Epic」

blog.hatena.ne.jp

はてなブログの公式テーマEpicのサイドバーのアイキャッチ画像にタイトルリンクを重る

↑実行結果だよ↑

ベーシックなデザインが人気のオフィシャルテーマ「Epic」のサイドバーの注目記事と最新記事のアイキャッチ画像にタイトルリンクを重ねて見た。

アイキャッチ画像を設定するとタイトルリンクがしりすぼみになるのでアイキャッチ画像にタイトルリンクを重ねたよー。

アイキャッチ画像を全ての記事に設定していて日付とカテゴリを表示設定していない場合のみ有効(限定的笑)

Epicのリンクカラーを背景色にしてopacityで透過してるんだよ。

自分用の備忘録としてCSSのソースコードを残しておく。

/* Epicのサイドバーのアイキャッチ画像にタイトルリンクを重る */

#box2 .hatena-urllist {
    margin: 0;
    padding: 0
}
#box2 .urllist-item {
    position: relative
}
#box2 .urllist-image {
    display: block;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 180px
}
#box2 .urllist-title-link {
    background-color: #256fba;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
    margin: 0;
    max-width: 100%;
    opacity: .9; 
    overflow: hidden;
    padding: .125rem .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;
    z-index: 1 /* position: relativeに重ねる要素が複数ある場合の順番の指定 */
}
#box2 .bookmark-widget-counter {
    position: absolute;
    top: .625em;
    right: 0;
    z-index: 2 /* position: relativeに重ねる要素が複数ある場合の順番の指定 */
}
@media (max-width: 767px) {
    #box2 .urllist-image,
    #box2 .urllist-title-link {
        width: 100%
    }
}

/* End Epicのサイドバーのアイキャッチ画像にタイトルリンクを重る */

↓実行結果だよ↓

公式テーマ「Epic」

blog.hatena.ne.jp

ノーマライズCSS、自分用備忘録

はてなブログ用に自分で作成したデザインテーマのCSSの記述でブラウザが対応したVendor Prefixを削除したので、ついでにノーマライズCSSもモダンブラウザ用にいらない記述を削除したので、自分用備忘録として削除後のソースコードを残しておく。

text-size-adjust以外のVendor PrefixとIE用の記述は全て削除したよ。

コメント部分の日本語訳は、自分が解かれば良い程度です。

Normalize.css

necolas.github.io

/* ==========================================================================
/* ! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
/* Vendor Prefix and IE other than text-size-adjust CSS that removed
/* Document 
   ========================================================================== */
/**
 * 1. line-heightを1.15で設定。
 * 2. iOSで向きが変わってもフォントサイズが調整されないようにする。
 */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100% /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * bodyのマージンを取り除く。
 */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0
}

/**
/* Chrome、Firefox、Safariで、sectionとarticleコンテキスト内のh1要素の
/* フォントサイズとマージンを修正する。
 */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0
}

/* Grouping content
   ========================================================================== */
/**
 * 1. preのmonospaceのフォントサイズが縮小されるのを正しい表示に修正する。
 * 2. preのフォントサイズを1emで調整する。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Chrome、Edge、Opera、Safariでtext-decorationを正しい表示に修正する。
 */
/**
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; 
  text-decoration: underline dotted 
}

/**
 * Chrome、Edge、Safariでフォントの太さを調整する。
 */
/**
 * Add the correct font weight in Chrome, Edge,and Safari.
 */
b,
strong {
  font-weight: bolder
}

/**
 * 1. code,kbd,sampのmonospaceのフォントサイズが縮小されるのを正しい表示に修正する。
 * 2. code,kbd,sampのフォントサイズを1emで調整する。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em /* 2 */
}

/**
 * smallのフォントサイズを80%で調整する。
 */
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%
}

/**
 * sub,supがline-heightに影響を与えないようにする。
 * 
 */
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -0.25em
}
sup {
  top: -0.5em
}

/* Forms
   ========================================================================== */
/**
 * button,input,optgroup,select,textareaのフォントスタイルを設定。
 */
/**
 * Change the font styles in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15;
}

/**
 * 開発者がfieldsetをゼロにしたときの挙動をpadding: 0で制御する。
 */
/**
 * Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
  padding: 0
}

/**
 * Chrome、Firefox、Opera用にprogressをvertical-align: baselineで設定。
 */
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline
}

/* Interactive
   ========================================================================== */
/**
 * summaryをdisplay: list-itemで設定。
 */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item
}

/* End normalize.css v8.0.1
   ========================================================================== */
   

使用した画像素材は ／出典：Freepik 著作者：freepi様からお借りしました。
Special Thanks

jp.freepik.com