このブログで行ったカスタマイズについて（その２）

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

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

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

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

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

その記述方法はいくつかありますが、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;」を指定してどんどん非表示にしてしまうのも良いですね。