このページでは、Vaster2のレスポンシブデザインのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら

レスポンシブデザインのカスタマイズ

レスポンシブデザインについて

レスポンシブデザインとは、ページを表示するデバイス（PC・スマホ・タブレットなど）の画面サイズに合わせて表示が変わるように設定されたウェブデザインのこと（レスポンシブウェブデザインとも）。

Vaster2にはスマホ表示時のレスポンシブデザインが設定されており、そのCSSは「レスポンシブデザイン」以下にまとめられている（「@media screen and (max-width: 768px){}」で囲まれている部分がスマホ表示の設定になる）。

CSSのルールや各デバイスのブレイクポイントについては下記リンクを参照。

・レスポンシブの基本、メディアクエリの書き方
・レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ

既存の設定をカスタマイズ

Vaster2の既存の設定を変えるには「@media screen and (max-width: 768px){}」以下のCSSを参照する。その中の「.クラス{」で検索すれば、大体どこの設定なのかが分かる（例えば「.sidebar{」ならサイドバー）。

元々、記述されていない項目もあるので、設定するには「「@media screen and (max-width: 768px){}」」を設けて変更する。

追加しておきたいレスポンシブ設定

Vaster2は、初期設定で文字サイズが大きめに設定されている。

スマホで見た時にレイアウトが崩れやすいので、個人的には見やすい文字サイズを設定しておきたい。

そこで、Vaster2を使用する上で「追加しておきたいレスポンシブ設定」を書き残しておこうと思う。

追加する項目と説明

個人的に追加しておいた方がいいと思う要素は以下の通り。

・ブログタイトル：.header-title a{}
・ブログ説明：.header-description p{}
・記事リストのタイトル：.article-list-title h2{}
・記事ページのタイトル：.main-outer h1{}
・記事ページのh2見出し：.entry-content h2{}
・記事ページのh3見出し：.entry-content h3{}
・記事ページのh4見出し：.entry-content h4{}
・記事ページの文章：.post-body {}
・シェアボタンのタイトル：.share-title{}
・関連記事のタイトル：#related-posts h2{}（!importantが必要）
・サイドバーガジェットの文字サイズ：.widget-content{}
・コメントの文章：.main-outer p{}
・コメントの投稿者名・日付時刻：.comment-block{}
・コメントのリンク文字：.continue{}
・コメント返信のリンク文字：.comment-replies{}

レスポンシブ設定の追加方法

「HTMLの編集」で「/*　レスポンシブデザイン」を検索し、その下辺りに追加するとよい（追加例参照）。

変更を確認するには、Google Chromeの「デベロッパーツール」を使うと分かりやすい。

参考：PCでスマホの表示を確認する方法