はてなブログの公式テーマ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