Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

fld_lock.gif 配布テンプレートのサイドバーの横幅を変更(狭く)したい
投稿日 : 2020/03/06(Fri) 18:16
投稿者 すまいるすまいる
参照先
お世話になります。

配布されてます、ダイナミックWebテンプレートをダウンロードさせていただきました。

サイドバーの横幅を変更(狭く)したいのですが、どうしたらよいでしょうか?

何度も拝読しましたが、どうしてもわからなくて質問に踏み切りました。

どうぞよろしくお願いいたします。
件名 [1] Re: 配布テンプレートのサイドバーの横幅を変更(狭く)したい
投稿日 : 2020/03/06(Fri) 18:45
投稿者 wanichan
参照先
> 配布されてます、ダイナミックWebテンプレートをダウンロードさせていただきました。

ありがとうございます。

> サイドバーの横幅を変更(狭く)したいのですが、どうしたらよいでしょうか?

これは、CSSのメディアクエリーで定義されているので、CSSの知識が必要となります。
話は長くなり即答できませんが、それまでの間、レスポンシブWebデザインについてご自身なりに調べていただけますか?

恐れ入りますが、よろしくお願い申し上げます。
件名 [2] Re: 配布テンプレートのサイドバーの横幅を変更(狭く)したい
投稿日 : 2020/03/06(Fri) 18:50
投稿者 すまいるすまいる
参照先
いつも早々にお返事ありがとうございます。

「恐れ入りますが」なんてとんでもございません。

ご指示通り、レスポンシブWebデザインについて勉強しておきます。
お忙しいとは存じますが、どうぞご指導よろしくお願い申し上げます。
件名 [3] Re: 配布テンプレートのサイドバーの横幅を変更(狭く)したい
投稿日 : 2020/03/07(Sat) 15:09
投稿者 wanichan
参照先
スタイルシートファイル style.css を開いて、下の方に
@media(min-width:1024px){
の行を探してください。
それ以下の記述がサイドバーを決定する部分です。
サイドバー幅を変更する際、合計幅が等しくなるようにメインコンテンツの段組み部分を広くする必要があります。少なくした分、メインコンテンツのブロック幅を増やせばOKです。

ディスプレイサイズが1024ピクセル幅の場合の既定はたとえばこんな感じだったとします。

@media(min-width:1024px){
.container{
width:975px
}
.wrapper {
display: inline-block;
*display: inline;
*zoom: 1;
width: 985px;
margin-bottom: 10px;
margin-top:10px;
}
#page_content {
margin: auto 0px;
width: 650px;
float: right;
}
#sidebar {
float: left;
width: 320px;
margin: auto 0px 10px 0px;
}

#sidebar のwidth: 320px をたとえば200pxにしたい場合は、差分として120ピクセル分 #page_content の幅を増やします。

#page_content {
margin: auto 0px;
width: 770px;
float: right;
}
#sidebar {
float: left;
width: 200px;
margin: auto 0px 10px 0px;
}
件名 [4] Re: 配布テンプレートのサイドバーの横幅を変更(狭く)したい
投稿日 : 2020/03/08(Sun) 20:53
投稿者 すまいるすまいる
参照先
こんばんは!
お忙しいのに、細やかなご指導、ありがとうございますm(_ _)m

さっそく、教えていただいた通りに変更してみます!

- WEB PATIO -