Vaster2カスタマイズ!モバイル版トップページの横幅を変更する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
パソコンで記事を投稿した後、ときどきiPhoneでチェックするのですが、トップページでどうしても気になることが……。
それはコレ!

【Aの部分】
全体の横幅と比べて「メニューを開く」ボタンは短いんですよね。あと、メニューを開いた時と記事一覧が画面ギリギリなところ。

【Bの部分】
でかい!メニューを開くと、手持ちのiPhoneでは画面の約3分の1が占領されます。

そこで今回は、モバイル版でトップページを表示した時の横幅とメニューを開いた時の高さを変更する方法についてご紹介します。

スポンサーリンク

変更前の2つの注意点

バックアップをとること

HTMLコードを直接編集していくので、必ずバックアップをとっておきましょう!

バックアップのファイル名の付け方に迷ったら、こちらの記事をご参照ください。
Bloggerテーマバックアップの効果的なファイル名のつけ方は?

レスポンシブデザインのコードを編集すること

下の説明で”「XXXXXXX」で検索”と書いていますが、複数ある場合は必ず、レスポンスデザインのコードを編集しましょう!

検索した文字の数行上もしくは下にある「@media screen and (max-width: 768px){」の中だったら大丈夫です。

スポンサーリンク

HTMLの編集方法

Blogger管理画面「テーマ」を選択 → 「HTMLの編集」を選択

スポンサーリンク

横幅のサイズ変更(横幅の統一)

画面ギリギリにならないようにサイズを少し小さくします。その時に、次の3つの横幅を全て統一します。

  • メニューボタン
  • メニューを開いた時
  • 記事一覧

それでは、個別に変更していきましょう!

メニューボタンの横幅

1.「.button-toggle」で検索
2.「width:90%;」を「width:95%;」に変更

【変更前】
@media screen and (max-width: 768px){
.button-toggle{
display:block !important;
width:90%;
box-sizing:border-box;

【変更後】
@media screen and (max-width: 768px){
.button-toggle{
display:block !important;
width:95%;
box-sizing:border-box;

メニューを開いた時の横幅

1.「.header-nav」で検索
2.「width:auto;」を「width:95%;」に変更
3.「margin:0 auto;」を「margin:0 10px !important;」に変更

【変更前】
.header-nav{
width:auto;
height:auto;
background:#000;
margin:0 auto;
background:#f9f9f9;
}

【変更後】
.header-nav{
width:95%;
height:auto;
background:#000;
margin:0 10px !important;
background:#f9f9f9;
}

記事一覧の横幅

1.「.content-wrapper」で検索
2.「width:auto;」を「width:95%;」に変更

【変更前】
.content-wrapper{
width:auto;
margin:0 auto;
padding-top:5px;
}

【変更後】
.content-wrapper{
width:95%;
margin:0 auto;
padding-top:5px;
}

スポンサーリンク

メニューを開いた時の行間の変更

メニューを開いた時のサイズを縮小します。画面の4分の1程度に収めてみましょう!(メニューの数によって大きさは変わります。)

1.「.header-nav a」で検索
2.「20px」を「10px」に変更

【変更前】
.header-nav a{
padding:20px 20px;
font-size:16px;
}

【変更後】
.header-nav a{
padding:10px 20px;
font-size:16px;
}

スポンサーリンク

変更前・変更後のスクショ

①「メニューボタン」「メニューを開いた時」「記事一覧」の横幅が画面より少し小さく、同じサイズになりました。

②メニューを開いた時の大きさがちょうどイイ感じになりました。

スポンサーリンク

さいごに

いかがでしたでしょうか?
デフォルトでも文字や画像がきれたりすこともなく表示されます。でも、気になってしまうんですよね。血液型はおおざっぱと言われるO型ですけど。
私のようにどうしても気になる方は是非お試しください!

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント