貯金2000万からのセミリタイア継続中

40代・貯金2000万円で無謀なセミリタイア生活を始めて5年以上継続中。気がつけば50代に…

このブログで行ったカスタマイズについて(その2)

シンプルなデザインが好きで、説明(Description)も表示しない方がいいと思っています。記事一覧の要約も非表示に変更しました。

ブログのタイトルの下のブログの説明もPC用には必要だと思いますが、スマホ用には不要だと思っています。そこでこれをスマホ用の表示のみ消すことにしました。

レスポンシブデザインでのスマホ用の指定部分

まずレスポンシブデザインとは、1つのデザインでPC用、タブレット用、スマホ用の表示に対応したデザインテーマのことです。

NakedはPC用では2カラムデザインで、タブレットスマホでは1カラムデザインで、サイドバーは記事の下に表示されます。

その記述方法はいくつかありますが、Nakedで使っているのはこの形。

「PC用、及び共通の設定」

@media screen and (max-width: 768px) {
  「タブレット用の設定」
}
@media screen and (max-width: 680px) {
  「スマホ用の設定」
}

追加・変更設定でも「@media」を使ってスマホ用の変更点を書き加えることができます。

ブログタイトル下の説明の非表示設定

次に「非表示」をどう指定するか、ですがこれは簡単。「display: none;」を指定するだけです。

ブログタイトル下の説明は「#blog-description」ですから、カスタマイズとして書き加えるのは次のようになります。

@media screen and (max-width: 680px) {
    #blog-description {
        display: none;
    }
}

シンプルな表示が好きで、非表示にしたいものがあるなら「display: none;」を指定してどんどん非表示にしてしまうのも良いですね。

はてなブログカスタマイズガイド