質問内容
はじめまして、玲莉と申します。一年ほど前から、ナノ様にてこちらのテンプレート(basic no.2)を使わせていただいています。(basic no.4、no.5のように)ＰＣのみ高さの枠を固定して、スクロールバーがでるようにしたいのですが、cssに疎く自分では設定できなかったので、この機会にお聞きしたいと思い書き込みさせていただきました。デザイン上不可能でしたらすみません。
これからも運営頑張ってください。応援しています。

回答
こんにちは。質問ありがとうございます！

ご質問の件ですが、可能です。
以下にやり方を説明しますね！

テンプレートではボックスに内容を入れて、ボックスごとにいろいろな指定をすることが基本です。私のテンプレートでよく使っているdivというのが代表的なボックスです。

ボックスに名前をつけて（私のテンプレートでよく見られる class="ホニャララ" などです）HEADにあるCSSでは、その名前ごとに背景色や幅、枠など色々なことを指定していきます。

.ホニャララ{
指定する項目:指定する内容;
指定する項目:指定する内容;}

と言った感じ。内容はいくつも指定できます。
具体的には

.all{width:600px;}

指定する項目と指定する内容の書き方は決まっています。グーグルなどで検索するとたくさん出てきますので暇な時にチラッと見てみてください。

その指定は書かなければこうなる、といった初期状態があります。たとえば、幅を指定しなければ画面いっぱいまで内容が広がる、と言った感じです。

高さの指定も、指定しなければどこまでもボックスが伸びていくというのが初期状態です。

そこで縦に伸ばしたくないボックスに高さを指定します。（basic no.4などのHEAD内CSSの、 height:〜px;　というのがそれです）
質問の内容にあわせると、.main{〜省略〜}のところにheight:400px;などと書き加えればOKです。
これで高さは指定できました。

しかし、この高さからはみ出るくらい内容が多い時もあると思います。その時の初期状態はブラウザ（インターネットエクスプローラー（IE）など）によって違います。IEやOperaなどでは、何も指定しないのと同じように下に伸びていきます。高さを指定した意味はありませんがデザインは崩れません。しかしFirefoxでは高さ以上担った部分は枠を飛びでてしまうのでデザインが崩れてしまいます。

これを防ぐために、高さ指定をしたボックスにoverflow: auto;を書き加えます。
これははみ出ないときは指定した高さのまま何も表示せず、はみ出るときは指定したボックスにスクロールバーを表示させるための指定です。

これでお望みの形になるはずです！

また、質問ではパソコンのみということなので<pc>と</pc>で囲んだほうがいいと思います。携帯では高さの指定に対応していないものも多いので



以上長々と説明しましたが、つまりは

.main {
〜省略〜
<pc>
height:300px;
overflow:auto;</pc>}

と色のついたところを追加すればいいということです！　アラ簡単！
300という数字はお好きな値に変えてください。

では、企画参加ありがとうございました〜！


わからなかった場合などの追加質問はこちらへどうぞ！


≪BACK