WordPressテーマSANGOの質問

トップページの幅を狭くしたい

アバター
ふしあな

はじめまして。
美しいテーマをありがとうございます。

「記事ページ」の横幅を狭くする方法は、
「2019/02/27 佐藤様」の質問への回答で承知しました。
同様に、「トップページ」のカラムの横幅を狭くする方法を教えていただけないでしょうか?よろしくお願い致します。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/07/02

はじめまして。
・「トップページの横幅」とは、記事一覧を表示したときのサイドバーを含む全体幅のことでしょうか。
・それとも「トップページ用固定ページ」の幅のことでしょうか(その場合、どの固定ページテンプレートについての幅でしょうか)。
・どのサイズの端末から見たときの幅でしょうか(スマホ表示、PC表示など)。

よろしくお願いします。

アバター
ふしあな
2019/07/03

お忙しいのに、お手間お掛けしてすみません。

・「トップページの横幅」とは、
 記事一覧を表示したときのサイドバーを含む全体幅のことです。

・PCで表示したときの幅のことです。

どうぞよろしくお願いいたします。

サルワカくん
サルワカくん
2019/07/04

なるほど、たとえば、1030px以上のウィンドウで見たときのトップページの全体幅は以下のようなCSSで変更することができます。

@media only screen and (min-width: 1030px) {
  .home .wrap, .home .maximg {
    width: 900px; /* 横幅をここに */
  }
}

よろしくお願いします。

アバター
ふしあな
2019/08/14

ご報告が遅くなり、大変申し訳ございません。
教えていただいた記述で、トップページの全体幅が変更できました。
希望のサイズになりました。ありがとうございました。

アバター
ふしあな
2019/08/13

先日は教えていただき、ありがとうございました。

教えていただいたcssを記述したのち、サイドバーの割合を大きくしたいと思い、下記のように記述しましたが、うまくできませんでした。

.t-2of3 {
width: 75%;/*メインカラム幅*/
}
.t-1of3 {
width: 25%;/*サイドバー幅*/
}

すみませんが、ご指導いただけますでしょうか?
お忙しいところ申し訳ありません。
どうぞよろしくお願いいたします。

サルワカくん
サルワカくん
2019/08/15

そのようにするとサイドバーが表示されないモバイル端末でも適用されてしまいます。
以下のように書くことで1030px以上の端末でのみ適用されるようになります。

@media (min-width: 1030px) {
  .d-5of7 {
    width: 67%;
  }
  .d-2of7 {
    width: 33%;
  }
}/* end min1030px */

外観⇒カスタマイズ⇒追加CSSに記載すると良いと思います。

なお、カラム幅を変えると(もしかするとですが)今後のアップデートで何らかの変更があったときにレイアウトがわずかに崩れる可能性があります。
その際はこちらのCSSを削除してみるとよいと思います。
よろしくお願いします。

アバター
ふしあな
2019/08/23

ご回答くださり、ありがとうございます。
「追加CSS」を利用してみます。今後の影響についても教えていただき嬉しいです…ありがとうございます!

トップページの全体幅と、投稿ページの全体幅を、別に設定しています。
今回教えていただいた内容を記述すると、
投稿ページは希望通りになるのですが、
トップページはサイドバーが狭いままでした。

トップページについてのみ、
メインカラム幅とサイドバー幅を変更する(指定する)方法はありますか?
トップページと投稿ページは全体幅が違いますが、
サイドバーの見え方は同じにしたいのです。
…説明がうまくできなくてすみません。

もし大掛かりなことでしたら、
トップページと投稿ページの幅は同じにしたいと思います(^_^;)

たびたびお手数をおかけします。
よろしくお願いいたします。

サルワカくん
サルワカくん
2019/08/23

トップページと投稿ページの幅はv1.8.4〜同じになっています。
ご自身が追加している

  .home .wrap, .home .maximg {
    width: 1020px; /* 横幅をここに */
  }

というCSSによりトップページの幅が変わってしまっているようなので、こちらを削除することで、トップページとその他ページの幅が同じになります(サイドバー幅も合うようになるかと思います)。
よろしくお願いします。

アバター
ふしあな
2019/08/23

ご回答くださり、ありがとうございます。
ご指摘のcssは「2019/07/04」のご回答を受けて追加しました。
これを維持しつつ、
トップページのサイドバーの幅を変更したいのですが、可能でしょうか?

サルワカくん
サルワカくん
2019/08/25

「トップページと投稿ページは別の幅にしたいが、サイドバーの幅は統一したい」ということですね。

その場合、CSSのcalcプロパティを使うのが良いかと思います。
参考:https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

サイドバーの幅をwidth: 300px;とする場合、
メインカラムの幅をwidth: calc(100% - 300px)とします。
これによりサイドバーの幅が300pxに保たれ、残りの部分がメインカラムになります。

これをトップページと投稿ページ、両方で指定します。やや玄人向けなので、上記の説明がいまいち分からない場合、このカスタマイズはやめておいた方が良いかと思われます。
(今後のアップデートやご自身の他のカスタマイズによりレイアウトが崩れてしまう可能性があるので…)

アバター
ふしあな
2019/08/25

ご回答くださり、ありがとうございました。
方法が分かりました。私にはレベルが高いということも…。
もしこのカスタマイズを実行することとなれば、結果をご報告させていただきます。
たびたびのご質問で失礼しました。
ありがとうございました。