はてなブログのテーマ「DUDE」をレスポンシブデザインに対応させる

f:id:cruller:20160409220307p:plain

はてなブログのおしゃれなデザインテーマ「DUDE」。

tsukuruiroiro.hatenablog.com

ご覧のように当ブログでも使用させていただいております。

唯一の残念な点は、レスポンシブデザインに非対応なこと。ちょっといじってみたところ、レスポンシブ対応にできたのでその方法を紹介します。

カスタマイズ方法

もともとCSSにはメディアクエリが記載されていたので、調整はごく簡単です。

まず、ブログの管理画面からデザイン > カスタマイズ > デザインCSSを開き、以下のコードを記述します。

/* Responsive: yes */

これはコメントアウトされていますが、省略しないでください。このようなコメントが記述されている場合、はてなブログではスマートフォンに適したメタ情報<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / >がHTMLヘッダーに記載されます。

続いて、デザインCSSの一番下に以下のコードを追加します。

@media (max-width: 767px) {
    /* グローバルヘッダとの隙間をなくす */
    #container {
        padding-top: 0;
    }

    /* 左右のマージンを相対指定に */
    #content {
        margin-left: 3.125% !important;
        margin-right: 3.125% !important;
    }

    /* 横幅の調整 */
    #container #content {
        width: auto;
    }
    #blog-title-content {
        width: auto;
        text-align: center;  /* ブログタイトルを中央揃えに */
    }
}

最後に、スマートフォン > 詳細設定 > レスポンシブデザインにチェックを入れればカスタマイズは終了です。

今回のカスタマイズは必要最低限のものとなっています。そのため、スマートフォンでは縦の余白が画面サイズに比して大きいと感じるかもしれません。その場合は適宜調整してください。

動作確認は、Mac版Safariのレスポンシブ・デザイン・モードで行っています。なお、筆者はHTMLやCSSはブログでいじる程度なのでお気付きの点等あれば教えていただければ幸いです。