メインカラムの幅のカスタマイズについて

PR 2015/1/17

このトピックには8件の返信、2人の参加者があり、最後にyatraにより11年、 6ヶ月前に更新されました。

8件の返信スレッドを表示中

投稿者

投稿
- 2014年12月27日 2:50 PM #14414
  
  mimi
  ゲスト
  
  ご担当者様
  
  初歩的な質問で大変もうしわけないのですが、幅をもう少し狭くしたいのですが、CSCの「container」と「main」の部分を変更したのですが、変更できませんでした。
  他に方法があれば、お教えいただけると幸いです。
  お手数おかけしますがどうぞ宜しくお願いいたします。
- 2014年12月27日 8:48 PM #14461
  わいひら
  キーマスター
  全体の幅を変更するなら、style.cssの以下の部分を変更するといいかもしれません。
```
#header-in, #navi-in, #body-in, #footer-in{
  width: 1070px;
  margin: 0 auto;
}

#navi-in{/*両脇のボーダー幅2pxを差し引く*/
  width: 1068px;
}
```
- 2015年1月16日 7:06 PM #16986
  
  yatra
  ゲスト
  
  こんにちは。
  私も幅を狭くしたいので、上記をみてwidth:1000pxにして子テーマのスタイルシートに書き込みました。
  
  するとサイドバーが下にいってしまいました。
  
  私は、メインカラムとサイドバーの幅をそれぞれ10%ほど狭くしたいのですが、方法を教えていただけないでしょうか。メインカラムのカコミケイも応じた幅にしたいです。よろしくお願い致します。
  
  私のブログはこちらです。
  http://photo-yatra.tokyo/blog/
- 2015年1月16日 8:08 PM #16999
  わいひら
  キーマスター
  こんにちは。
  
  メインカラムの幅を狭くした分だけサイドバーの幅も狭くしないといけません。
```
#sidebar {
    width: 300px;/*←幅を狭くする*/
}
```
- 2015年1月16日 11:02 PM #17031
  
  yatra
  ゲスト
  
  ありがとうございました。
  サイドバーを狭くできました。
  
  PC画面上で画面を左に寄せたかったので、
  margin-left:80px;
  にしたらちょうどいい具合になりました。
  
  が、スマホ画面にも適用されてしまい、
  画面が右外にはみ出してしまいます。
  mobile.cssに「margin:0auto;」と書くだけでは
  ダメなのでしょうか。済みません。よろしくお願い致します。
- 2015年1月17日 11:12 AM #17086
  
  わいひら
  キーマスター
  
  mobile.cssに「margin:0auto;」
  
  これは、どのCSSセレクタに対するものでしょうか？
  それがわからないと何ともいえないです。
- 2015年1月17日 1:17 PM #17103
  
  yatra
  ゲスト
  
  子テーマ Simplicity Childのmobile.cssに次のように書き込みました。
  
  /*ここにモバイルのスタイルを書く*/
  .article {
  width:98%;
  margin: 0 auto;
  }
  
  済みません、まったく初心者でこの方法でよいのかどうかもわからないのですが、対応が難しそうなら諦めます。よろしく願い致します。
- 2015年1月17日 3:14 PM #17128
  
  わいひら
  キーマスター
  
  幅の％指定はやめたほうがいいと思います。
  あまりスタイルシートの変更になれていないのであれば、カラム幅の変更は難易度が上がるのでやめておいたほうがいいかもしれません。
- 2015年1月17日 4:22 PM #17140
  
  yatra
  ゲスト
  
  スタイルシートの変更はこれから勉強することにして、今回はカラム幅はこのままにすることにします。どうもありがとうございました。
投稿者

投稿